asp.net mvc 4 - JQuery plug in, JavaScript syntax, cascading dropdown MVC4 followup, multi-level cascade -
first of all, post cascading drop-downs in mvc 3 razor view has been helpful. have used initial syntax, , have gotten cascading drop down work. have added more parameters functions called in controller, change list contents. here view not use "plugin".
@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> } what unsure how how add javascript plugin in re-factored part, , how modify can pass more 1 parameter. have attempted add code separate javascript file in project , include it, "wiring" breaks.
here separate javascript file:
/*! * dropdowns.js * script manage cascading of dropdowns * * 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); here view attempting use dropdowns.js file:
@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 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> } so, 1. how plugin code work? 2. how can add more parameters plugin method cascade? 3. worth doing?
first, broken plugin, think trying render script dropdown.js incorrectly treating bundle when believe not part of bundle based on syntax:
change:
@scripts.render("~/scripts/dropdowns.js") to:
<script type="text/javascript" src="@url.content("~/scripts/dropdown.js")"></script> second, appears second parameter hardcoded, why not pass part of url generating plugin use?
$('#selecteddivisionid').cascade({ url: '@url.action("regions", "controller", new{isactive = true})', paramname: 'divisionid', childselect: $('#selectedregionid') }); third, if using code in multiple places, yes, absolutely worth not having write did first code block on , on again. reduces complexity, points of failure , should speed deployment of cascading dropdowns going forward in project.
