Load ASP.NET MVC partial views on link click

March 15, 2015 by Anuraj

.Net ASP.Net MVC Javascript

Some one asked me how we can load partial views on link click. Here is the snippet for the same.

Long version - Using JQuery

<script type="text/javascript">
$("#loadPartialView").click(function () {
    $.get('@Url.Action("LoadPartialView","Home")', {}, function (response) {
        $("#Display").html(response);
    });
});
</script>

And here is the small version using Ajax.ActionLink

@Ajax.ActionLink("Load Partial View", "LoadPartialView", "Home",
    new AjaxOptions() { UpdateTargetId = "Display" })

In the page, you need to add a DIV with Id attribute which got a value “Display”, partial view will be loaded to this DIV.

And here is the controller action

public ActionResult LoadPartialView()
{
    return PartialView("_PartialView");
}

Happy Programming :)

Copyright © 2024 Anuraj. Blog content licensed under the Creative Commons CC BY 2.5 | Unless otherwise stated or granted, code samples licensed under the MIT license. This is a personal blog. The opinions expressed here represent my own and not those of my employer. Powered by Jekyll. Hosted with ❤ by GitHub