How to dynamically create checkboxes OR multi select on MVC 4

Question

In this project we have two list, one for the dealer and the second for his products.

So far if you check one dealer we get back all the product for this specific dealer, it implemented in javascript (Json).

Html (5 :)

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>DealerProduct</legend>

     <div class="editor-label">
        @Html.LabelFor(model => model.DealerID)
    </div>
    <div class="editor-field">
        @Html.DropDownList("DealerID", String.Empty)
        @Html.ValidationMessageFor(model => model.DealerID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ProductID)
    </div>
    <div class="editor-field">

        @Html.DropDownList("ProductID", String.Empty)
        @Html.ValidationMessageFor(model => model.ProductID)
    </div>
    <p>
        <input type="submit" value="@Shared.Add" />
    </p>
</fieldset>
}

JavaScript (Json :)

<script type="text/javascript">
$(document).ready(function() 
 {
  $("#DealerID").change(function ()
  {
       var self = $(this);
       var items="";
       var url = "";
       url = "@Url.Action("GetDealerProducts","DealerProduct")/"+self.val();
       $.ajaxSetup({ cache: false });
        $.getJSON(url,function(data)
        {   
          $.each(data,function(index,item)
          {
            items+="<option value='"+item.Value+"'>"+item.Text+"</option>\n";
          });
          $("#ProductID").html(items);
           $.ajaxSetup({ cache: true }); 
        });
    });       
 });
</script>

Controller :

public ActionResult GetDealerProducts(int id)
    {
        Dealer currentDealer = db.Dealers.Single(p => p.UserName == User.Identity.Name);
        Dealer subDealer = db.Dealers.Single(s => s.DealerID == id);


        List<Product> productOpenToSale = new List<Product>();

        foreach (var item in currentDealer.ProductToSale)
            if (!subDealer.ProductToSale.ToList().Exists(e => e.ProductID == item.ProductID))
                productOpenToSale.Add(item.Product);

        List<SelectListItem> productOpenToSaleList = new List<SelectListItem>();
        productOpenToSale.ForEach(item => productOpenToSaleList.Add(new SelectListItem { Value = item.ProductID.ToString(), Text = item.ProductName }));

        return Json(productOpenToSaleList, JsonRequestBehavior.AllowGet);
    }

What I really need is adding (a pairing of) products dealer, which he can sell in the future.

Current option is to add products one by one, the desire is to give the possibility of multiple selection of all products.

Maybe something like dynamic checkBoxList or an foreach on a List from the ViewModel who add input - checkbox like this, but I don't know how to fill it after the dealer has selected on the first list and receive all the selected product back on submit..

10X for any help!! (&& sorry for my bad English :)

score 1 · Accepted Answer · answered Nov 06 '12 at 10:26

1

you can change this line of code

@Html.DropDownList("ProductID", String.Empty)

with something like this

<select id="SelectedItemIds" multiple="multiple" name="SelectedItemIds">

and having a viewModel on the server like this

class MyViewModel
{
    public int[] SelectedItemIds { get; set; }
    public int DealerID {get;set;}
}

and having a controller like this

    [HttpPost]
    public ActionResult Index(MyViewModel myViewModel)
    {
        return View();
    }

answered Nov 06 '12 at 10:26

Amir Jalali

3,132
4
33
46

nice but.. =) i need to fill diffrent product on this SelectedItemIds after selecting a dealer from the DropDownList("DealerID" – oCcSking Nov 08 '12 at 09:27
using ajax just bring the value that key value pare that you want and append or insert it to the SelectedItemIds just like what you did above – Amir Jalali Nov 08 '12 at 13:42

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

I have similar situation and made it works here: enter link description here

but I don't know how to pass the actual text back. I can only pass the index of selected items back to the controller. If you figure it out let me know.

Make sure your select name matches your variable name in the model.

edited May 23 '17 at 12:14

Community

1
1

answered Jun 16 '15 at 20:52

MsBugKiller

813
1
7
12

How to dynamically create checkboxes OR multi select on MVC 4

2 Answers2