一、控制器返回一个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");
}

使用Ajax选取ListBox的值异步更新视图,并作为表单值提交的更多相关文章

  1. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  2. 使用jquery的ajax方法获取下拉列表值

    AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,用户体验非常好. ...

  3. Ajax详解及使用Ajax时的返回值类型有哪些?

    Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...

  4. 【转】从Vue.js源码看异步更新DOM策略及nextTick

    在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...

  5. AJAX 表单提交 文件上传

    1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载 ...

  6. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  7. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  8. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  9. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

随机推荐

  1. Java8 时区DateTime API

    原文:http://www.yiibai.com/java8/java8_zoneddateapi.html 时区日期时间的API正在使用当时区要被考虑时. 让我们来看看他们的操作. 选择使用任何编辑 ...

  2. BUPT复试专题—内存分配(2014-2)

    题目描述 在操作系统中,内存分配是非常重要的工作.己知内存空间由N个内存块组成,这些内存块从1到N编号.进行内存分配时,操作系统将选择一块大小足够的内存全部分配给请求内存的进程.例如,当进程请求10M ...

  3. svn简单介绍

    版本号控制(Revision control)是维护project蓝图的标准做法,能追踪project蓝图从诞生一直到定案的过程.是一种记录若干文件内容变化.以便将来查阅特定版本号修订情况的系统. 能 ...

  4. NGUI UIScrollView - 大量item子项的性能优化

    一.当UIScrollView的以下的包括的子项太多(二三十个之上)时.它的滚动就会变的有些卡不流畅,尤其是在手机上. 对些网上也有非常多的优化它的相关,以下是我的一个优化: 1.将在超出裁剪框的一个 ...

  5. Spring4+SpringMVC+Hibernate4整合入门与实例

    配置web.xml <? xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&q ...

  6. 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页

    步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...

  7. 【转载】高性能IO模型浅析

    服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking IO):默认创建的s ...

  8. @Transactional 无效的解决方案

    1 .在需要事务管理的地方加@Transactional 注解.@Transactional 注解可以被应用于接口定义和接口方法.类定义和类的 public 方法上 . 2 . @Transactio ...

  9. linux centos7 安装常用软件java,node,mysql,Seafile

    linux centos7 安装常用软件java,node,mysql,Seafile 安装压缩解压缩软件 yum install -y unzip zip 安装git yum install -y ...

  10. iptables apache2

    Apache2 iptables 安装指令:sudo apt-get install apache2 2.产生的启动和停止文件是:/etc/init.d/apache2 3.启动:sudo apach ...