MVC 4 load partial view dynamically on single page

Question

I have a MVC 4 application which has a single home view. I have three link buttons and want to load three different forms dynamically based on the button click. I am using mvc partial views. So, if I click on button-1 it should load partialView-1 and should also send value-1 from the corresponding text box to partialView-1.

I am looking for mvc inbuilt approach rather than doing heavy javascript work.

home page to load partial views

well rather dynamically loading each n every-time i would personally prefer you to load every partial view at one Go i.e on page load and hide/show view's upon your button click . feasible approach . Had its advantages . Cheers — super cool
– super cool, Commented Jun 8, 2014 at 17:36

Mitul · Accepted Answer · 2014-06-09 21:03:24Z

You can do this like this.

A. Have different methods inside your controller returning PartialViewResult

[HttpGet]
    public PartialViewResult GetPartialView1(int value)
    {    
        return PartialView("_PartialView1"); //This view should exist in appropriate views folder.
    }

B. Your buttons on the left handside should be @Ajax.ActionLink

@Ajax.ActionLink(
    "Button1",
    "GetPartialView1",
    new { 
        value1 = 1},
    new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "righthandsidebox"
    }
    )

C. The UpdateTargetId = "righthandsidebox" that should be the id of the div on the right hand side. Contents of righthandsidebox will be replace by the PartialView

Ballbin · Accepted Answer · 2014-06-08 15:42:25Z

There is nothing built into MVC to do this as what you want to do happens on the front-end. If you want to be dynamic you have to use javascript.

If you want to avoid javascript then it can't be dynamic. You would wrap each button and value in a form and have it submit its value to the back-end and by what is passed you then you have your view render what partial you want. But this wouldn't be dynamic as want it to be.

I'm not sure what you consider as "heavy" when it comes to javscript? With jQuery what you want you do doesn't take much.

(lighter javascript work) You can either have your View place all of the partial views on the page with a class that sets them to display:none then just javascript to simple change out the class to view the partial you would like. But you have a lot of partials then you can do the following.

Or have the buttons make an `ajax call to the back-end fetching the partial that you need.

The bottom line is... if you want dynamic you need to use javascript.

i am looking to use @html.renderPartial("../partialview url") on button link event but need better way to use it.
Not sure what you mean... "Html.renderPartial" is used when building a view. A link event is on the front-end. Please post some code to clarify your question.

Collectives™ on Stack Overflow

MVC 4 load partial view dynamically on single page

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related