Update Partial View Without Reloading the Entire Page - ASP.net MVC 5

 Are you tired of Partial Views causing your whole page to reload? Well... frankly so was I until I found this cool solution:

1) Install NuGet: Microsoft.jQuery.Unobtrusive.Ajax

2) To the main View, add these scripts:

    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

3) In the partial view, wrap the whole thing in a div with ID, and replace Html.BeginForm with Ajax.BeginForm:

<div id="UpdateUserId">
    @using (Ajax.BeginForm("UpdateUser", "Account", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.ReplaceWith,
        UpdateTargetId = "UpdateUserId"
    }))

- Notice how the div id and UpdateTargetId are the same string.



And that should be working correctly.



It was this video that showed me the way:
https://youtu.be/ZRt1qtt8ps0?t=1444
Cheers shad sluiter

Comments