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

Question

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

The second parameter of DropDownListFor() is IEnumerable<SelectListItem> (either that or you need a ViewBag property named Mobiledropdown1 which is IEnumerable<SelectListItem>) What is your model (do you really have a property named Mobiledropdown1) And why are your not using the strongly typed helper? And show the full details of the exception. — user3559349
– user3559349, Commented Apr 23, 2015 at 7:35
There is @Html.Partial(string viewName, object model) so you can pass model to strongly typed partial view. — Jacob Sobus
– Jacob Sobus, Commented Apr 23, 2015 at 9:06

Mathew Thompson · Accepted Answer · 2015-04-23 07:48:36Z

4

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)

edited Apr 23, 2015 at 7:48

answered Apr 23, 2015 at 7:39

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3559349 Over a year ago

Property Data would need to be IEnumerable<SelectListItem> or SelectList, or the helper would need to be @Html.DropDownListFor(m => m.SelectedId, new SelectList(Model.Data, "valueField", "textField"))

Mathew Thompson Over a year ago

@StephenMuecke Good shout I neglected that, updated to reflect.

Karan Patel Over a year ago

i have done using @Html.DropDownListFor(m => m.SelectedId, new SelectList(Model.Data, "valueField", "textField")) Thank you for your reply.

Mathew Thompson Over a year ago

@KaranPatel Yeah that's fine also.

Fateme Yaghooblou · Accepted Answer · 2023-02-19 08:44:48Z

0

defining Model:

public class DashboardViewModel
{
public IEnumerable<SelectListItem> Data { get; set; }
public int SelectedId { get; set; }
}

in your view set:

@Html.Partial("YourActionName", (SelectList)ViewBag.yourViewBagName)

in your top of partialview, set the model:

@model DashboardViewModel

in your Partialview set:

@Html.DropDownList("Id", new SelectList(Model.Items, "Id", "Name"), new {@class = "form-control", })

edited Feb 19, 2023 at 8:44

answered Feb 19, 2023 at 8:43

Fateme Yaghooblou

11 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related