Question

我想根据user.Suppose输入的计数生成下拉列表。如果用户输入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中选择一个值。之后我要求hime输入计数...基于该计数，我想生成下拉列表＆amp;想要使用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＆amp; Viewbag.Molex。基于下拉列表中的用户选择。我正在使用Database first Approach。有没有办法在MVC中实现这一点，或者我必须使用jquery.Kindly guide。

Answer 1

电缆型号：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

您的ViewModel：

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

Controller方法：

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

jQuery调用：

@model HomeViewModel

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

在主视图中，将div放在要添加下拉列表的位置：

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

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

1 个答案: