connectseekers.com

Monday, 14 July 2014

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

7/14/2014 - By Pranav Singh 2

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:



About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

2 comments:

  1. Sir Your All Tutorial is Nice....Thanks Sir Can You Upload CRUD Operation in MVC3 with Entity Framework

    ReplyDelete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top