How to pass value from table to ajax function in Asp.net

Question

I'm listing all users identity names in my Asp.net MVC

<table class="table table-condensed">
<thead>
    <tr>
        <th>User Name</th>
        <th>Details</th>
    </tr>
</thead>
<tbody>
    @if (Model != null)
        {
            foreach (var item in Model)
            {
            <tr>
                <td>@item.UserName</td>
                <td>   <input type="button" id="show" class="show"  value="Show Roles" /></td>
            </tr>
        }
    }
</tbody>

I want to show user details using ajax when button show been clicked

For this I added div to display data in the same view;

<div id="target">Trigger</div>

and ajax get the details from the action control

<script type="text/javascript">
$(document).ready(function () {
    $('.show').click(function () {

        $.ajax({
            type: 'GET',
            data: { UserName:'xxxxxxx'},
            url: '@Url.Action("DisplyRoles","Admin")',
            success: function (result) {
                $("#target").html(result);

            },
            error: function (error) {
                alert("Error");

            }
        });

    });
  });

My question: What to put instead of xxxxxx as I want to pass current user name which is in the same row of show button?

user3559349 · Accepted Answer · 2017-08-25 22:07:40Z

2

Add a data- attribute in the <button>. Note also that you should remove the id attribute (duplicate id attributes are invalid html)

<input type="button" data-username="@item.UserName" class="show"  value="Show Roles" />

and then access it in the script

$('.show').click(function () {
    var name = $(this).data('username');
    $.ajax({
        type: 'GET',
        data: { UserName: name },
        url: '@Url.Action("DisplyRoles","Admin")',
        success: function (result) {

You could also access it by reading the value from the previous <td> element

var name = $(this).closest('tr').find('td').eq(0).text();

answered Aug 25, 2017 at 22:07

user3559349

Sign up to request clarification or add additional context in comments.

4 Comments

khorshid Over a year ago

Yes exactly, it's work perfect. I prefer data- attribute . it's very logically. Thanks a lot!

khorshid Over a year ago

It's possible to use data-userID or data-anyName rather than data-username ?

user3559349 Over a year ago

Yes, you can use whatever you want

user3559349 Over a year ago

But note it should always be lower case (as defined by the standards)

Collectives™ on Stack Overflow

How to pass value from table to ajax function in Asp.net

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related