2

I've written the JQuery below, and have had to search for items in the DOM using multiple calls to .parent() because the ClientIDs rendered in ASP.Net are built up dynamically in the html. I'm aware that this will cause problems each time we change the markup code, and would like to see if anyone knows of a better way to do this in 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>

Here is some of the html copied from the source of the rendered page

<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>
4

6 回答 6

5

This might help you: To get the ID of an ASP .NET control in JavaScript, use sever tags like this right in your JavaScript code:

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

Where lblMyAspNetLabel is the ID of an asp:Label control on your aspx page.

于 2009-04-14T20:02:08.990 回答
0

You can use the attribute ends with selector:

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

Where ServerSideId is the id used on server side.

For example to select:

<li id="ctl00_ContentPlaceHolder1_ctl00_ComponentsLI">

Use:

$("li[id$='ComponentsLI']")
于 2009-04-14T20:04:08.113 回答
0

I know that ASP.NET makes it difficult to know what the ID of a given tag will be, but it usually is possible to add a CSS class to any given control. Perhaps you could use a unique class for the controls you want to find with jQuery and then use $(".yourCssClass") to get the DOM nodes.

于 2009-04-14T20:04:20.717 回答
0

My sugguestion is to use css class as identifier for the controls you want jQuery to select. e.g. 

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

will become

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

Then use $(".ImgLink") to select the hyperlink

于 2009-04-14T20:06:10.277 回答
0

I wrote a custom selector for jQuery for ASP.Net UniqueID's:

//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'));
        }
    }
);
于 2009-04-14T21:13:33.187 回答
0

Really easy way to target a .Net element in jQuery 

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

where txb_myTextbox is the user given Id for a control.

于 2012-05-23T15:42:38.900 回答