在MVC中通过Jquery从隐藏字段中获取多个值

Question

I am trying to use a hidden field control in my in a foreach loop where am binding multiple values in the hidden field value in this way

@foreach(var category in Model)
{
<input type="hidden" Id="hdnCategory" value="@category.Id"/>
}

Now using Jquery I am trying to retrieve the value. But the result is not as expected. It is actually retrieving the first value from the foreach

 function btnClick() {
     var categoryID = $("#hdnCategory").val();      
}

This function am calling in a button click in this way

<img class="imageclass"src="listofImages" onclick="imageClick()" />

Can someone please suggest me where I am going wrong..

Answer 1

You can try below

Also i think your function name is different

@foreach(var category in Model)
{
    <input type="hidden" Id="hdnCategory" class="csscategory" value="@category.Id"/>
}

<img class="imageclass" src="listofImages" onclick="imageClick()" />

 function imageClick() { $("input.csscategory").each(function() { var val = $(this).val(); }); }

Answer 2

所有这些隐藏字段都具有相同的id因此 jQuery（以及带有querySelector vanilla JavaScript）只返回第一个。

Answer 3

When referencing tag with ID only first one is fetched because ID is supposed to be unique.

For your code to work change ID attribute to class attribute then loop through elements and fetch value.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <img class="imageclass" src="listofImages" /> <input type="hidden" class="hdnCategory" value="@category.Id" /> <input type="hidden" class="hdnCategory" value="@category.Id2" />... <script> $(document).ready(function() { $('.imageclass').click(function() { $(".hdnCategory").each(function() { var val = $(this).val(); //do some thing with val alert(val); }); }); }); </script>