c# - 使用 MVC5、Ajax、C# 和 MSSQL 服务器级联下拉列表

Question

我对来自 Windows 窗体和 3 层架构的 MVC 很陌生。

我正在尝试找出使用从数据库填充的级联下拉列表 (DDL) 的方法。我正在使用 MS SQL Server 2012、VS 2013

目前我正在处理用户调查问卷，用户可以从 DDL 的多个答案中进行选择。根据一些选择，我需要更改下一个问题的答案(同样是 DDL)。

数据库:

表DDLStacks:

StackId | StackName
   1    | Berry
   2    | BerryColor
   3    ....

表DDLStackContents(SCId堆栈内容id，索引目的)

SCId | StackId | GroupId | Key | Value
--------------------------------------
1 | 1 | Null | 1 | Grape
2 | 1 | Null | 2 | Avocado
3 | 1 | Null | 3 | Banana
4 | 2 | Null | 1 | Yellow
5 | 2 | Null | 2 | Green
6 | 2 | 1 | 3 | Red
7 | 2 | 1 | 4 | Orange
8...

过程:

   CREATE PROCEDURE [dbo].[spDLLSelect]
        @p_StackName_in VARCHAR(20),
        @p_GroupId_in Int = null
    AS 
    BEGIN
        SELECT [Key],Value FROM DDLStackContents
        WHERE StackID IN (SELECT StackId FROM DDLStacks WHERE StackName = @p_StackName_in)
        AND (GroupId = @p_GroupId_in OR @p_GroupId_in IS null) 
        Order By [Key] 
    END

如您所见，DDLStacks 包含问题，DDLStackContents 包含该问题的可能答案。

如果有一个组，我们可以只从该组中选择答案，否则选择特定堆栈的所有答案。

现在我已经创建了一个 ADO.NET 实体数据模型来访问 spDLLSelect。

现在我的水果模型是这样的

public class FruitModel
{
    public IEnumerable<SelectListItem> BerryList { get; set; }
    public IEnumerable<SelectListItem> BerryColorList { get; set; }

    [Display(Name = "Berry")]
    public byte? Berry { get; set; }

    [Display(Name = "BerryColor")]
    public byte? BerryColor { get; set; }
}

我的 Controller 是这个，我需要根据浆果的类型选择颜色。假设 Avacado 选择全部，如果 Banana 只选择第 1 组。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        CherryEntities db = new CherryEntities();
        var model = new FruitModel();
        model.BerryList = new SelectList(db.spDLLSelect("Berry", null), "Key", "Value");
        //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", null), "Key", "Value");
        //model.BerryColorList = new SelectList(db.spDLLSelect("BerryColor", 1), "Key", "Value");
        return View(model);
    }
}   

这是我的观点:

@using (Html.BeginForm("Register2", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{

<div class="form-group">
    @Html.LabelFor(m => m.Berry, new { @class = "col-md-2 control-label" })
    <div class="col-md-10" >
        @Html.DropDownListFor(m => m.Berry, Model.BerryList, "Please Select")
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.BerryColor, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.BerryColor, Model.BerryColorList, "Please Select")
    </div>
</div>

}

这是我的基本编码，我尝试了各种方法来实现它，我希望看到使用 ajax 强类型代码执行此操作的正确方法。

可能正在使用局部 View ？有什么想法吗？

Answer 1

你已经有了一个模型，你的 View 是强类型的。您需要做的就是在下拉列表中添加一个更改事件(有关更多信息，请参见下面的引用链接)。在发生更改事件时，您可以根据所选值加载值，例如如果选择了 Berry，您将需要获取 Berry 的相应值，即 Grape、Avocado。

您可以使用 JavaScript 加载值，这在您拥有大量数据时非常有用。或者您可以预加载包含所有数据的 View ，在这种情况下，您只需要根据在 UI 上选择的问题过滤答案。

有关如何在实践中实现这一点的帮助，请参阅 Cascading DropDownList In MVC 4 .您可以根据需要找到类似的示例。