How to bind dropdownlist in partial view in mvc 4 using model?

12,009

You should use a view model, so you can contain both the list and the selected property in it, something like:

public class DashboardViewModel
{
    public IEnumerable<SelectListItem> Data { get; set; }
    //Might not be an int, but just an example
    public int SelectedId { get; set; }
}

Then populate it in your controller:

public ActionResult _ReportingMenu()
{
    var DashboardList = GetAllDashboards();

    var dropdownData = DashboardList
        .Select(d => new SelectListItem
        {
            Text = d.Name, //Need to apply the correct text field here
            Value = d.Id.ToString() //Need to apply the correct value field here
        })
        .ToList();

    var model = new DashboardViewModel
    {
       Data = dropdownData 
    };

    return View(model);
}

Then in your both your views, set the model:

 @model DashboardViewModel

Then in your partial you can do:

 @Html.DropDownListFor(m => m.SelectedId, Model.Data)
Share:
12,009
Karan Patel
Author by

Karan Patel

I live as a software engineer😎 Angular😍 is my hobby. You can reach out to me by linked profile. LinkedIn: https://www.linkedin.com/in/karan-patel-96b02b50

Updated on June 07, 2022

Comments

  • Karan Patel
    Karan Patel almost 2 years

    Hi i am using partial view in index.cshtml page. and partial view contains one dropdownlist which is bind dynamically from database.

    I don't want to use viewbag or viewdata for binding this dropdownlist.

    In Controller

        // GET: Reporting/Home
        public ActionResult Index()
        {
            var view = View();
    
            return view;
        }
    
        public ActionResult _ReportingMenu()
        {
            var DashboardList = GetAllDashboards();
    
            return View(DashboardList);
        }
    
    
        public IEnumerable<DashboardDefinition> GetAllDashboards()
        {
            return _reortDefinitionService.GetAllDashboards();
        } 
    

    In index.cshtml

    @model IEnumerable<Portal.Domain.ReportingModule.ReportDefinition.DashboardDefinition>
    
    @{
        ViewBag.Title = "Reporting";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h2>Reporting View</h2>
    @Html.ActionLink("Add new Chart", "Create", "Chart", new { area = "Reporting" }, null)
    
    @Html.Partial("_ReportingMenu")
    

    In Partialview

        @model  Portal.Domain.ReportingModule.ReportDefinition.DashboardDefinition
    
        <div class="nav navbar navbar-default navbar-no-margin submenu">
    
            @Html.DropDownList("Mobiledropdown1",IEnumerable<Model.DashboardName>)   
    
            <a id="SubMenuIntegratorNew" class="btn btn-default submenu-item" href="#">
                <i class="fa fa-file-o fa-lg"></i>
                <span class="submenu-item-text">New</span>
            </a>
            <a id="SubMenuIntegratorSave" class="btn btn-default submenu-item" href="#">
                <i class="fa fa-floppy-o fa-lg"></i>
                <span class="submenu-item-text">Save</span>
            </a>
            <a id="SubMenuIntegratorSaveAs" class="btn btn-default submenu-item" href="#">
                <i class="fa fa-files-o  fa-lg"></i>
                <span class="submenu-item-text">Save As</span>
            </a>
            <a id="SubMenuIntegratorAddChart" class="btn btn-default submenu-item" href="#">
                <i class="fa fa-picture-o fa-lg"></i>
                <span class="submenu-item-text">Add Chart</span>
            </a>
        </div>
    

    but i get an error of null model.

    I don't know how to implement in partial view