Raphael Lima Raphael Lima - 1 month ago 16
jQuery Question

Jquery not working with razor to update data inside a table

I'm having a problem while trying to mix bootstrap/razor/jquery to CRUD a simple system users page.

I'm display the data using razor:



<div class="page-header">
<h2>Account Management</h2>
</div>

<div class="modal" id="modal">

</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table id="t_users" class="table table-striped" data-toggle="table"
data-height="460"
data-pagination="true"
data-search="true">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.username)
</th>
<th>
@Html.DisplayNameFor(model => model.email)
</th>
<th>
@Html.DisplayNameFor(model => model.emailConfirmed)
</th>
<th>
@Html.DisplayNameFor(model => model.roles)
</th>
<th>
Ações
</th>
</tr>
</thead>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.username)
</td>
<td>
@Html.DisplayFor(modelItem => item.email)
</td>
<td>
@Html.DisplayFor(modelItem => item.emailConfirmed)
</td>
<td>
@Html.DisplayFor(modelItem => item.roles)
</td>
<td>
<button class="edit btn btn-info btn-xs" data-id="@item.id" id="btEdit">Editar</button>
<button class="remove btn btn-danger btn-xs" data-id="@item.id" id="btRemove">Remover</button>
</td>
</tr>
}
</table>
</div>
<button id="teste">bugabuga</button>
</div>


My idea is to link the "click' action of the update button to send to my controller the row data-id which is the user's id then open a modal with a form (PartialView) so the user can update the data.

Here's the javascript, please note that I did a test to just display an alert window.

@section scripts{
<script type="text/javascript">

$(document).ready(function () {

});

$("#btEdit").click(function () {
alert("dig");

});

$(".edit").click(function () {
var id = $(this).attr("data-id");
$("#modal").load("AccountManager/Update?id=" + id, function () {
$("#modal").modal();
})
});
</script>
}


the call to open the modal is not working. When I click it nothing happens.

$("#modal").load("AccountManager/Update?id=" + id, function () {
$("#modal").modal();
})

Answer

Your code looks fine. It should work as long as you do not have any js errors and you have the needed library js files loaded. But you can still make few improvements.

Do not hardcode the Id values in the loop. It will generate more than one element with same id value. Id values should be unique.

Also instead of building the url to the action method in javascript, you might consider using the Html helper methods to generate the correct relative path to the action method.

<button class="edit btn btn-info btn-xs" 
       data-url="@Url.Action("Update","AccountManager",new { id=item.id})" >Edit</button>

Now on the click event, read the data-url value and use that for the ajax call.

$(function(){

    $(".edit").click(function () {
        var ajaxUrl= $(this).data("url");
        $("#modal").load(ajaxUrl, function () {
            $("#modal").modal();
        })
    });

});