總結(jié)ASP.NET C#中經(jīng)常用到的13個(gè)JS腳本代碼

更新時(shí)間：2016年04月18日 10:41:05 作者：freeliver54

本文總結(jié)了ASP.NET C#在實(shí)際開發(fā)過程中13個(gè)JS腳本代碼，方便大家在開發(fā)中使用，希望對(duì)大家有用。

在C#開發(fā)過程中，免不了寫一些JS，其實(shí)做后端開發(fā)的，本身不擅長(zhǎng)寫JS，干脆總結(jié)一下，方便自己也方便別人，分享給大家。呵呵~~

1.按鈕前后臺(tái)事件

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"

OnClientClick="alert('客房端驗(yàn)證，阻止向服務(wù)器端提交');return false;" />

2.注冊(cè)相關(guān)事件：onblur,onclick,onchange

復(fù)制代碼代碼如下:

this.TextBox1.Attributes.Add("onchange",

"alert('數(shù)據(jù)被改動(dòng)，現(xiàn)檢查輸入是否符合規(guī)則');");

3.注冊(cè)相關(guān)屬性：

復(fù)制代碼代碼如下:

this.TextBox1.Attributes.Add("readOnly", "true");

4.引入JS文件

前臺(tái)HTML頁面：

復(fù)制代碼代碼如下:

<script type="text/javascript" src="JScript.js" language="javascript"></script>

<script type="text/javascript" language="javascript">

function fn_Name()

{

    alert("JS");

}

</script>

后臺(tái)cs頁面：

復(fù)制代碼代碼如下:

this.RegisterClientScriptBlock("jsFile",
"<script type='text/javascript' src='JScript.js' language='javascript'></script>");
[code]

5.點(diǎn)擊按鈕時(shí) 相關(guān)欄位非空判斷

[code]
function checkEmpty(txtObj,msgShow)
{
    if(txtObj.value == "")
    {
        alert(msgShow);
        return false;
    }
}
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"
OnClientClick="return checkEmpty(TextBox1,'TextBox1 不能為空')" />

6.通過ChcekBox的是否點(diǎn)選來控制其相對(duì)應(yīng)的TextBox 是否可輸入

復(fù)制代碼代碼如下:

function chkTextBox(chkObj,txtObj)

{

    if(chkObj.checked==true)

    {

        txtObj.value = "";

        txtObj.readOnly = false;    

        txtObj.focus();

    }

    if(chkObj.checked == false)

    {

        txtObj.value = "";

        txtObj.readOnly = true;     

    }

}

<input id="Checkbox1" type="checkbox" onclick="chkTextBox(Checkbox1,TextBox1)" />

7.傳值到模態(tài)窗口并得到傳回的值

復(fù)制代碼代碼如下:

var EnCodeQueryName = escape(Name);

var strPara = "'dialogWidth: 400px;dialogHeight: 400px;dialogLeft: 300px;dialogTop: 200px;toolbar: no;menubar: no;resizable: yes;location: no;status: no;scrollbars= no'";

var ReturnInfo = window.showModalDialog("QryName.aspx?&Name="+EnCodeQueryName +"&QueryID="+QueryType+"",'',strPara);

if(ReturnInfo !=null)

{

    var arrayReturnInfo = ReturnInfo .split("@");

    document.all.drpID.value = arrayReturnInfo[1];

    document.all.txtName.value= arrayReturnInfo[2];

}

8.彈出JS的確認(rèn)對(duì)話框,并根據(jù)確認(rèn)結(jié)果觸發(fā)后臺(tái)相關(guān)操作

復(fù)制代碼代碼如下:

if(confirm('確認(rèn)如何嗎?'))

{

  document.all.hidbtn_Submit.click();

}

else

{

  document.all.hidbtn_Cancel.click();

}

HTML頁面相關(guān)代碼：

復(fù)制代碼代碼如下:

<input id="hidbtn_Submit" type="button" value="確認(rèn)修改"

style="display:none;"

onserverclick="hidbtn_Submit_ServerClick"

runat="server" />

9.添加頁面對(duì)快捷鍵的響應(yīng),如按F2時(shí) 進(jìn)行新增按鈕的操作等

復(fù)制代碼代碼如下:

#region 添加頁面對(duì)快捷鍵的響應(yīng)

string strJS_ShortKey = "<script language='javascript' type='text/javascript' > ";

strJS_ShortKey += " document.onkeydown=shortKeyDown; ";

strJS_ShortKey += " function shortKeyDown()  ";

strJS_ShortKey += " { ";

// 新增

if (this.ButtonCtl1.ImgBtn_AddFamily.Visible)

{

    string btnInsertCID = this.ButtonCtl1.ImgBtn_Insert.ClientID.Trim();

    //F2 - 113

    strJS_ShortKey += " if(event.keyCode=='113') ";

    strJS_ShortKey += "  { ";

    strJS_ShortKey += "    document.all('" + btnInsertCID + "').click();";

    strJS_ShortKey += "    event.keyCode= 0; ";

    strJS_ShortKey += "    event.returnValue = false; ";

    strJS_ShortKey += "    return false; ";

    strJS_ShortKey += "  } ";

}

// 修改

if (this.ButtonCtl1.ImgBtn_Edit.Visible)

{

    string btnEditCID = this.ButtonCtl1.ImgBtn_Edit.ClientID.Trim();

    //F3 - 114

    strJS_ShortKey += " if(event.keyCode=='114') ";

    strJS_ShortKey += "  { ";

    strJS_ShortKey += "    document.all('" + btnEditCID + "').click();";

    strJS_ShortKey += "    event.keyCode= 0; ";

    strJS_ShortKey += "    event.returnValue = false; ";

    strJS_ShortKey += "    return false; ";

    strJS_ShortKey += "  } ";

}

strJS_ShortKey += " } ";

//注冊(cè)事件

Page.RegisterStartupScript("shortKey", strJS_ShortKey);

#endregion

10.彈出的提示分行顯示

復(fù)制代碼代碼如下:

alert('aaa \r\n bbb \r\n ccc');

如果是在后臺(tái).cs文件中注冊(cè)
則需要

復(fù)制代碼代碼如下:

string strAlertContent = "aaa"+" \\r\\n ";
strAlertContent += "bbb" +" \\r\\n ";

11.點(diǎn)擊GridView上的某一行時(shí),行首列處的RadioButton處于選中狀態(tài),同時(shí)保存相關(guān)值在隱藏欄位

復(fù)制代碼代碼如下:

//用查詢得的數(shù)據(jù)集進(jìn)行綁定

if (dt.Rows.Count > 0)

{

    //綁定

    this.gv_InfoFromSendModule.DataSource = dt;

    this.gv_InfoFromSendModule.DataBind();

    //確定按鈕顯示

    this.btn_OK.Visible = true;

    this.txthid_RowCount.Text = dt.Rows.Count.ToString();

}

//GridView的RowDataBound

protected void gv_InfoFromSendModule_RowDataBound(object sender, GridViewRowEventArgs e)

{

   if (e.Row.RowIndex < 0)

      return;

   e.Row.Attributes.Add("onclick", "radButton('" + e.Row.RowIndex.ToString() + "','" + e.Row.Cells[1].Text.Trim() + "');");

   //RadioButton rad = (RadioButton)e.Row.Cells[0].FindControl("rad_Select");

   //rad.Attributes.Add("onclick", "radButton('"+e.Row.RowIndex.ToString()+"','"+ e.Row.Cells[1].Text.Trim()+"');");

}

//行上所綁定的JS

function radButton(rowIndex,rowGUID)

{

    //gv_InfoFromSendModule$ctl02$rad_Select

    var rowCount = parseInt(document.all.txthid_RowCount.value)+2;

    for(var i=2;i<rowCount;i++)

    {

        var tmpName;

        if(i<10)

        {

            tmpName = "gv_InfoFromSendModule$ctl0"+i+"$rad_Select";               

        }

        else

        {

            tmpName = "gv_InfoFromSendModule$ctl"+i+"$rad_Select";   

        }

        //取得對(duì)應(yīng)的Radio對(duì)象

        var tmpRadio = document.getElementById(tmpName);

        //當(dāng)前選中 其他取消選中

        if((i-2) == rowIndex)

        {                 

            tmpRadio.checked = true;

        }

        else

        {

            tmpRadio.checked = false;

        }

    }

    document.all.txthid_GUID.value = rowGUID;

}

12.去掉前后空格

復(fù)制代碼代碼如下:

function fn_Trim(obj)

{

    if(obj==null)

    {

       return;

    }

    else

    {

        var oldStr = obj.value;

        var newStr = oldStr.replace(/^\s+|\s+$/g,"");

        obj.value = newStr;

    }      

}

13.TextBox文本內(nèi)容長(zhǎng)度判斷看是否超過長(zhǎng)度超過返回true

復(fù)制代碼代碼如下:

function fn_IsTooLong(obj,varLength)

{

    if(obj==null)

    {

       return false;

    }

    else

    {

        var valueStr = obj.value;

        var len = valueStr.match(/[^ -~]/g) == null ? valueStr.length : valueStr.length + valueStr.match(/[^ -~]/g).length ;

        if(len > parseInt(varLength) )

        {

            return true;

        }

        else

        {

            return false;

        }

    }      

}