DropdownList em cascata com MVC5, Ajax, C# e MSSQL Server

Question

Sou muito novo no MVC vindo de formulários do Windows e arquitetura de 3 camadas.

Estou tentando descobrir o uso de listas suspensas em cascata (DDL) preenchidas no banco de dados.Estou usando o MS SQL Server 2012, VS 2013

Atualmente estou trabalhando em um questionário de usuário no qual os usuários podem selecionar entre várias respostas do DDL.Dependendo de algumas seleções, preciso alterar as respostas (novamente DDL) na próxima pergunta.

Base de dados:

Mesa DDLStacks:

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

Mesa DDLStackContents (ID de conteúdo da pilha SCId, finalidade de indexação)

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

Procedimento:

   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

Como você pode ver DDLStacks mantenha perguntas, DDLStackContents contém possíveis respostas para essa pergunta.

Se houver um grupo, podemos selecionar apenas as respostas desse grupo, caso contrário, todas as respostas de uma pilha específica.

Agora criei um modelo de dados de entidade ADO.NET para acessar spDLLSelect.

Agora meu modelo de fruta é esse

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

Meu controlador é esse, preciso selecionar a cor dependendo do tipo de baga.Diga se Avacado seleciona todos, se Banana apenas agrupa 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);
    }
}   

Aqui está minha opinião:

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

}

Esta é a minha codificação básica, tentei vários métodos para fazer isso funcionar, gostaria de ver a maneira correta de fazer isso com o código Ajax STRONGLY Typed.

Pode estar usando visualizações parciais?Alguma ideia?

Answer 1

Você já tem um modelo com o qual sua visualização é fortemente tipada.Tudo o que você precisa fazer é adicionar um evento de alteração na lista suspensa (para obter mais informações, consulte o link abaixo).No evento de mudança, você pode carregar os valores conforme o valor selecionado, por exemplo.se Berry for selecionado, você precisará buscar os valores correspondentes para Berry, ou seja, Uva, Abacate.

Você pode carregar valores usando JavaScript, o que é útil quando você tem um grande conjunto de dados.Ou você pode pré-carregar a visualização com todos os dados e, nesse caso, basta filtrar as respostas com base na pergunta selecionada na IU.

Para obter ajuda sobre como conseguir isso na prática, consulte DropDownList em cascata no MVC 4.Você pode encontrar exemplos semelhantes com base em suas necessidades.