使用Ajax选取ListBox的值异步更新视图，并作为表单值提交
一、控制器返回一个ViewBag MultiSelecList值。
public ActionResult Create()
{
ViewBag.ReviewIndexItems = new MultiSelectList(db.ReviewIndexItems.OrderBy(item => item.ReviewIndexItemNumber).ToList(), "ReviewIndexItemID","ReviewIndexItemName");
return View();
}
二、主视图通过ListBox接收值。第一个ListBox值以Html辅助方法生成，第二个空的以标签定义。实际上ListBox最终会被渲染成<select>标签，能否多选取决于html Multiple属性。
如果使用html辅助方法 @Html.DropDownList()默认单选。 @Html.ListBox默认多选。
两者最终都生成select标签，外观 取决于行数，也就是size属性。
<select>
<option>值1<option>
<option>值2<option>
<select>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
.......................................................................
@*更改评审指标的ListBox*@ 以下可放在主视图中，也可以设置在单独的 分部视图中，使用@{Html.RenderPatial("name");}
<div class="form-group">
<label for="reviewIndexItems" class="control-label col-md-2">选择评估指标</label>
<div class="col-md-2">
@Html.ListBox("reviewIndexItems", ViewBag.ReviewIndexItems as MultiSelectList, new { @class = "form-control", size = "10", id = "lb_Origin" })
</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="10"></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="indexUseItems">评审指标设置</label>
<div id="indexUseItems" class="col-md-7"> //被用于更新的标记。
</div>
</div>
三、设置Jquery 脚本实现Ajax 异步更新。
@section Scripts {
<script>
$(function () {
$("#btn_addItems").click(function () { //注册单击事件
var items = $("#lb_Origin option:selected"); //选取左边listbox选中的元素的值和文本。
items.clone().appendTo("#lb_Result"); //将它加入到右边的listBox中
items.remove(); //清除左边listBox的选中值。
RefreshTableAndSend(); //每一次变动，都将右边的ListBox的值取出，发出Ajax请求，返回一个分部视图来更新网页。
});
$("#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 () { //选中右边ListBox的值，每一个option子节点 都取得ID值。Val(),，然后加入到数组中。
var value = $(this).val().toString();
valueArray.push(value);
});
$.post("/ReviewIndexSystem/CreateIndexUseItems", { reviewIndexItemsIds: valueArray }) //在Create视图中，通过jquery创建的提交操作，会自动提交到 ReviewIndexSystem/IndexUseItems 操作方法，而编辑视图中，创建的提交操作前会自动的加 Edit路径，即 提交至 ReviewIndexSystem/Edit/IndexUseItems的操作方法。所以干脆使用 完整的方法调用名。
.success(function (data) {
$("#indexUseItems").html(data);
});
//检查数组是否有值，结果证实，是有正确的值的。
/*
for(var i=0;i < valueArray.length; i++)
{
alert(valueArray[i]);
}
*/
}
</script>
@Scripts.Render("~/bundles/jqueryval")
}
四、定义处理通过Ajax请求发送过来的控制器操作方法，以向主视图返回一个分部视图。
//新建ReviewIndexUseItem 使用的控制器方法。用于接收在新建 主视图中将选后的列表框的 ReviewIndexItem的值，在页面上返回一个部分视图，达到异步刷新的效果。
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);
}
四、定义用于返回的强类型的分部视图。
@model IEnumerable<UniversalReviewSystem.Models.ReviewIndexUseItem>
@if (Model.Count() >0)
{
<table class="table table-hover table-striped">
<thead>
<tr>
<th>包含权重编号</th>
<th>
指标编号
</th>
<th>
指标名称
</th>
<th>
参考标准
</th>
<th>
最高分
</th>
<th>
最低分
</th>
<th>
权重
</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" /> //隐藏字段，后一起提交到控制器。
@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> //表单提交后一起提交到控制器。
</tr>
}
</tbody>
</table>
}
五、在主视图Create中提交表单，表单 中的 输入字段包括 分部视图返回的值。
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="新建" class="btn btn-default" />
</div>
</div>
</div>
六、控制器接收提交过来的值。包括使用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");
}
