Question

首先，这篇文章Cascading drop-downs in MVC 3 Razor view非常有帮助。我已经使用了初始语法，并让我的级联下拉工作。我已经为我的控制器中调用的函数添加了更多参数，以更改列表内容。这是一个不使用“插件”的视图。

@model HolterManagementUI.Models.CrudUserViewModel
@{
ViewBag.Title = "Edit";
}
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(function () {
    $('#SelectedDivisionID').change(function () {
        var selectedDivisionID = $(this).val();
        $.getJSON('@Url.Action("Regions")', { divisionId: selectedDivisionID, isActive: true }, function (regions) {
            var regionsSelect = $('#SelectedRegionID');
            regionsSelect.empty();
            $.each(regions, function (index, region) {
                regionsSelect.append(
                    $('<option/>')
                        .attr('value', region.ID)
                        .text(region.Description)
                );
            });
         var locationsSelect = $('#SelectedLocationID');
         locationsSelect.empty();
        });
    });

    $('#SelectedRegionID').change(function () {
        var selectedRegionID = $(this).val();
        $.getJSON('@Url.Action("Locations")', { regionId: selectedRegionID, isActive: true }, function (locations) {
            var locationsSelect = $('#SelectedLocationID');
            locationsSelect.empty();
            $.each(locations, function (index, location) {
                locationsSelect.append(
                    $('<option/>')
                        .attr('value', location.ID)
                        .text(location.Description)
                );
            });
        });
    });
});
</script>
<h2>Edit User</h2>
@using (Html.BeginForm())
{

<table>
<tr>
    <td>LanID</td>
    <td>
    @Html.HiddenFor(h => h.ID)
    @Html.EditorFor(h => h.LanID)</td>
</tr>
<tr>
    <td>Division</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedDivisionID, new SelectList(Model.Divisions, "ID", "Description", Model.SelectedDivisionID.ToString()))
    </td>
</tr>
<tr>
    <td>Region</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedRegionID,  new SelectList(Model.Regions, "ID", "Description", Model.SelectedRegionID.ToString()))
    </td>
</tr>
<tr>
    <td>Location</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedLocationID,  new SelectList(Model.Locations, "ID", "Description", Model.SelectedLocationID.ToString()))
    </td>
</tr>
<tr>
    <td>Is Active</td>
    <td>@Html.EditorFor(h => h.IsActive)</td>
</tr>
</table>

<div class="buttongroup" align="left" style="margin-top: 50px">
    <input type="submit" name="submitButton" value="Save" />
    <button type="button" onclick="location.href='@Url.Action("List")'">Cancel</button>
</div>
}

我不确定怎么做的是如何在重新分解的部分中添加JavaScript插件，然后如何修改它以便我可以传递多个参数。我试图将代码添加到项目中的单独JavaScript文件中并包含它，但随后“连线”总是中断。

这是我单独的JavaScript文件：

/*!
* DropDowns.js
* Script to manage Cascading of dropdowns
* 
* From stackoverflow.com
* https://stackoverflow.com/questions/4458970/cascading-drop-downs-in-mvc-3-razor-view
*/
(function ($) {
$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
        $(this).change(function () {
            var selectedValue = $(this).val();
            var params = {};
            params[opts.paramName] = selectedValue;
            $.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                $.each(items, function (index, item) {
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', item.Id)
                            .text(item.Name)
                       );
                    });
                });
            });
        });
    };
})(jQuery);

以下是我的尝试使用DropDowns.js文件的视图：

@model HolterManagementUI.Models.CrudUserViewModel
@{
ViewBag.Title = "Create";
}

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/scripts/DropDowns.js")

<script type="text/javascript">
$(function () {
    $('#SelectedDivisionID').cascade({
        url: '@Url.Action("Regions")',
        paramName: 'divisionId',
        childSelect: $('#SelectedRegionID')
    });

    $('#SelectedRegionID').cascade({
        url: '@Url.Action("Locations")',
        paramName: 'regionId',
        childSelect: $('#SelectedLocationID')
    });
});
</script>
<h2>Create a User</h2>
@using (Html.BeginForm())
{

<table>
<tr>
    <td>LanID</td>
    <td>
    @Html.HiddenFor(h => h.ID)
    @Html.EditorFor(h => h.LanID)</td>
</tr>
<tr>
    <td>Division</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedDivisionID, new SelectList(Model.Divisions, "ID", "Description"))
    </td>
</tr>
<tr>
    <td>Region</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedRegionID,  Enumerable.Empty<SelectListItem>())
    </td>
</tr>
<tr>
    <td>Location</td>
    <td>
    @Html.DropDownListFor(h => h.SelectedLocationID, Enumerable.Empty<SelectListItem>())
    </td>
</tr>
</table>

<div class="buttongroup" align="left" style="margin-top: 50px">
    <input type="submit" name="submitButton" value="Save" />
    <button type="button" onclick="location.href='@Url.Action("List")'">Cancel</button>
</div>
}

所以， 1.如何使插件代码生效？ 2.如何为级联的插件方法添加更多参数？这值得吗？

Answer 1

首先，对于你的破坏的插件，我认为你正在尝试渲染dropdown.js的脚本错误，因为当你认为它不是你的语法包的一部分时，就像捆绑一样：

变化：

@Scripts.Render("~/scripts/DropDowns.js")

要：

<script type="text/javascript" src="@Url.Content("~/Scripts/DropDown.js")"></script>

其次，您的第二个参数似乎是硬编码的，为什么不将它作为您为插件生成的URL的一部分传递？

$('#SelectedDivisionID').cascade({
        url: '@Url.Action("Regions", "Controller", new{isActive = true})',
        paramName: 'divisionId',
        childSelect: $('#SelectedRegionID')
    });

第三，如果你在多个地方使用这个代码，那么是的，绝对值得你不必一遍又一遍地编写你的第一个代码块。这样可以降低复杂性，降低故障点，并加快项目中级联下拉列表的部署速度。

JQuery插件，JavaScript语法，级联下拉MVC4后续，多级级联

1 个答案: