Use AJAX to select the value of a ListBox to update the view asynchronously and submit as a form value

First, the controller returns a ViewBag multiseleclist value.

Public ActionResult Create ()
{
Viewbag.reviewindexitems = new Multiselectlist (db. Reviewindexitems.orderby (item = Item). Reviewindexitemnumber). ToList (), "Reviewindexitemid", "reviewindexitemname");
return View ();
}

Second, the main view receives the value through the listbox. The first listbox value is generated as an HTML-assisted method, and the second empty is defined as a label. In fact, the listbox will eventually be rendered as a <select> tag, depending on the HTML multiple attribute.

If you use the Html helper method @Html. DropDownList () Default radio. @Html. ListBox default multiple selection.

Both eventually generate a select tag, and the appearance depends on the number of rows, which is the Size property.

<select>

<option> value 1<option>

<option> value 2<option>

<select>

@using (Html.BeginForm ())
{
@Html. AntiForgeryToken ()

<div class= "Form-horizontal" >

.......................................................................

@* The listbox*@ of the change review metric can be placed in the main view, or in a separate partial views, using @{html.renderpatial ("name");}
<div class= "Form-group";
<label for= "Reviewindexitems" class= "Control-label col-md-2" > Select evaluation Metrics </label>
<div class= "col-md-2";
@Html. ListBox (" Reviewindexitems ", Viewbag.reviewindexitems as Multiselectlist, new {@class =" Form-control ", size =" Ten ", id =" Lb_origi N "})
</div>
<div class=" col-md-1 "
<button id=" Btn_additems "class=" btn btn-primary Btn-block "type=" button "><span class=" Glyphicon glyphicon-chevron-right "></span></button>
<button id= "Btn_subitems" class= "btn btn-primary btn-block" type= "button" ><span class= "Glyphicon Glyphicon-chevron-left "></SPAN></BUTTON>

</div>
<div class= "Col-md-2" >
<select id= "Lb_result" multiple class= "Form-control" size= "ten" ></select>
</div>
</div>
<div class= "Form-group" >
<label class= "Control-label col-md-2" for= "Indexuseitems" > Review indicator Settings </label>
<div id= "Indexuseitems" class= "col-md-7" >//is used to update the tag.

</div>
</div>

Third, set up jquery script to implement AJAX asynchronous update.

@section Scripts {
<script>
$ (function () {
$ ("#btn_addItems"). Click (function () {    &nbs P    //Register Click event
var items = $ ("#lb_Origin option:selected");  //selects the value and text of the selected element in the left listbox.
items.clone () appendTo ("#lb_Result");          //add it to the right of the listbox

$ ("#btn_subItems"). Click (function () {
var items = $ ("#lb_Result option:selected");
Items.clone (). AppendTo ("#lb_Origin");
Items.remove ();

Refreshtableandsend ();

});

});

function Refreshtableandsend ()
{
var valueArray = new Array ();
$ ("#lb_Result > Option"). each (function () {///selects the value of the ListBox on the right, and each option child node obtains an ID value. Val (), and then add to the array.
var value = $ (this). Val (). toString ();
Valuearray.push (value);
});

$.post ("/reviewindexsystem/createindexuseitems", {Reviewindexitemsids:valuearray}) //In the CREATE VIEW, The commit action created through jquery is automatically submitted to the Reviewindexsystem/indexuseitems action method, and the edit view, which automatically adds an edit path before the commit action is created, is submitted to reviewindexsystem/ Edit/indexuseitems method of operation. So simply use the full method call name.
. Success (function (data) {
$ ("#indexUseItems"). HTML (data);
});

Checks if the array has a value, and the result confirms that it has the correct value.
/*
for (Var i=0;i < valuearray.length; i++)
{
Alert (Valuearray[i]);
}
*/

}

</script>
@Scripts. Render ("~/bundles/jqueryval")
}

The definition handles the controller action method sent over the AJAX request to return a partial view to the master.

The Controller method used by the new Reviewindexuseitem. Used to receive the value of the Reviewindexitem of the selected list box in the new main view, which returns a section of views on the page to achieve the effect of an asynchronous flush.
Public ActionResult Createindexuseitems (params string[] reviewindexitemsids)
{
list<reviewindexuseitem> indexuseitems = new list<reviewindexuseitem> ();
if (reviewindexitemsids! = null)
{
foreach (Var indexitemid in Reviewindexitemsids)
{
var indexitem = db. Reviewindexitems.where (item = Item). Reviewindexitemid = = indexitemid.tostring ()). Singleordefault ();
if (Indexitem! = null)
{
var indexuseitem = new Reviewindexuseitem ();
Indexuseitem.reviewindexitem = Indexitem;
Indexuseitems.add (Indexuseitem);
}
}
}



Return Partialview ("_indexuseitems", Indexuseitems);

}

Iv. define a strongly typed partial view for return.

@model ienumerable<universalreviewsystem.models.reviewindexuseitem>

@if (Model.count () >0)
{

<table class= "Table Table-hover table-striped" >
<thead>
<tr>
<th> include weight number </th>
<th>
Indicator number
</th>
<th>
Indicator name
</th>
<th>
Reference standard
</th>
<th>
Highest score
</th>
<th>
Minimum score
</th>
<th>
Weight
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<th> @Html. Displayfor (ModelItem =>item. Reviewindexitem.reviewindexitemid) </th>
<td>
@Html. displayfor (ModelItem = Item. Reviewindexitem.reviewindexitemnumber)
</td>
<td>
<input type= "hidden" value= "@item. Reviewindexitem.reviewindexitemid "name=" Reviewindexitemid "/>//Hide fields, and then commit to the controller together.
@Html. Displayfor (ModelItem =>item. Reviewindexitem.reviewindexitemname)
</td>
<td>
@Html. Displayfor (ModelItem =>item. Reviewindexitem.reviewindexitemdescription)
</td>
<td>
@Html. Displayfor (ModelItem =>item. Reviewindexitem.reviewindexitemhighestscore)
</td>
<td>
@Html. displayfor (ModelItem = Item. Reviewindexitem.reviewindexitemlowestscore)
</td>
<td>
<input type= "text" name= "Reviewindexuseitemweight" value= "@item. Reviewindexuseitemweight "class=" Form-control "size=" 1 "/> </td>//Forms submitted together with the controller.
</tr>
}
</tbody>
</table>
}

V. Submit the form in the main view create, and the input fields in the form include the values returned by the partial views.

<div class= "Form-group" >
<div class= "Col-md-offset-2 col-md-10" >
<input type= "Submit" value= "new" class= "btn Btn-default"/>
</div>
</div>
</div>

Six, the controller receives the value submitted. Includes the form field values returned using Aajax.

[HttpPost]
[Validateantiforgerytoken]
Public ActionResult Create ([Bind (Include = "Reviewindexsystemid,reviewindexsystemnumber,reviewindexsystemname, Reviewindexsystemdescription ")] Reviewindexsystem Reviewindexsystem, decimal[] reviewindexuseitemweight, string[] REVIEWINDEXITEMID)
{
var length = Reviewindexuseitemweight.count ();
var length2 = Reviewindexitemid.count ();
foreach (Var indexitemid in Reviewindexitemid)
{
var _reviewindexitem = db. Reviewindexitems.find (Indexitemid);
_reviewindexitem.isused = true;
Db. SaveChanges ();

}

if (reviewindexuseitemweight! = NULL && Reviewindexitemid! = null)
{
for (int i = 0; i < length; i++)
{
REVIEWINDEXSYSTEM.REVIEWINDEXUSEITEMS.ADD (new Reviewindexuseitem {reviewindexuseitemweight = Reviewindexuseitemweight[i], Reviewindexitemid = reviewindexitemid[i]});

}

}

if (modelstate.isvalid)
{

Db. Reviewindexsystems.add (Reviewindexsystem);
Db. SaveChanges ();
Return redirecttoaction ("Index");
}

Use AJAX to select the value of a ListBox to update the view asynchronously and submit as a form value