How can I load Partial view inside the view?

73

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 .

This question is tagged with asp.net-mvc asp.net-mvc-3 razor asp.net-mvc-partialview

~ Asked on 2011-09-03 20:56:24

The Best Answer is


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" />

~ Answered on 2011-09-03 21:13:49


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 on 2013-07-06 16:16:31


Most Viewed Questions: