使用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");
}