如何在MVC 4上动态创建复选框或多选

时间:2012-11-06 09:48:42

标签: javascript json html5 c#-4.0 asp.net-mvc-4

在这个项目中,我们有两个清单,一个是经销商,另一个是他的产品。

到目前为止,如果你检查一个经销商我们会收到这个特定经销商的所有产品,它是用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>

控制器:

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);
    }

我真正需要的是添加(配对)产品经销商,他将来可以销售。

目前的选择是逐个添加产品,希望能够多次选择所有产品。

也许类似动态checkBoxList或来自ViewModel的列表中的foreach添加输入 - 复选框like this,但我不知道如何在经销商在第一个列表中选择并且全部收到后填写它所选产品返回提交..

10X任何帮助!! (&amp;对不起我的英语不好:)

2 个答案:

答案 0 :(得分:1)

您可以更改此行代码

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

有这样的东西

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

在服务器上有一个viewModel,就像这样

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

并拥有这样的控制器

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

答案 1 :(得分:0)

我有类似的情况,并在这里工作: enter link description here

但我不知道如何传回实际文本。我只能将所选项目的索引传递回控制器。如果你弄清楚,请告诉我。

确保您的选择名称与模型中的变量名称匹配。