何显示基于从下拉菜单中用户选择多个复选框的选择？ [英] Ho to display multiple checkbox selection based on user's selection from dropdown?

问题描述

我要显示在从那里用户可以选择类别我MVC3剃刀应用dropdownbox并根据他的选择我想显示小类这是复选框，以便用户可以选择多个子类别。

谁能帮我如何得到这个？

下面是我的JSON，我从Web服务接收和反序列化我的对象，所以我怎么可能对象分配给两个不同的类别列表（下拉列表）和子类别（检查盒）？

JSON：

  {
 code：0，
 状态：完成，
 类别：
 {
  ID：1，
  名称：吃，
    子类别：
        {标志：假的，ID：100，名称：民以食为天}，
        {标志：假的，ID：101，姓名：快餐}，
        {标志：假的，ID：102，姓名：其他}
    ]
        }，
    {
    ID：2，
    名称：娱乐，
     子类别：
        {标志：假的，ID：100，名：全部}，
        {标志：假的，ID：101，姓名：电影}，
        {标志：假的，ID：102，姓名：其他}
    ]
  }，
  }
  ]
  }
 

实体：

 公共类迈德特
{
  公众诠释code {搞定;组; }
  公共字符串状态{搞定;组; }
  公开名单＆LT;类别及GT;分类{搞定;组; }
}公共类目录
{
  公共字符串名称{;组; }
  公众诠释ID {搞定;组; }
  公开名单＆LT;＆类别GT;小类{搞定;组; }
}公共类子目录
{
  公共字符串名称{;组; }
  公众诠释ID {搞定;组; }
  公共BOOL标志{搞定;组; }
}
 

解决方案

您可以使用AJAX。订阅DropDownList的变化事件，并触发一个AJAX请求沿选定的类别传递一个控制器动作。该操作将在数据库中查询对应的子类别和与对应将被注入到DOM复选框返回的局部视图。

因此​​，让我们假设你已经在你的视图的类别一个DropDownList：

  @ Html.DropDownListFor（
    X =＆GT; x.CategoryId，
    Model.Categories，
    新{
        ID =类别，
        data_subcategoriesurl = Url.Action（子类别，somecontroller）
    }
）
 

和一些股利将某处包含在网页的子类别：

 ＆LT; D​​IV ID =子类别＆GT;
    @ Html.EditorFor（X =＆GT; x.SubCategories，子）
＆LT; / DIV＆GT;
 

，你可以再有一个 SubCategories.cshtml 部分，将呈现复选框的列表：

  @model的IList＆LT; CategoryViewModel＆GT;
@ {
    //我们改变了HTML场preFIX使输入元素
    //如复选框有正确的名称，以便能
    //张贴回值
    ViewData.TemplateInfo.HtmlField preFIX =子类别;
}
@for（VAR I = 0; I＆LT; Model.Count;我++）
{
    ＆LT; D​​IV＆GT;
        @ Html.LabelFor（X =＆GT; X [I] .IsSelected，Model.CategoryName）
        @ Html.CheckBoxFor（X =＆GT; X [I] .IsSelected）
    ＆LT; / DIV＆GT;
}
 

现在，你可以订阅下拉的变化事件在一个单独的JavaScript文件：

  $（函数（）{
    $（'＃类'）。改变（函数（）{
        VAR subcategoriesUrl = $（本）。数据（subcategoriesurl'）;
        VAR selectedCategoryId = $（本）.VAL（）;
        $（'＃子'）负载（subcategoriesUrl，{ID：selectedCategoryId}）。
    }）;
}）;
 

和最后的子行动将与AJAX调用：

 公众的ActionResult子（INT？ID）
{
    VAR子= Repository.GetSubCategories（ID）;
    返回查看（子类）;
}
 

I want to display a dropdownbox on my MVC3 razor application from where user can select category and based on his selection i want to display subcategories which are checkbox so user can select multiple subcategories.

Can anyone help me how to get this?

Below is my json that i received from the web-service and and I deserialized that to the object, so how can i assign that object to two different list category(dropdown) and subcategory (check-boxes)?

JSON:

 {
 "Code":0,
 "Status":"Done",
 "Categories":[
 {
  "ID":1,
  "Name":"Eat",
    "Subcategories":[
        {"Flag":false,"ID":100,"Name":"Food"},
        {"Flag":false,"ID":101,"Name":"Fast Food"},         
        {"Flag":false,"ID":102,"Name":"Other"}
    ]
        },
    {
    "ID":2,
    "Name":"Entertainment",
     "Subcategories":[
        {"Flag":false,"ID":100,"Name":"All"},               
        {"Flag":false,"ID":101,"Name":"Movie"},
        {"Flag":false,"ID":102,"Name":"Other"}
    ]
  },
  }
  ]
  }

Entity:

public class MyData
{
  public int Code { get; set; }
  public string Status { get; set; }
  public List<Category> Categories { get; set; }
}

public class Category
{
  public string Name { get; set; }
  public int ID { get; set; }
  public List<Subcategory> Subcategories { get; set; }
}

public class Subcategory
{
  public string Name { get; set; }
  public int ID { get; set; }
  public bool Flag { get; set; }
}

解决方案

You could use AJAX. subscribe to the change event of the dropdownlist and trigger an AJAX request to a controller action passing along the selected category. The action will query the database for corresponding subcategories and return a partial view with corresponding checkboxes which will be injected into the DOM.

So let's suppose that you already have a dropdownlist for the categories in your view:

@Html.DropDownListFor(
    x => x.CategoryId, 
    Model.Categories, 
    new { 
        id = "categories",
        data_subcategoriesurl = Url.Action("subcategories", "somecontroller")
    }
)

and some div which will contain the subcategories somewhere on the page:

<div id="subcategories">
    @Html.EditorFor(x => x.SubCategories, "SubCategories")
</div>

and you could then have a SubCategories.cshtml partial which will render the list of checkboxes:

@model IList<CategoryViewModel>
@{
    // we change the HTML field prefix so that input elements
    // such as checkboxes have correct names in order to be able
    // to POST the values back 
    ViewData.TemplateInfo.HtmlFieldPrefix = "SubCategories";
}
@for (var i = 0; i < Model.Count; i++)
{
    <div>
        @Html.LabelFor(x => x[i].IsSelected, Model.CategoryName)
        @Html.CheckBoxFor(x => x[i].IsSelected)
    </div>
}

Now you could subscribe to the change event of the dropdown in a separate javascript file:

$(function() {
    $('#categories').change(function() {
        var subcategoriesUrl = $(this).data('subcategoriesurl');
        var selectedCategoryId = $(this).val();
        $('#subcategories').load(subcategoriesUrl, { id: selectedCategoryId });
    });
});

and finally the SubCategories action which will be invoked with AJAX:

public ActionResult SubCategories(int? id)
{
    var subCategories = Repository.GetSubCategories(id);
    return View(subCategories);
}

这篇关于何显示基于从下拉菜单中用户选择多个复选框的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！