CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4
rajcool111
rajcool111

Reputation: 667

MVC 4 load partial view dynamically on single page

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

Upvotes: 6

Views: 10607

Answers (2)

Mitul
Mitul

Reputation: 9854

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

Upvotes: 4

Ballbin
Ballbin

Reputation: 727

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.

Upvotes: -1

Related Questions