在MVC4中实现此视图的顺序或流程是什么

时间:2013-02-22 03:35:44

标签: asp.net-mvc jquery asp.net-mvc-4

我还在学习MVC4。

想象一下以下场景:我有三个dropDownLists和一个内容的大div。我不知道如何处理按需加载。

流程很简单,加载页面时,在第一个下拉列表中显示数据。当这个值有一个值时,第二个应按需加载信息(使用ddl1中的选定值),依此类推,直到更改ddl3上的值并显示数据。

直到这里我发现了两个局部视图。我不确定是否应该创建5因为每个ddl必须在一个局部视图中。

另外,如果我必须使用SelectList或者在viewModel中维护集合foreach ddl,你会建议维护ViewBag是什么?

enter image description here

我只想知道你是否可以澄清这种情况。我的意思是,想一想我该如何开始这样做?事实上,我忘了提到这个疑问,但如果我不得不使用AJAX,我就不会这样做。

1 个答案:

答案 0 :(得分:0)

我被卡住了,几个星期前回到了同样的事情: -

让你的MVC调用如下: -

    private void LoadDropdown1()
    {
        var _data;//Your logic to get the data
        ViewData["Dropdown1"] = new SelectList(_data, "Dropdown1Id", "Name");
    }
    private void LoadDropdown2(int dropdownParameterId)
    {
        var _data = "";//Use your ID to get the data
        ViewData["Dropdown2"] = new SelectList(_data, "Dropdown2Id", "Name");
    }

你的.cshtml是: -

@using (Html.BeginForm())
{
    <div>
        <table>
            <tr>
                <td><b>Select a District:</b></td>


                <td>@Html.DropDownListFor(m => m.Dropdown1Id, ViewData["Dropdown1"] as IEnumerable<SelectListItem>, "Select One", new {@id="Dropdown1Id"})</td>
            </tr>
            <tr>
                <td><b>Select:</b></td>

                <td>@Html.DropDownListFor(m => m.Dropdown2Id, ViewData["Dropdown2"] as IEnumerable<SelectListItem>, "Select One")</td>
            </tr>
        </table>
    </div>
}

现在,AJAX调用最好将数据加载到您的下拉列表中: -

$(function () {
    $('select#Dropdown1').change(function () {
        var id = $(this).val();


        $.ajax({
            url: 'Bla Bla',
            type: 'POST',
            data: JSON.stringify({ id: id }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $.each(data, function (key, data) {
                    $('select#Dropdown1').append('<option value="0">Select One</option>');
                    // loop through the LoadDropdown1 and fill the dropdown
                    $.each(data, function (index, item) {
                        $('select#Dropdown1').append(
                            '<option value="' + item.Id + '">'
                            + item.Name +
                            '</option>');
                    });
                });
            }
        });
    });
});

我想说的是......按照您喜欢的方式加载您的第一个下拉列表。然后在第一个下拉列表的更改事件中,您可以触发ajax调用以获取第二个下拉列表的数据....类似..

参考: - on select change event - Html.DropDownListFor