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

我正在做我第三年的项目，这一部分我做得很糟糕，我环顾四周，找到了一些答案，但我确实知道如何在代码中实现，因为它总是不起作用。所以我不知道我做错了什么

我想要的是，当下拉选择项发生更改时，局部视图也会发生更改

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

<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>

@LabelFor（model=>model.TypeID，“TypeID”，新的{@class=“controllabel col-md-2”}）
@DropDownList（“TypeID”，String.Empty）
@Html.ValidationMessageFor（model=>model.TypeID）

我见过的大多数解决方案都使用@html.dropdownlistfor（）

即使你能给我指出正确的地方，我也会非常感激你的帮助

下拉列表将从数据库关系中填充

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

---

Thanx提前

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

更改

事件

一种方法是加载局部视图：

yourNamespace.yourScript.js文件（通过带有

src

属性的

标记将该文件包含在主视图中）：

您的主视图可以有如下内容：

<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>

---

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

您需要处理javascript/jQuery中下拉列表的

.change（）

事件，并使用ajax调用服务器方法并更新DOM，或重定向到新视图。但是没有理由硬编码您的linsk-您只需使用一个基于您数据库中的集合的循环即可database@StephenMuecke谢谢，我能把ajax放在我的jquery函数中吗？嗨，谢谢你的详细回答，我会把它标记为正确的，因为看起来你知道你在做什么，我假设我的实现是错误的，如果您有时间，并想进一步帮助，将不胜感激，我会玩它进一步，并试图得到它的权利。主要的问题是，我对jquery、ajax和mvc都是全新的。我可以提供进一步的帮助，只要试着理解我在那里学到了什么，并且可以自由地问你关于它的任何问题。目前正忙于我的最后两次考试，我会在完成后继续提问：）

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