如何在运行时根据用户输入生成下拉列表

Question

我想根据用户输入的计数生成下拉列表，假设用户输入3，则应该生成3个下拉列表。 这是我的看法

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div class="form-group">
            @Html.Label("Make", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("Make", ViewBag.Make as SelectList, "Select",  new { @id = "ddlSelect",onchange ="GetOption();"})
            </div>
        </div>
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.Label("Count", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBox("Count","", new { @id = "textCount",onblur ="GetCount();"})
            </div>    
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Cost, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Cost, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Cost, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Make, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Make, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Make, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="click" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

首先，我问用户两个从dropdownlist中选择一个值。之后，我要让hee输入count ..基于该计数，我想生成dropdownlists并想使用viewbag数据填充它们。

我的模特班是

public partial class Cables_List
{
    public int ID { get; set; }
    public string Category { get; set; }
    public Nullable<decimal> Dlink { get; set; }
    public Nullable<decimal> Molex { get; set; }
}

＆这是我的控制器

public class BOMController : Controller
{
    private InventoryContext db = new InventoryContext();

    // GET: BOM
    public ActionResult Cables()
    {
        ViewBag.Make = new SelectList(db.Make, "ID", "Name");
        ViewBag.Dlink = new SelectList(db.Cables_List, "Dlink", "Category");
        ViewBag.Molex = new SelectList(db.Cables_List,"Molex","Category")
        return View();
    }

我只想从Viewbag.Dlink和Viewbag.Molex加载数据。 基于用户从下拉列表中的选择。 我正在使用数据库优先方法。 有什么方法可以在MVC中实现此功能，或者我必须使用jquery.Kindly指南。

Answer 1

电缆型号：

public class Cable
{
    public int ID { get; set; }
    public string Category { get; set; }
    public decimal? Dlink { get; set; }
    public decimal? Molex { get; set; }
}

您的ViewModel：

public class HomeViewModel
{
    public int Amount { get; set; }
    public List<Cable> Cables { get; set; }
}

控制器方法：

public ActionResult GetCables(int Amount)
{
    var model = new HomeViewModel();
    model.Cables = db.Cables_List.ToList();

    return PartialView("_Cable.cshtml", model);
}

_Cable.cshtml部分视图：

@model HomeViewModel

@for (var i = 0; i < Model.Amount; i++)
{
    @Html.DropDownList("DDname", new SelectList(Model.Cables, "ID", "Category"))
}

jQuery呼叫：

$(this).on('blur', '#textCount', function () {
    var amount = $(this).val(); // get the inputed number (maybe check if is grater than 0)

    $.ajax({
        url: '/Home/GetCables',
        type: 'GET',
        data: { Amount: amount },
        success: function (data) {
            $('#CableWrapper')
                .empty()
                .append(data);
        }
    });
});

然后将div附加到您的主视图中：

<div id="CableWrapper"></div>