最近開發一個IT 運維報修的網站,因為時間比較緊,也沒有時間系統性的拿一本WEB開發的書來細看,匆匆忙忙就開始了,
還好有資深的WEB開發同事提供專業的意見, 已經到了收尾的階段了, 于是把一些遇到的問題寫成筆記存下來
1) 排版
<frameset rows="70,*" frameborder="1" framespacing="0" style="border-top:3px #CCC Ridge;border-left:3px #CCC Ridge;">
<frame id="tophtm" name="Top" src="top.htm" scrolling="no" noresize frameborder="0"/>
<frameset cols="165,*" id="idFrame" name="mainMiddle" border="0" frameborder="0" framespacing="0">
<frame name="LeftMenu" src="LeftMenu.htm" frameborder="0" noresize scrolling="no" />
<frame name="mainFrame" frameborder="0" src="Users.aspx" scrolling="auto" style="border:solid 1px #999999;"/>
</frameset>
</frameset>使用frameset 的好處就是簡單,可以分成各種常規布局. 比如第1行先將屏幕分成上下兩塊, 上:70px, 剩下的70px以外的空間劃給下面,
第3行將剩下的空間分成左右兩部分, 左邊 165px, 剩下的分給右邊, 然后再分別設置這3塊對應的屬性.
2) 自定義 js 庫與調用
新增文件命名為 myjslib.js 加入到 vs2010的專案中, 在 <head> 和 </head>加入以下引用
<script src="Scripts/myjslib.js" type="text/javascript"></script>就可以在 html 中調用了
(1)在頁面加載時調用
<script type="text/javascript" language="javascript">
window.onload = function load() {
var url = window.location.href;
alert(url);
myjs.setpara();
}
</script>(2) onclick 事件調用 js
οnclick="javascript:myjs.top_message('teststr');
myjslib.js 內容:
function myjslib() {
this.setpara = setpara;
this.getpara = getpara;
this.sendcs = sendcs;
this.top_message = top_message;
}
function top_message(hrefStr) {
alert(hrefStr);
window.top.mainFrame.location = hrefStr;
}
function getpara() {
var url = window.location.href;
var i = url.indexOf("?");
var result = "";
if (i > 0)
result = url.substr(i + 1, url.length - i)
return result;
}
注意: js 中的函數要逐個驗證, 有一次因為粗心漏了一個 } 號, 結果調試時不管調用哪個函數都提示函數未定義, 白白浪費了很多時間來調試.
3) html 接收參數賦值給 htm dom 對象
如果一個頁面調用另一個 abc.htm 頁面,并且需要把編號和姓名傳遞給 abc.htm 頁面, abc.htm 再把兩個參數顯示出來.
假如調用方式為: abc.htm?no=007_name=零零漆
在 abc.htm中加入 window.onload 調用 js 函數
js函數中獲取當前 url, 即:abc.htm?no=007_name=零零漆
經過處理獲得變理 no=007, name=零零漆
在js函數中使用以下方式將變量值賦給文本 label
var test = document.getElementById("lblNo");
lblNo.innerText = no; //innerText 表示修改文本內容當然 如果希望 js 修改前臺控件其它屬性(比如超鏈接的跳轉地址): lblNo.href = "www.baidu.com";
4)C#后臺調用 js 函數
網上很多人說C#后臺調用js函數是不可能的, 不要理他們 
有2個函數:
ClientScript.RegisterClientScriptBlock(this.GetType(), "msg", "test1()", true);
ClientScript.RegisterStartupScript(this.GetType(), "msg", "test1()", true);
都可以調用 js 中的 test1 函數, 比如修改 htm dom 對像的值需要使用第2個, 執行第1個會失敗. (執行順序的原因)
注意:如果前臺 html 沒有包含服務器控件(即: runat="server"), 那麼在 Page_Load中的 ClientScript.RegisterStartupScript 函數將不會被執行.
如需要了解兩個函數的區別請參考以下文章:
http://www.cnblogs.com/ice5/archive/2010/07/06/1772359.html
5)全局變量
如果系統性的從 web 開發基礎開始學習, 那這就不算是問題了.
向 web 開發同事請教, 原來是醬紫實現的:
定義一個 BaseClass.cs (名字可以隨便起), 繼承UI.Page, 然后定義需要的全局變量和函數(比如 IsLogin, UserName, Role 等等)
public class BaseClass : System.Web.UI.Page
在其它頁面中繼承 BaseClass, 就可以使用 BaseClass 中的全局變量和函數了.
6)讓dom對象超鏈接 a 調用 js
上面提到我的網頁的頂部是一個獨立的 htm 頁面, 如果點擊這個獨立 htm 頁面的超鏈接, 所跳轉的網頁會覆蓋整個頁面破壞之前的布局,
如果希望新的頁面只顯示在右下方區域, 就需要用到以下 js 自定義的函數
function top_message(hrefStr) {
window.top.mainFrame.location = hrefStr; // mainFrame 是布局時定義的 frame 名稱
}怎樣讓超鏈接 a 調用 js 呢?
如果把 href 參數去掉
<a οnclick="javascript:myjs.top_message('changepassword.aspx');" target="mainFrame">就會發現, 雖然可以實現其功能, 但當鼠標放到這個鏈接上時鼠標指針變成文本類型的指針了 (不是一個手指的指針)
終于在網上找到了完美解決方法, 在 js 后加上 return false; 即:
<a href="" οnclick="javascript:myjs.top_message('changepassword.aspx');return false;" target="mainFrame">網上的解釋為: 當超鏈接的 onclick 后面有 return false 后就會忽略 href 屬性.
7)調試時 js 中的 alert() 函數問題
調試時經常會用到 js 的 alert 函數, 結果被 alert 給耍了,
原來在一個 C# 的函數中調用了多次 alert, alert函數只會被執行一次.而且是在這個 C# 的函數運行完成后才執行的.
所以不建議在正式應用時在 C# 后臺使用 js alert 函數, 同時它還有另一個問題: 拖動 alert 彈出的內容,背景網頁會變花, (刷墻的感覺,真是biu 倍爽..)
8)html 文本垂直居中
設置 div height 與 line-height 相同即可, 當然最好加上 white-space:nowrap; overflow:hidden; 瀏覽器縮小時不會被擠壓換行
9)正則表達式
理論上網頁需要對所有的輸入進行驗證, 尤其是有些數據要寫入到后臺數據庫,
比如輸入數字時要先檢查, 對一個字符串直接進行 convert.int16() 是不推薦的做法,
再比如對需要錄入到數據庫的字符串中包含單引號(') , 很可能會報錯,
C#中表則表達式的內容比較多, 如果要自制比較復雜的函數需要參考正則表達式的詳細文檔,
以下是幾個常用的正則表達式函數:
/// <summary>
/// 判斷字符串是否為正整數
/// </summary>
/// <param name="_str"></param>
/// <returns></returns>
public bool IsInt(string _str)
{
return Regex.IsMatch(_str, @"^[0-9]+$");
} /// <summary>
/// 判斷字符串是否為字母數字下劃線漢字
/// </summary>
/// <param name="_str"></param>
/// <returns></returns>
public bool IsABC_NUM_HZ_(string _str)
{
return Regex.IsMatch(_str, @"^\w+$");
} /// 判斷字符串是否符合復雜度規則,包含數字,包含字母,包含特殊符號,8-20位之間
/// </summary>
/// <param name="_str"></param>
/// <returns></returns>
public bool IsPasswordRule(string _str)
{
return Regex.IsMatch(_str, @"(?=.*[0-9])(?=.*[a-zA-Z])(?=([\x21-\x7e]+)[^a-zA-Z0-9]).{8,20}", RegexOptions.Multiline | RegexOptions.IgnorePatternWhitespace);
} /// <summary>
/// 判斷字符串是否為漢字
/// </summary>
/// <param name="_str"></param>
/// <returns></returns>
public bool IsHZ(string _str)
{
for (int i = 0; i < _str.Length; i++)
{
if (Regex.IsMatch(_str[i].ToString(), @"^[\u4E00-\u9FA5]+$"))
return true;
}
return false;
} /// <summary>
/// 判斷是否為 email 地址
/// </summary>
/// <param name="_str"></param>
/// <returns></returns>
public bool IsEmail(string _str)
{
//如果包含漢字,則返回false
if (IsHZ(_str)) return false;
return Regex.IsMatch(_str, @"^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$");
} /// <summary>
/// 判斷字符串是否為漢字,逐個字符檢查
/// </summary>
/// <param name="_str"></param>
/// <returns></returns>
public bool IsHZ(string _str)
{
for (int i = 0; i < _str.Length; i++)
{
if (Regex.IsMatch(_str[i].ToString(), @"^[\u4E00-\u9FA5]+$"))
return true;
}
return false;
}
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
