Reloading partial views and Ajax - ASP.NET MVC

Question

I have an interesting problem while reloading partial views with ajax. I have a following setup in the master View:

<div>
    <div id="items">
        @Html.Partial("SubView", Model.Items);
    </div>
<div>

SubView is generally a list of items in a table as follows:

<table class="table table-striped">
    <tr>
        <th>Date</th>
        <th>Time</th>
        <th></th>
</tr>
@foreach (var item in Model)
{
    <tr>
        @Html.HiddenFor(modelItem => item.Id)
        <td>@Html.DisplayFor(modelItem => item.Date)</td>
        <td>@Html.DisplayFor(modelItem => item.Time)</td>
        <td>
           @Html.ActionLink("Delete", "Delete", new { itemId= item.Id, page = Model.PageNumber }, new { @class = "deleteItem" })
    </td>
</tr>
}

DeleteItem Action in the controller does basically the following:

    [HttpDelete]
    public ActionResult DeleteItem(int itemId, int page)
    {
        this.dbService.DeletItem(expenseId);
        return PartialView("SubView", this.GetPagedList(page));
    }

In the script that I refer in the master View I have the following code:

$(document).ready(function () {
// delete expense
$(".deleteItem").click(function () {

    $.ajax({
        url: this.href,
        type: 'delete',
        success: function (result) {
            $("#items").html(result);
        }
    });

    return false;
});

This works fine the first time, but the second time it only loads the partial View -> since the JavaScript code is not being executed...

I am relatively new to that stuff and I am a bit confused what's going on here. All 3rd party scripts are rendered in the Layout.cshtml

Please post you DeleteItem complete code as well

Umair Farooq
– Umair Farooq

2016-08-22 17:11:06 +00:00
Commented Aug 22, 2016 at 17:11 — Umair Farooq
– Umair Farooq, Commented Aug 22, 2016 at 17:11
added, as I said it is very simple

Myar
– Myar

2016-08-22 17:19:17 +00:00
Commented Aug 22, 2016 at 17:19 — Myar
– Myar, Commented Aug 22, 2016 at 17:19

Dan S. · Accepted Answer · 2016-08-22 17:21:06Z

1

You can't attach a .click() event to a dynamically generated item. You have to structure it this way:

$(document).on('click', '.deleteItem', function() {
    // Deletey stuff here.
});

answered Aug 22, 2016 at 17:21

Dan S.

1832 silver badges15 bronze badges

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

2 Comments

Myar Over a year ago

Thanks, that's the missing piece. The same code as I posted worked in a previous project, but there I have the script directly in my master view - that's probably why it worked.

Dan S. Over a year ago

It's because dynamically created items aren't part of the DOM when the document is first loaded, which is when the binding occurs. The above code attaches the .click() event to the document instead.

Umair Farooq · Accepted Answer · 2016-08-22 17:23:45Z

0

For partial views to render, you have to make the return type PartialViewResult rather than ActionResult. Because ActionResult causes a redirection.

Try editing your DeleteItem function like this.

[HttpDelete]
    public PartialViewResult DeleteItem(int itemId, int page)
    {
        this.dbService.DeletItem(expenseId);
        return PartialView("SubView", this.GetPagedList(page));
    }

answered Aug 22, 2016 at 17:23

Umair Farooq

1,7022 gold badges14 silver badges25 bronze badges

1 Comment

Myar Over a year ago

That changed nothing at all unfortunately

Collectives™ on Stack Overflow

Reloading partial views and Ajax - ASP.NET MVC

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related