How can I load Partial view inside the view?

Question

I am very confuse with this partial view.

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

Here is the simple example.

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

In index.cshtml, I am creating a link via

@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 am just having a

<div>
    Welcome !!
</div>

BUT, when run the project, index.cshtml renders first and shows me the link "Load Partial View". when I click on that it goes to new page instade of rendering the welcome message from _LoadView.cshtml into the index.cshtml.

What can be wrong?

Note: I don't want to load page through AJAX or don't want to use Ajax.ActionLink .

score 155 · Accepted Answer · edited May 13 '20 at 13:39

155

If you want to load the partial view directly inside the main view you could use the Html.Action helper:

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

or if you don't want to go through the Load action use the HtmlPartialAsync helper:

@await Html.PartialAsync("_LoadView")

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

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

and of course you need to include a holder in your page where the partial will be displayed:

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

Also don't forget to include:

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

in your main view in order to enable Ajax.* helpers. And make sure that unobtrusive javascript is enabled in your web.config (it should be by default):

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

edited May 13 '20 at 13:39

Ed Harrod

3,423
4
32
53

answered Sep 03 '11 at 21:13

Darin Dimitrov

1,023,142
271
3,287
2,928

works fine...so that means if i want to use it with @Html.ActionLink its goona act as a normal request and open up the parial view in new page? ... – patel.milanb Sep 03 '11 at 21:36
1

@patel.milanb, exactly. Html.ActionLink renders a normal anchor in html which simply performs a GET request to the given url and it redirects the browser to it. Because you have pointed it to the Load action which only returns a partial, the browser gets redirected and displays this partial. – Darin Dimitrov Sep 03 '11 at 21:38
Oh my! Thank you so much, for asking and answering this! I have been trying to get this to work for hours, never quite getting the syntax right. For the last hour or two (plus breaks), I was trying to get this version above from Darin to work, but I left out the "don't forget to include" line and couldn't believe that would make the difference between loading the whole page and loading into the div (I expected an error, not a display change), but it did. – Dronz Oct 26 '11 at 13:38
1

Hi, In my scenario, I want to switch between short view and extended view. I placed an `Ajax.ActionLink` in the short view and I set the `UpdateTargetId` to a parent div's id. Now when I click the link the ajax result replaces the entire page. – Shimmy Weitzhandler Jun 28 '13 at 02:31
helping you get to 500K – Sep 05 '13 at 00:17
1

Fantastic answer. Thank you @DarinDimitrov for such a perfect one. I was sure it was you before even I saw your name. :) – Mikayil Abdullayev Aug 26 '14 at 07:29
plus as suggested by @Scott below, need to import these two @Scripts.Render("~/bundles/jquery"), @Scripts.Render("~/bundles/jqueryval") to get Ajax.Action link rendering partial page on same page. – Niraj Jul 26 '15 at 13:07
The @Html.Partial-Method did it for me. – bTab Sep 27 '16 at 07:21
@DarinDimitrov You said If you want to load the partial view directly inside the main view you could use the Html.Action helper: `@Html.Action("Load", "Home")` This means I should create a method in my controller which is called "Load" and in that method I should write `return PartialView(...)` ? – Roxy'Pro Jul 04 '17 at 08:48

score 15 · Answer 2 · answered Jul 06 '13 at 16:16

15

I had exactly the same problem as Leniel. I tried fixes suggested here and a dozen other places. The thing that finally worked for me was simply adding

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

to my layout...

answered Jul 06 '13 at 16:16

Scott

2,456
3
32
54

I also spend hours to beat this problem. In my default mvc4 template for "basic mvc application" I have @Scripts.Render("~/bundles/jquery"), but not @Scripts.Render("~/bundles/jqueryval"). So I just add the second and partial views start to render on the same page instead of new one. Thank you. – user808128 Jun 29 '15 at 07:28
even for me it didn't work until I imported these two imports. – Niraj Jul 26 '15 at 13:07

score 5 · Answer 3 · answered Jan 05 '15 at 14:08

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

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

Than add in the view the references to jquery and AJAX Unobtrusive:

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

Next the Ajax ActionLink and the div were we want to render the results:

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

<div id="toUpdate"></div>

I had followed a tutorial on youtube to implement this and I hadn't installed the `Microsoft.jQuery.Unobtrusive.Ajax`. This is despite the fact that I had installed jquery.unobstrusive-ajax.min.js. Thanks you saved me a lot of headache. — Dev, Jul 11 '15 at 07:47

score 5 · Answer 4 · answered Mar 15 '17 at 04:21

if you want to populate contents of your partial view inside your view you can use

@Html.Partial("PartialViewName")

or

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

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

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

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

if you want user to click on the link and then populate the data of partial view you can use:

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

score 5 · Answer 5 · answered Sep 03 '11 at 21:17

5

If you do it with a @Html.ActionLink() then loading the PartialView is handled as a normal request when clicking a anchor-element, i.e. load new page with the reponse of the PartialViewResult method.
If you want to load it immedialty, then you use @Html.RenderPartial("_LoadView") or @Html.RenderAction("Load").
If you want to do it upon userinteraction (i.e. clicking a link) then you need to use AJAX --> @Ajax.ActionLink()

answered Sep 03 '11 at 21:17

Major Byte

4,101
3
26
33

the above solution works fine...so that means if i want to use it with @Html.ActionLink its goona act as a normal request and open up the parial view in new page? just want to clear my mind with the partial view... – patel.milanb Sep 03 '11 at 21:37

score 1 · Answer 6 · edited Feb 21 '15 at 19:15

1

Small tweek to the above

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

<div id="toUpdate"></div>

edited Feb 21 '15 at 19:15

AbcAeffchen

14,400
15
47
66

answered Feb 21 '15 at 18:41

3d cad consultant

11
1

score 1 · Answer 7 · answered Jul 01 '16 at 05:44

1

RenderParital is Better to use for performance.

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

answered Jul 01 '16 at 05:44

maxspan

13,326
15
75
104

How can I load Partial view inside the view?

7 Answers7

Linked

Related