take an id of a forEach method and pass it to asp-route-id

zahra rfe 0
Viewed 51

This is my View :

<a  class="mybut btn btn-info" id="check" asp-page-handler="Delete" asp-route-id=""  onclick="takeId()"> Delete Person</a>
 <table id="datatable" class="table">
            <thead>
            <tr>
                <th>select</th>
                <th>id</th>
                <th>name</th>
            </tr>
            </thead>
            <tbody>
                @foreach (var item in @Model.MyViewModels)
                {
                    <tr>
                        <td><input type="checkbox"  id="box"  value="@item.Id"  /></td>
                        <td>@item.Id</td>
                        <td>@item.FullName</td>
                    </tr>
                }
            </tbody>
        </table>

and this is my Index Model:

       public void OnGetDelete(long id)
        {
            _customerApplication.Delete(id);
           
        }

and my js codes:

function takeId() {

    var id = $("#box").attr('value');

    $("#check").attr('asp-route-id',id);
}

when i click on each item, i need to take the item's Id, and pass it to asp-route-id in "a" tag ,it seems that there are some wrongs in my codes, because when i select each item and click on "a" tag, The id returns the value 0

razor-pages asp.net-core javascript
2 Answers

The asp-route-id attribute is parsed by the anchor tag helper. Tag helpers are executed server-side to create html output that is sent to the browser. The asp- attributes are not included in the output because they have no meaning for the browser.

For example if you have this in your .cshtml file:

<a asp-page-handler="Delete" asp-route-id="1">Delete Person</a>

The anchor tag helper will parse the asp- attributes and generate the following html output:

<a href="/?handler=Delete&id=1">Delete Person</a>

The generated element is added to the html response that is sent to the browser. Now that the element is rendered in the browser (client-side), adding the asp- attribute with JavaScript will not have any effect.

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-6.0

Here's what you could try:

function takeId() {

    var id = $('#box').attr('value');

    var href = $('#check').attr('href') + '&id=' + id;

    $("#check").attr('href', href);
}
Dimitris Maragkos0

here is a demo to allow only one checkbox checked,and when one checkbox is checked,the id of anchor tag will be changed:

<a  class="mybut btn btn-info" id="check" asp-page-handler="Delete" asp-route-id="0"> Delete Person</a>
 <table id="datatable" class="table">
            <thead>
            <tr>
                <th>select</th>
                <th>id</th>
                <th>name</th>
            </tr>
            </thead>
            <tbody>
               @foreach (var item in @Model.MyViewModels)
                {
                    <tr>
                        <td><input type="checkbox"  name="box"  value="@item.Id"  /></td>
                        <td>@item.Id</td>
                        <td>@item.FullName</td>
                    </tr>
                }
            </tbody>
        </table>

js:

$('input[name=box]').change(function(){
            $('input:checkbox').not(this).prop('checked', false);
            var id=$('input[name=box]:checked').val();
            var id1 = id == undefined ? 0 : id;
            var href = $("#check").attr('href').split("?");
            var href1 = href[0] + "?id=" + id1 + "&" + href[1].split("&")[1];
            $("#check").attr('href',href1);
        })

result: enter image description here

Yiyi You0
Related