How can I load a partial view inside a view

Question

I am very confused with this partial view ...

I want to load a partial view inside my main view ...

here is a simple example ...

I am loading the Index.cshtml of the Homecontroller index action as the main page.

in index.cshtml I am creating a link through

@Html.ActionLink("load partial view","Load","Home") 

in HomeController I am adding a new action called

 public PartialViewResult Load() { return PartialView("_LoadView"); } 

in _LoadView.cshmtl I just have

 <div> Welcome !! </div> 

BUT, when starting the index.cshtml project, it first displays and shows me the "Load Partial View" link ... when I click on it, it goes to a new page to make a welcome message from _LoadView.cshtml to index.cshtml.

What could be wrong?

Note. I do not want to load the page via AJAX or I do not want to use Ajax.ActionLink

Answer 1

If you want to load a partial view directly in the main view, you can use the Html.Action :

 @Html.Action("Load", "Home") 

or if you do not want to pass the “Download” action, use the HtmlPartial hepler:

 @Html.Partial("_LoadView") 

If you want to use Ajax.ActionLink , replace Html.ActionLink with:

 @Ajax.ActionLink( "load partial view", "Load", "Home", new AjaxOptions { UpdateTargetId = "result" } ) 

and, of course, you need to enable the holder on your page, where the partial will be displayed:

 <div id="result"></div> 

Also remember to include:

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 

in the main window to enable Ajax.* . And make sure that unobtrusive javascript is included in your web.config (it should be the default):

 <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

Answer 2

I had the same problem as Lenal. I tried the fixes suggested here, and a dozen other places. What finally worked for me just added

 @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") 

into my layout ...

Answer 3

If you do this using @Html.ActionLink() , then loading the PartialView is processed as a normal request when you click on the binding element, i.e. loads a new page with the response of the PartialViewResult method.
If you want to load it right away, then you use @Html.RenderPartial("_LoadView") or @Html.RenderAction("Load") .
If you want to do this when interacting with the user (that is, by clicking the link), you need to use AJAX → @Ajax.ActionLink()

Answer 4

For me, this worked after I downloaded AJAX Unobtrusive via NuGet:

  Search and install via NuGet Packages: Microsoft.jQuery.Unobtrusive.Ajax 

How to add jquery and AJAX links to the view Unobtrusive:

 @Scripts.Render("~/bundles/jquery") <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script> 

Next, Ajax ActionLink and div were supposed to display the results:

 @Ajax.ActionLink( "Click Here to Load the Partial View", "ActionName", null, new AjaxOptions { UpdateTargetId = "toUpdate" } ) <div id="toUpdate"></div> 

Answer 5

Little tweek to above

 @Ajax.ActionLink( "Click Here to Load the Partial View", "ActionName", "ControlerName", null, new AjaxOptions { UpdateTargetId = "toUpdate" } ) <div id="toUpdate"></div> 

Answer 6

RenderParital is best used to increase productivity.

 {@Html.RenderPartial("_LoadView");} 

Answer 7

if you want to fill in the contents of a partial view inside your view, you can use

 @Html.Partial("PartialViewName") 

or

 {@Html.RenderPartial("PartialViewName");} 

if you want to make a server request and process the data, and then return the partial view to the main view filled with this data, you can use

 ... @Html.Action("Load", "Home") ... public PartialViewResult Load() { return PartialView("_LoadView"); } 

if you want the user to click on the link and then fill in the partial view data that you can use:

 @Ajax.ActionLink( "Click Here to Load the Partial View", "ActionName", "ControlerName", null, new AjaxOptions { UpdateTargetId = "toUpdate" } ) 

Answer 8

ONE THING TO REVEAL - AND I DID IT THIS ...

 jquery.validate.unobtrusive.js jquery.validate.unobtrusive.min.js 

DO NOT ONLY AS ...

 jquery.unobtrusive-ajax.js jquery.unobtrusive-ajax.min.js 

I read "unobtrusive" and suggested that I have the right library - I need AJAX!