JQuery是一种非常强大的客户端JS编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与asp.net的控件结合开发。
比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击checkbox按钮，来实现自动计算当前行两个数字的平均值呢？前提是用JQuery来实现？
我们直接在页面的Page_Load事件中输入如下代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | protected void Page_Load( object sender, EventArgs e) { if (!Page.IsPostBack) { DataTable dt = new DataTable(); dt.Columns.AddRange( new DataColumn[] { new DataColumn( "id" , typeof (Int32)), new DataColumn( "num1" , typeof (Int32)), new DataColumn( "num2" , typeof (Int32)) }); DataRow dr = null ; dr = dt.NewRow(); dr[ "id" ] = 1; dr[ "num1" ] = 20; dr[ "num2" ] = 40; dt.Rows.Add(dr); dr = dt.NewRow(); dr[ "id" ] = 2; dr[ "num1" ] = 40; dr[ "num2" ] = 30; dt.Rows.Add(dr); this .GridView1.DataSource = dt.DefaultView; this .GridView1.DataBind(); } } |
前台页面body部分：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | < body > < form id = "form1" runat = "server" > < div > < asp:GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "false" > < Columns > < asp:TemplateField HeaderText = "状态" > < ItemTemplate > < asp:CheckBox ID = "checkstate" runat = "server" /> </ ItemTemplate > </ asp:TemplateField > < asp:TemplateField HeaderText = "编号" > < ItemTemplate > < asp:Label ID = "lblId" runat = "server" > <%#Eval("id") %></ asp:Label > </ ItemTemplate > </ asp:TemplateField > < asp:TemplateField HeaderText = "数字1" > < ItemTemplate > < asp:Label ID = "lblNum1" runat = "server" > <%#Eval("num1") %></ asp:Label > </ ItemTemplate > </ asp:TemplateField > < asp:TemplateField HeaderText = "数字2" > < ItemTemplate > < asp:Label ID = "lblNum2" runat = "server" > <%#Eval("num2") %></ asp:Label > </ ItemTemplate > </ asp:TemplateField > < asp:TemplateField HeaderText = "平均值" > < ItemTemplate > < asp:TextBox ID = "avg_value" runat = "server" /> </ ItemTemplate > </ asp:TemplateField > </ Columns > </ asp:GridView > </ div > </ form > </ body > |
关键的在页面的head部分，输入如下代码就可以实现如图效果了。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script src= "js/jquery-1.4.2.js" ></script> <script type= "text/javascript" > $( function () { $( "#<%=GridView1.ClientID%>" ).find( "tr td input[type=checkbox]" ).each( function () { $( this ).bind( "click" , function () { if ( this .checked) { var id = $( this ).parent().parent().find( "span[id*=lblId]" ).text(); var num1 = $( this ).parent().parent().find( "span[id*=lblNum1]" ).text(); var num2 = $( this ).parent().parent().find( "span[id*=lblNum2]" ).text(); var result = (parseFloat(num1) + parseFloat(num2)) / 2; $( this ).parent().parent().find( "input[id*=avg_value]" ).val(result); } else { $( this ).parent().parent().find( "input[id*=avg_value]" ).val( "" ); } }); }); }); </script> |
你会发现JQuery的代码读着很轻松，很容易理解。而且代码也很优美，最关键的是兼容性很好。
再附一个简单点的例子，这是一个静态html页面，看JQuery是如何发挥威力的。效果是点击每一行的按钮时，弹出当前行的text里面的value。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | < html > < head > < script type = "text/javascript" src = "jquery-1.4.2.js" ></ script > < script type = "text/javascript" > $(function(){ $("table tr td").each(function(){ $(this).find("[type=button]").click(function(){ alert($(this).parent().parent().find("[type=text]").val()); }); }); }); </ script > </ head > < body > < table > < tr > < td >1</ td > < td >< input type = text value = "数据1" /></ td > < td >< input type = button value = "获取" /></ td > </ tr > < tr > < td >2</ td > < td >< input type = text value = "数据2" /></ td > < td >< input type = button value = "获取" /></ td > </ tr > </ table > </ body > </ html > |
试想，如果我们用js去做，将会很麻烦，而且还要考虑各种浏览器的兼容性。看到这里不得不感叹一句，JQuery虽然短小，但是相当强大啊。