Question

我已经广泛研究过这个问题，无法弄清楚出了什么问题。我正在尝试使用MVC4和Jquery为我的页面实现级联下拉列表，无论我在线使用什么解决方案，我的ActionResult参数始终为null。

这是被称为Javascript的Javascript：

<script type="text/javascript">
$('.clientnames').on('change', function (e) {

    // Retrieve the filter url from the data-filter-url attribute
    var filterUrl = $(this).attr('data-filter-url');

    // Grab the id of the selected item
    var selectedId = $(this).val();
    window.alert("filterurl:" + filterUrl + "    selectedID:" + selectedId);

    // Grab the container that should be updated
    var updateContainer = $(this).attr('data-update-container');

    // Grab the id of new dropdown
    var dataUpdateId = $(this).attr('data-update-id');

    var completeUrl = filterUrl + selectedId;

    $.get(completeUrl, function (r) {

        // Load Partial View using the URL from the data-filter-url attribute
        $(updateContainer).html(r);

        // This would be used if you wanted to trigger the new dropdown to filter another
        if (dataUpdateId != null) {
            // Trigger the change event after it is loaded
            $(dataUpdateId).trigger('change');
        }
    });
});

控制器功能，这个被调用但是没有成功传入的值：

 public ActionResult ImportList(string selectedId)
     {
         //DO COOL STUFF
     }

观点：

 @Html.DropDownListFor(model => model.Clients.DropdownItems, 
         new SelectList(Model.Clients.DropdownItems, "ItemID","ItemName"),
                        new
                        {
                            @class = "clientnames",
                            data_filter_url = Url.Content("~/import/importlist/"),
                            data_update_container = ".dropdown-container",
                            data_update_id = "#SecondItemID"
                        }
)

我非常关注此页面上的建议：http://www.sidecreative.com/Blog/Entry/Cascading-dropdown-lists-with-MVC4-and-jQuery

虽然我尝试了一些不同的解决方案，但每次该值仍然为空。我对MVC和Jquery很新，所以任何建议都会受到赞赏。

Answer 1

尝试传递所选的值，如下所示：

$('.clientnames').on('change', function (e) {

    // Retrieve the filter url from the data-filter-url attribute
    var filterUrl = $(this).attr('data-filter-url');

    // Grab the id of the selected item
    var selectedId = $(this).val();
    window.alert("filterurl:" + filterUrl + "    selectedID:" + selectedId);

    // Grab the container that should be updated
    var updateContainer = $(this).attr('data-update-container');

    // Grab the id of new dropdown
    var dataUpdateId = $(this).attr('data-update-id');

    $.get(filterUrl, { selectedId: selectedId }, function (r) {

        // Load Partial View using the URL from the data-filter-url attribute
        $(updateContainer).html(r);

        // This would be used if you wanted to trigger the new dropdown to filter another
        if (dataUpdateId != null) {
            // Trigger the change event after it is loaded
            $(dataUpdateId).trigger('change');
        }
    });
});

您的控制器操作会使用名为selectedId的参数，并注意$.get函数中的传递方式：

$.get(filterUrl, { selectedId: selectedId }, function (r) {
    ...
});

您还可以查看following post以获取在ASP.NET MVC中实现级联下载的其他示例。

使用MVC4和Jquery的级联下拉列表的问题

1 个答案: