Load Partial View By Selecting Value in Dropdown Using C# in Asp.net MVC

This article will show you how you can use partial view in you asp.net mvc application to display the view on conditional bases. In this I have used dropdown list to pass the value, so that program can take decision to which partial view need to load. This article you can use in your MVC3, MVC4, and MVC5 application.

So for this article first we will create a new asp.net mvc application and add a model class file.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace PartialViewInMvc.Models {     public class ParticlaViewmodel     {         public string PartialView1Message { get; set; }         public string PartialView2Message { get; set; }         public int SelectedParameter { get; set; }     } }

Now we will create a new controller file and add create view file. After creating view file we will create two partial view. For creating partial view we will add we will right click on controller folder and right click- > Add View. Please check the below screen shot.

Note: You must check the above shown checkbox as shown above.

Now we will create post method. After doing all the process your code will look as shown below.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using PartialViewInMvc.Models; namespace PartialViewInMvc.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             ParticlaViewmodel objparticlaviewmodel = new ParticlaViewmodel();             return View(objparticlaviewmodel);         }         [HttpPost]         public ActionResult Index(int SearchValue)         {             ParticlaViewmodel objparticlaviewmodel = new ParticlaViewmodel();             objparticlaviewmodel.SelectedParameter = SearchValue;             if (SearchValue == 1)             {                 objparticlaviewmodel.PartialView1Message = "This is partial view 1";             }             else             {                 objparticlaviewmodel.PartialView2Message = "This is partial view 2";             }             return View(objparticlaviewmodel);         }     } }

Now open your partial view and add the below code.

Partial View 1:

@model  PartialViewInMvc.Models.ParticlaViewmodel @{          <div>         <h2>@Model.PartialView1Message</h2>     </div> }

Partial View 2:

@model  PartialViewInMvc.Models.ParticlaViewmodel @{          <div>         <h2>@Model.PartialView2Message</h2>     </div> }

Now add the below code in your main view where your want to display the partialview on the bases of condition.

@model  PartialViewInMvc.Models.ParticlaViewmodel @{     ViewBag.Title = "Index"; } @using (Html.BeginForm("Index", "Home")) {     <select id="ddlparameter" name="SearchValue">         <option value="0">Select</option>         <option value="1">Partial View 1</option>         <option value="2">Partial View 2</option>     </select>     <input type="submit" value="Load View" />         if (Model.SelectedParameter == 1)     {         <div style="border: 1px solid;">             @Html.Partial("PartialView1", new PartialViewInMvc.Models.ParticlaViewmodel { PartialView1Message = Model.PartialView1Message })         </div>     }     else if (Model.SelectedParameter == 2)     {         <div style="border: 1px solid;">             @Html.Partial("PartialView2", new PartialViewInMvc.Models.ParticlaViewmodel { PartialView2Message = Model.PartialView2Message })         </div>     }     }

Now run the application, and select the parameter and click on submit.

OUTPUT 1:

OUTPUT 2:

DOWNLOAD