MVC drop-down box Interaction Effect (single choice), mvc Interaction

MVC drop-down box Interaction Effect (single choice), mvc Interaction

The drop-down box shows the linkage effect. We take the Department-position as an example. When selecting a department, we will not talk much about the job associated with the Department. For details, refer to the previous article.

View:

Dept is the department attribute, deptlist is the department drop-down box attribute, job is the position attribute, and joblist is the position drop-down box attribute. For details about binding the drop-down box, refer to the previous section.

@using (Html.BeginForm("aaai003sch", "aaa", FormMethod.Post, new { @class = "form-horizontal", role = "form" })){    @Html.AntiForgeryToken()    <div class="modal-body">        <div class="form-horizontal">               <div class="form-group">                    @Html.LabelFor(m => m.dept, new { @class = "col-sm-2 control-label" })                        <div class="col-sm-10">                            @Html.DropDownListFor(model => model.dept, Model.deptlist, new { @class = "form-control select2 ", style = "width: 100%;" })                            @Html.ValidationMessageFor(m => m.dept, "", new { @class = "text-danger" })                       </div>               </div>               <div class="form-group">                @   Html.LabelFor(m => m.job, new { @class = "col-sm-2 control-label" })                       <div class="col-sm-10">                            @Html.DropDownListFor(model => model.job, Model.joblist, new { @class = "form-control select2 page-select2-area", style = "width: 100%;" })                            @Html.ValidationMessageFor(m => m.job, "", new { @class = "text-danger" })                       </div>               </div>        </div>    </div></div>

When the department changes, the position also changes accordingly:

// Get the hotel $ ("# dept") based on the city "). change (function () {var url = rootUrl + "aaa/GetJobByDept"; var dept = $ (this ). val (); // obtain the department Value var job =$ ("# job"); job. empty (); // clear the value of the current position // This sentence is very important, because we use the select2 plug-in. If this plug-in is not used, we can remove this job. select2 ('val ', ''); $. ajax ({cache: false, type: "GET", url: url, data: {"Dept": dept}, success: function (data) {$. each (data, function (id, option) {job. append ($ ('<option> </option> '{.val(option.id}.html (option. name) ;}); job. trigger ('change');}, error: function (xhr, ajaxOptions, thrownError) {toastr ["error"] ("select a Department ");}});});

Run the URL in js and write this program in the controller:

[Description ("obtain position by Department")] [AcceptVerbs (HttpVerbs. get)] [LoginAllowView] public ActionResult GetJobByDept (string dept) {if (String. isNullOrEmpty (dept) {throw new ArgumentNullException ("dept");} StringBuilder sb = new StringBuilder (); sb. append ("SELECT jobid, jobname"); sb. append ("FROM job_file"); sb. append ("left join dept_file ON jobdept = deptid"); sb. appendFormat ("WHERE deptid = '{0}'", dept); DataTable dt = sqlHelper. getData (sb. toString (); var result = dt. asEnumerable (). select (row => new Item {Name = Utils. objToStr (row ["jobname"]), Id = Utils. objToInt (row ["jobid"], 0 )}). toList (); return Json (result, JsonRequestBehavior. allowGet );}