0

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

@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.如何在插件方法中添加更多参数进行级联？3. 这值得吗？

4

1 回答 1

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

第三，如果您在多个地方使用此代码，那么是的，绝对不必一遍又一遍地编写您的第一个代码块。这降低了复杂性和故障点，并且应该加快项目中级联下拉菜单的部署。

于 2013-04-25T18:47:55.627 回答