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  quot load partial view quot   quot Load quot   quot Home quot    in HomeController I am adding a new Action called public PartialViewResult Load         return PartialView  quot  LoadView quot       in  LoadView cshmtl I am just having a  lt div gt      Welcome     lt  div gt   BUT  when run the project  index cshtml renders first and shows me the link  quot Load Partial View quot   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

User · Answer

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>

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt div id  result  gt  lt  div gt    Also don t forget to include    lt script src   Url Content    Scripts jquery unobtrusive-ajax js    type  text javascript  gt  lt  script gt    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     lt add key  UnobtrusiveJavaScriptEnabled  value  true    gt

User · Answer

RenderParital is Better to use for performance     Html RenderPartial   LoadView

User · Answer

Small tweek to the above   Ajax ActionLink       Click Here to Load the Partial View         ActionName         ControlerName       null       new AjaxOptions   UpdateTargetId    toUpdate        lt div id  toUpdate  gt  lt  div gt

[asp.net-mvc] How can I load Partial view inside the view?

Examples related to asp.net-mvc

Examples related to asp.net-mvc-3

Examples related to razor

Examples related to asp.net-mvc-partialview