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

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.如何将更多参数添加到级联的插件方法中？ 3.这样做值得吗？

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

第三，如果你使用的是在多个地方的代码，然后是的，绝对是这将是值得不必写什么你做你的第一个代码块一遍又一遍。这样可以降低复杂性和故障点，并且可以加快部署项目中前后级联的下拉菜单。