jQuery获取asp.net服务器控件

 

大家可能在使用jQuery时，碰到要获取服务器控件值的问题。有人觉得好奇，获取服务器控件值的方法同获取html标签值是一样的啊！是的，但是当网页中引用了自定义控件或者母板页时，服务器控件的ID就会发生改变，而不是我们之前看到的ID。

下边我们以一个例子来阐述用jQuery获得自定义控件中服务器控件的值。

 

<asp:TextBox ID="txtControl" runat="server" Text="我来自自定义控件"></asp:TextBox>

上边是一个自定义控件中的文本框，如果对自定义控件不了解。可在这里一并学习下，同新建.aspx文件的方法一样，在项目中新建一个.ascx文件，将上述代码加入进去即可。这就算一个简单的自定义控件。在需要的地方，我们只需引用自定义控件即可。这样省去每个页面都要加入相同代码的重复性工作和其不必要性，类似母板页的作用。

 

<asp:TextBox ID="txtUserName" runat="server" Text="测试"></asp:TextBox>

在.aspx文件中，有上边这样一个文本框，引入自定义控件的方法很简单，在设计模式下，我们只需将.ascx文件拖动到我们想要的地方，便可实现。

本例中，我们得到：

 

<uc1:ucTest ID="uc" runat="server" />

ucTest就是自定义控件的文件名。下边进入我们本篇的主要内容。运行项目，查看源代码时，服务器控件转换为如下形式：

 

<input name="txtUserName" type="text" value="测试" id="Text1" />
<input name="uc$txtControl" type="text" value="我来自自定义控件" id="uc_txtControl" />

可以清楚的看到，自定义控件中服务器控件的ID发生了变化。

得到txtUserName值，我们用平时用的方法即可：

 

jQuery("#txtUserName").val();

用上述方法，我们已经知道是得不到txtControl值的。在这里直接给出解决方法，再进行一点小小的解释。

 

jQuery("[id$='txtControl']").val();

此方法用到了jQuery选择器的知识，有不了解的还望看看我前边关于jQuery选择器的总结。这里匹配以txtControl结束的元素，这样即实现了我们的目标。

最后提一下jQuery扩展的用法，使用.extend()方法，我们可以扩展一些方法。在这里，我们以扩展得到服务器控件值为例：

 

jQuery.extend({
    clientID: function(id) {
        return jQuery("[id$='" + id + "']").val();
    }
});

这里也没太多可说的，就是jQuery扩展的使用方法。现在我们获得服务器控件值，可简单的写成：

 

jQuery.clientID('txtControl');