Binding ListBox with a model in MVC3

Question

My model is

public class SiteConfig
{
    public SiteConfig()
    {

    }

    public int IdSiteConfig { get; set; }
    public string Name { get; set; }
    public byte[] SiteLogo { get; set; }
    public string Brands { get; set; }
    public string LinkColour { get; set; }

    public IEnumerable<SiteBrand> SiteBrands { get; set; }
}

and

public class SiteBrand
{
    public int Id { get; set; }
    public int SiteId { get; set; }
    public int BrandId { get; set; }

    public Brand Brand { get; set; }
    public SiteConfig SiteConfig { get; set; }
}

public class Brand
{
    public int BrandId { get; set; }
    public string Name { get; set; }

    public IEnumerable<SiteBrand> SiteBrands { get; set; }
}

I am following Data Base first approach. Each SiteConfig record can contain one or more Brand. So Brand is saving to another table called SiteBrand.

SiteBrand contains the forign key reference to both SiteConfig(on IdSiteConfig) and Brand(BrandId).

When I am creating a SiteConfig I want to display all the available Brand as list box where user can select one or many record(may not select any brand).

But when I bind my view with the model how can I bind my list box to the list of brands and when view is posted how can I get the selected brands.

And I have to save the SiteConfig object to database with the selected Items. And this is my DB diagram.

This is my DAL which saves to db.

public SiteConfig Add(SiteConfig item)
    {
        var siteConfig = new Entities.SiteConfig
            {
                Name = item.Name,
                LinkColour = item.LinkColour,
                SiteBrands = (from config in item.SiteBrands
                              select new SiteBrand {BrandId = config.BrandId, SiteId = config.SiteId}).
                    ToList()
            };
        _dbContext.SiteConfigs.Add(siteConfig);
        _dbContext.SaveChanges();
        return item;
    }

Can somebody advide how to bind the list box and get the selected items.

Thanks.

Solution

Add a new Property to your SiteConfig ViewModel of type string array. We will use this to get the Selected item from the Listbox when user posts this form.

public class SiteConfig
{
  //Other properties here
  public string[] SelectedBrands { get; set; }  // new proeprty
  public IEnumerable<SiteBrand> SiteBrands { get; set; }
}

In your GET action method, Get a list of SiteBrands and assign to the SiteBrands property of the SiteConfig ViewModel object

public ActionResult CreateSiteConfig()
{
    var vm = new SiteConfig();
    vm.SiteBrands = GetSiteBrands();
    return View(vm);
}

For demo purposes, I just hard coded the method. When you implement this, you may get the Data From your Data Access layer.

public IList<SiteBrand> GetSiteBrands()
{
    List<SiteBrand> brands = new List<SiteBrand>();
    brands.Add(new SiteBrand { Brand = new Brand { BrandId = 3, Name = "Nike" } });
    brands.Add(new SiteBrand { Brand = new Brand { BrandId = 4, Name = "Reebok" } });
    brands.Add(new SiteBrand { Brand = new Brand { BrandId = 5, Name = "Addidas" } });
    brands.Add(new SiteBrand { Brand = new Brand { BrandId = 6, Name = "LG" } });
    return brands;
}

Now in your View, which is strongly typed to SiteConfig ViewModel,

@model SiteConfig
<h2>Create Site Config</h2>
@using (Html.BeginForm())
{
  @Html.ListBoxFor(s => s.SelectedBrands, 
                new SelectList(Model.SiteBrands, "Brand.BrandId", "Brand.Name"))
  <input type="submit" value="Create" />
}

Now when user posts this form, you will get the Selected Items value in the SelectedBrands property of the ViewModel

[HttpPost]
public ActionResult CreateSiteConfig(SiteConfig model)
{
    if (ModelState.IsValid)
    {
        string[] items = model.SelectedBrands;
        //check items now
        //do your further things and follow PRG pattern as needed
    }
    model.SiteBrands = GetBrands();
    return View(model);
}

Comments

[Naresh]

Thanks for the reply. When I submit my form in the model I am getting the selected ids. But I am getting SiteBrands as null. If I have to save my model, here do I need to create SiteBrands collection with the selected items and submit? Or is there any other better way of doing it?

[Dushan Perera]

Why do you need the SiteBrands collection when creating a Siteconfig ? I guess you need the Selected Items from the ListBox (that is what you asked in the initial question). But if you are rendering the same view again, then you need to ReAssign the SiteBrands again before returning your viewmodel back to the View, because HTTP is stateless

[Naresh]

Because my Create method takes an object of type SiteConfig. And my db knows only about SiteBrands. Id doesn't know any thing about Selected ids. As I explained in my question SiteBrand contains foreign key references to site id as well as Brand id.

[Dushan Perera]

You need to read the Selected items ( which has the IDS) and pass it to your Data Access Layer which saves this data in your back end). Since i do not know about your data access layer, i can not tell you exactly what to do

[Naresh]

Just now I posted my DB diagram and Create method. Could you please suggest me better way of doing this. Thanks.

[Beytan Kurt]

Btw, in GET method, better to read already selected brandIds and set them to SelectedBrands