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

您可以使用attribute ends with selector：

$("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编写了一个custom selector：

//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的用户。

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

6 个答案: