使用 MVC 5 EF 6 从下拉列表选择中更新部分视图

Question

我正在从事我的第三年项目，我在这一部分中苦苦挣扎，我环顾四周并找到了一些答案，但我真的知道如何在我的代码中实现，因为它总是不起作用.所以我不知道我做错了什么。

我想要的是当下拉选择的项目发生变化时局部视图发生变化。

这是本节视图中生成的内容。

<div class="form-group">
    @Html.LabelFor(model => model.TypeID, "TypeID", new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("TypeID", String.Empty)
        @Html.ValidationMessageFor(model => model.TypeID)
    </div>
</div>

我见过的大多数解决方案都使用@html.dropdownlistfor()。

即使您可以将我指向正确的位置，我们也将不胜感激。

下拉列表由数据库关系填充。

如果我在带有 href 的“a”标签中使用标签，但它们被硬编码到页面上，我就可以做到这一点。我想使用下拉列表，这样如果我更新数据库，它就会有更新的列表，而不是我在代码中更改它，在我看来它也更加用户友好。

提前感谢

Answer 1

您可以从服务器检索数据并通过 JQuery 构造/更改 DOM，或者您可以使用适合每种问题类型的局部视图，将事件处理程序附加到下拉列表的 change 事件通过 JQuery。

一种方法，加载部分视图：

yourNamespace.yourScript.js 文件（通过带有src 属性的<script> 标记将该文件包含在您的主视图中）：

    (function ($) {     
        if (!window.yourNamespace) {
            window.yourNamespace = {};
        }
        if (!window.yourNamespace.yourPageScript) {
            window.yourNamespace.yourPageScript = function () {
                var populateView = function (dropDown) {
                    if (dropDown && dropDown.length) {
                        var value = dropdown.val();
                        $.ajax({
                            method: "GET",
                            cache: false,
                            url: "some.url/PopulateType",
                            dataType: "HTML"
                            data: { selectedValue: value }
                        })
                        .done(function (response) { // jQuery 1.8 deprecates success() callback
                            var div = $('#partialViewDiv');
                            div.html('');
                            div.html(response);
                        });
                    }
                };

                return {
                    populateView: populateView
                };
            };
        }
    }(jQuery));

你的主视图可能是这样的：

<script type="text/javascript">
    // put the script section somewhere appropriate in the page
    $(document).ready(function () {
        var dropDown = $('#TypeId'); // assuming the ID of this element is 'TypeId'
        dropDown.change(function () {
            yourNamespace.yourPageScript.populateView(dropDown);
        });
    });
</script>
<div id="partialViewDiv">
@Html.RenderPartial("path to initial partial view", model);
</div>

部分视图示例（调整以适合任何特定的下拉选择）：

@model namespaceName.QuestionTypeModel

<div class="form-group>
    @* put controls appropriate to the particular partial views here, such as radio buttons for the multiple choice question type, etc. *@
<div>
<div class="form-group">
    @Html.LabelFor(model => model.TypeID, "TypeID", new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("TypeID", Model.QuestionTypeValues)
        @Html.ValidationMessageFor(model => model.TypeID)
   </div>
</div>

部分控制器：

    [HttpGet]
    public ActionResult Index()
    {
        var model = new MainViewModel();
        // populate the model with data here for the initial display, including the initial drop-down values, 
        // presumably the same way you do now
        // into model.QuestionTypeValues

        return View(model); // the main view
    }

    [HttpGet]
    public ActionResult PopulateType(int selectedValue) // could use an enum for the selectable values
    {
        var model = new QuestionViewModel();

        string partialViewName = null;
        // populate with data appropriate to the partial views
        switch (selectedValue)
        {
            case 0:
                partialViewName = "partial view name for item 0";
                // populate "model" with the appropriate data
                break;
            case 1:
                partialViewName = "partial view name for item 1";
                 // populate "model" with the appropriate data
                break;
            // and so on...
            default:
                throw new ArgumentException("unknown selected value", "selectedValue");
                break;
        }

        return PartialView(partialViewName, model);
    }

使用 jQuery 构建 DOM 元素而不是使用局部视图的方法留作练习。