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，或者您可以使用适合每种问题类型的部分视图，将事件处理程序附加到drop的change事件-down通过JQuery。

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

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

    (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元素而不是使用部分视图的方法留作练习。

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

1 个答案: