After rendering partial view, HTML code is not removed

Question

I created a View to display some objects in a list and each row has a Delete option. There is also a button called New that creates a new object (here is an example - not one of the best examples).

                            New

239523   Element1_Title     Delete 
196344   Element2_Title     Delete

Because Delete and Create actions are on the same page, I am using Modal Popups for a prettier view.

On server side, both public ActionResult Create() and public ActionResult Delete() return a specific partial view with specific result, in my case return PartialView("_create", result) and return PartialView("_delete", result) .

In View page, I have the following lines of code used for placing each of the partial views that have been called by Ajax.ActionLink .

<!-- This code is from main view. --> 

<div class="modal fade" role="dialog" id="modalPopUp">
    <div class="modal-dialog" id="modalDialog">
    </div>
</div>

<!-- The `New` button has the following code. -->

@Ajax.ActionLink("New", "Create", new object(), 
        new AjaxOptions { UpdateTargetId = "modalDialog"}, 
        new {data_toggle = "modal", data_target = "#modalPopUp"})


<!-- The list with all elements and the `Delete` button. -->

@foreach (var element in Model.Elements)
{
    <tr>
       <td> @Html.DisplayFor(modelData => element.Number) </td>
       <td> @Html.DisplayFor(modelData => element.Title) </td>
       <td> @Ajax.ActionLink("Delete", "Delete", 
                new {number = element.Number}, 
                new AjaxOptions {UpdateTargetId = "modalDialog"}, 
                new {data_toggle = "modal", data_target = "#modalPopUp"})
       </td>
    </tr>
}

.

<!-- This code is from a partial view. --> 

@{
     Layout = null;
}

<div class="modal-content" id="modalContent">
    <!-- My popup window content. --> 
</div>

The problem is when I click the New button, a popup window shows, the code from _create.cshtml is rendered. Then if I leave the window and click the Delete button, the New window shows again, because the modal still has the code rendered from my first click.

If I refresh the page and click one Delete for an element and then I do not delete it, but I want to delete another one, it will delete the first element on which I clicked first.

It is weird the fact that I did the same thing 8 months ago and it worked very well. I still have a part of that code, but it does not work either.

So, all I am trying to do is to make that rendered partial view (the HTML code for PopUp) be removed after I close the PopUp window , not after refreshing the page, so I can bring another partial view with another content.

I have tried

$("#modalPopUp").on('hidden', function() {
    $("modalContent").remove();
}

and it removes the content when I close the PopUp, but when I click again, it does not appear at all, but I don't think this is the right solution.

What am I missing?

Thank you!

Answer 1

There is no problem with the code, as Stephen Muecke said.

I had to include jquery.unobtrusive-ajax.js , but there was no render for this script in my application page.

So the missing code lines

<!-- In BundleConfig.cs -->

bundles.Add(new ScriptBundle("~/bundles/unobtrusive").Include(
       "~/Scripts/jquery.unobtrusive-ajax.js");

<!-- In _Layout.cshtml -->

@Scripts.Render("~/bundles/unobtrusive")

The same way things are done for my application scripts that need to be included.

Thank you, Stephen!