ASP.Net 中使用 JQuery 进行 DOM 导航

Question

我在下面编写了 JQuery，并且必须使用多次调用 .parent() 来搜索 DOM 中的项目，因为 ASP.Net 中呈现的 ClientID 是在 html 中动态构建的。 我知道每次更改标记代码时这都会导致问题，并且想看看是否有人知道在 ASP.Net 中执行此操作的更好方法。

<script language="jquery" src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript">
</script>
<script src="js/jquery.color.js" type="text/javascript">
</script>
script language="javascript" type="text/javascript">
    $(document).ready(function() {

    //Get the cost of the base item, then add the cost of the selected compoents as 
    //they get selected.    
    $(".AspNet-CheckBoxList > ul > li > input").click(function() {

        var itemCost = 0;

        $(this).find("fieldset:div:span");

        itemCost =  GetItemCost($(this).parent().parent().parent().parent()
        .parent().parent().parent().children().find("span").text());
        var Component = $(this).next("label").text();

        if ($(this).attr("checked") == true) {
            itemCost = (itemCost + GetItemCost(Component)).toFixed(2);               
        }
        else {
            itemCost = (itemCost - GetItemCost(Component)).toFixed(2);
        }

        $(this).parent().parent().parent().parent().parent()
        .parent().parent().children().find("span").text("$" + itemCost);
        $(this).parent().parent().parent().parent().parent()
        .parent().parent().children().find("span").animate( 
        { backgroundColor: "#FFFF66" }, 300)
         .animate({ backgroundColor: 'white' }, 750);
      });

   });

function GetItemCost(text) {
    var start = 0;
    start = text.lastIndexOf("$");

    var itemCost = text.substring(start + 1);       

    var pattern = /,/g;
    itemCost = itemCost.replace(pattern, "");       

    return Number(itemCost);
}
</script>

这是从渲染页面源复制的一些 html

<fieldset id="ctl00_ContentPlaceHolder1_ctl00_FieldSet" class="parent">
<legend>
</legend>
<a id="ctl00_ContentPlaceHolder1_ctl00_ImgLink" class="imgcontainer">
</a>
<div>
<input id="ctl00_ContentPlaceHolder1_ctl00_RemoveCartItem" type="image" 
    alt="Remove Item" src="img/buttons/remove_4c.gif" 
    name="ctl00$ContentPlaceHolder1$ctl00$RemoveCartItem"/>
<span id="ctl00_ContentPlaceHolder1_ctl00_TotalItemCost">$315.96</span>
</div>
<ol id="ctl00_ContentPlaceHolder1_ctl00_InputList">
<li class="pt">
<label id="ctl00_ContentPlaceHolder1_ctl00_ProjectLabel"   
for="ctl00_ContentPlaceHolder1_ctl00_ProjectValue">Project</label>
<input id="ctl00_ContentPlaceHolder1_ctl00_ProjectValue" type="text"  
name="ctl00$ContentPlaceHolder1$ctl00$ProjectValue"/>
</li>
<li class="pt">
<label id="ctl00_ContentPlaceHolder1_ctl00_TaskLabel"    
for="ctl00_ContentPlaceHolder1_ctl00_TaskValue">Task</label>
<input id="ctl00_ContentPlaceHolder1_ctl00_TaskValue" type="text"  
name="ctl00$ContentPlaceHolder1$ctl00$TaskValue"/>
</li>
<li id="ctl00_ContentPlaceHolder1_ctl00_ComponentsLI">
<span>Specify</span>
<fieldset id="ctl00_ContentPlaceHolder1_ctl00_ComponentsFieldSet"  
class="fieldsetlist">
<legend>Software Components</legend>
<div id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList" class="AspNet- 
CheckBoxList">
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0"  
type="checkbox" value="2305"     
name="ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$0"/>
<label for="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0">Another  
Cool Component $1,000.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1"  
type="checkbox" value="2306"   
name="ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$1"/>
<label for="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1">Software   
Assurance $274.89</label>
</li>
</ul>
</div>
</fieldset>
</li>
</ol>
</fieldset>

Answer 1

这可能对您有帮助： 要在 JavaScript 中获取 ASP .NET 控件的 ID，请在 JavaScript 代码中使用如下所示的服务器标记：

$("#<%=lblMyAspNetLabel.ClientID %>").text("test");

其中 lblMyAspNetLabel 是 aspx 页面上的 asp:Label 控件的 ID。

Answer 2

您可以使用 属性以选择器结尾：

$("tag[id$='ServerSideId']") 

其中 ServerSideId 是服务器端使用的 id 。

例如选择：

<li id="ctl00_ContentPlaceHolder1_ctl00_ComponentsLI">

使用：

$("li[id$='ComponentsLI']") 

Answer 3

我知道 ASP.NET 很难知道给定标记的 ID，但通常可以向任何给定控件添加 CSS 类。 也许您可以为您想要使用 jQuery 查找的控件使用一个唯一的类，然后使用 $(".yourCssClass") 来获取 DOM 节点。

Answer 4

我的建议是使用 css 类作为您希望 jQuery 选择的控件的标识符。 例如

<a id="ctl00_ContentPlaceHolder1_ctl00_ImgLink" class="imgcontainer">
</a>

将变成

<a id="ctl00_ContentPlaceHolder1_ctl00_ImgLink" class="imgcontainer ImgLink">
</a>

然后使用$(".ImgLink")来选择超链接

Answer 5

我为 ASP.Net UniqueID 的 jQuery 编写了一个自定义选择器：

//case-insensitive selector for ASP.Net ID's
//usage: $(':aspnetid(id)')

jQuery.extend(
    jQuery.expr[":"],
    {
        aspnetid: function(a, i, m) {
            return (new RegExp(m[3] + '
, 'i')).test(jQuery(a).attr('id'));
        }
    }
);

Answer 6

在 jQuery 中定位 .Net 元素是非常简单的方法

$("[id$='txb_myTextbox']")

，其中 txb_myTextbox 是用户为控件指定的 ID。