方式一:

数据存储模型Model:此方式未用到数据存储模型Model,仅简单的字符串string型数据传递

前台接收显示数据视图View:

<div style="height:300px; width:100%">
<div style="margin-left:100px;margin-top:50px;">
<input id="testData" type="text" style="width:200px;" /><br />
<input id="submitButton" type="button" style="height: 25px; width: 75px;margin-top:35px;" value="submit">
</div>
</div>
<script type="text/javascript">

        $(function () {
$("#submitButton").click(function () {
var data = $('#testData').val();
$.post("/TransportData/GetFrontViewData", { frontViewData: data }, function () {
alert("submit data is OK!");
});
});
}) </script>

后台处理数据控制器Controller:

public class TransportDataController : Controller
{
//
// GET: /TransportData/ public ActionResult Index()
{
return View();
}
public string GetFrontViewData(string frontViewData)
{
//handle frontViewData code return frontViewData;
}
}

传输中数据样式截图:

  前台视图View输入测试值:

  后台控制器Controller获得此值:

方式二:

(借鉴:刘哇勇的部落格

数据存储模型Model:

public class Model
{
public string rtoNumber { set; get; }
public string approver { set; get; }
public string modifier { set; get; }
public string comment { set; get; }
}

前台接收显示数据视图View:

<div id="container">
<table id="table">
<tr>
<td><label>RTONumber</label><input name="rtoNumber" /></td>
<td><label>Approver</label><input name="approver" /></td>
<td><label>Modifier</label><input name="modifier" /></td>
<td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td>
</tr>
</table>
<input id="submit" type="button" value="submit"/>
</div>
<script type="text/javascript">
$(function () {
$('#submit').click(function () {
var model = [];
var subModel = [];
$.each($("table tr"), function (i, item) {
var RTONumber = $(item).find("[name=rtoNumber]").val();
var Approver = $(item).find("[name=approver]").val();
var Modifier = $(item).find("[name=modifier]").val();
var Comment = $(item).find("[name=comment]").val(); model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment, checkBoxValue: subModel });
});
$.ajax({
url: '/TransportModelData/getModelInfo',
data: JSON.stringify(model),
type: 'POST',
contentType: 'application/json;charset=utf-8',
async: false,
success: function (data) {
//window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
alert("Postting data is over!");
}
});
});
});
</script>

后台处理数据控制器Controller:

public class TransportModelDataController : Controller
{
//
// GET: /TransportModelData/ public ActionResult Index()
{
return View();
}
public ActionResult getModelInfo(List<Model> model)
{
string rtoNumber = model[].rtoNumber;
string modifier = model[].modifier;
string comment = model[].comment;
string approver = model[].approver; return Content("");
} }

传输中数据样式截图:

  前台视图View输入测试值:

  后台控制器Controller获得此值:

(根据枫上善若水评论改写)

此前辈建议:只传一组数据时,没必要用each遍历。此外,jquery查找元素尽量精确,这样可以提升查找效率!

只修改了View部分代码,其他代码没变:

  前台接收显示数据视图View:

<script type="text/javascript">
$(function () {
$('#submit').click(function () {
var model = []; var RTONumber = $("input[name=rtoNumber]").val();
var Approver = $("input[name=approver]").val();
var Modifier = $("input[name=modifier]").val();
var Comment = $("textarea[name=comment]").val(); model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment }); $.ajax({
url: '/TransportModelData/getModelInfo',
data: JSON.stringify(model),
type: 'POST',
contentType: 'application/json;charset=utf-8',
async: false,
success: function (data) {
//window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
alert("Postting data is over!");
}
});
});
});
</script>

测试数据值与结果和方式二相同,如上截图。

(根据约个十月天评论改写)

此前辈建议:前后台Model与View中属性值对应,可以按照约定的数据模型来传递,不用List<>!

只修改了View、Controller部分代码,其他代码没变:

  前台接收显示数据视图View:

<script type="text/javascript">
$(function () {
$('#submit').click(function () {
var RTONumber = $("input[name=rtoNumber]").val();
var Approver = $("input[name=approver]").val();
var Modifier = $("input[name=modifier]").val();
var Comment = $("textarea[name=comment]").val(); $.ajax({
url: '/TransportModelData/getModelInfo',
data: {
rtoNumber:RTONumber,
approver: Approver,
modifier: Modifier,
comment:Comment
},
type: 'POST', dataType:'json',
//contentType: 'application/json;charset=utf-8', async: false,
success: function (data) {
//window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID;
alert("Postting data is over!");
}
});
});
});
</script>

  后台处理数据控制器Controller:

public class TransportModelDataController : Controller
{
//
// GET: /TransportModelData/ public ActionResult Index()
{
return View();
}
//public ActionResult getModelInfo(Model model)
//{
// string rtoNumber = model.rtoNumber;
// string modifier = model.modifier;
// string comment = model.comment;
// string approver = model.approver; // return Content("");
//}
public bool getModelInfo(Model model)
{
bool result = model == null ? false : true;
string rtoNumber = model.rtoNumber;
string modifier = model.modifier;
string comment = model.comment;
string approver = model.approver; return result;
} }

测试数据值与结果和方式二相同,如上截图。

注意:此方式需注意的地方是以前“contentType:'application/json;charset=utf-8'”改换成了“dataType:'json'”,因为后台Controller中的接收数据方法返回值类型由“ActionResult”改换成了“bool”。如果不改“contentType:'application/json;charset=utf-8'”为“dataType:'json'”的话,后台Controller中是无法得到前台View传来的数据的!

本人用到及此,下次遇到再续写,谢谢!(有错有缺陷请指导)

在此添加一段话(给评论的):

首先这篇文章能有这么多评论,是大家真心话!在此谢过技术性评论!!!!!

我写这不是误导新人好吧!说他误导新人,这有点过了吧!你想想看,你技术是大牛型的,大神级的,写的代码再好再优考虑更全面有什么用,新手看了就能会吗!我这是我实践出来的,可行的,我一步一步走出来的,一步一步学来的!最起码新手照抄照搬可以立马就会,有缺陷有错误后期遇到可以慢慢改啊,这就是成长!我承认大神们写得好,可是看不懂不会用,还是没用的,那是够不着的,学习不就是从简单的一步一步来嘛!不可能一口吃个大胖子是不是!

所以大家技术性相关的评论我很欢迎,这对我有好处啊学的更多!非技术性评论的就不要说那些话,想想挺伤人的不是!自己考虑一下!

我是菜鸟,你可以跟我比菜吗?不能!正是因为我写的不好,所以才要写出来,让大家指导的不是吗!大家的评论好的,有建设性的都是我值得学习的...

更多知识分享:微笑空间站

ASP.NET MVC中从前台页面视图(View)传递数据到后台控制器(Controller)方式的更多相关文章

  1. ASP.NET MVC中的cshtml页面中的下拉框的使用

    ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

  2. 在Asp.net MVC中访问静态页面

    有时候由于一些特殊的需要,我们需要在MVC中访问HTML页面,假如您将这个页面放在Views中的话,去访问将会收到一个404,但是放在Views外面的目录则不受此限制. 那么我们就来解决View里面的 ...

  3. 在Asp.Net MVC中实现计算页面执行时间及简单流量统计

    引用www.rsion.com.dll进您的asp.net MVC项目本人不才,源代码中有详细说明,查看demo修改HomeController public class HomeController ...

  4. 在ASP.NET MVC中实现一种不同于平常的三级联动、级联方式, 可用于城市、车型选择等多层级联场景

    三级或多级联动的场景经常会碰到,比如省.市.区,比如品牌.车系.车型,比如类别的多级联动......我们首先想到的是用三个select来展示,这是最通常的做法.但在另外一些场景中,比如确定搜索条件的时 ...

  5. ASP.NET MVC中如何实现页面跳转

    1,最简单的方式:超链接 以下分别是连接到HomeController控制器下的SharpL动作方法,以及百度首页.代码如下: <a href="Home\SharpL"&g ...

  6. ASP.NET MVC中,动态处理页面静态化

    首先解释一下什么是动态处理页面静态化 对于需要静态化的页面,第一次访问某个Action时,会先执行Action,并在页面渲染后向Response和服务器中网站的目录下都写入需要返回的html,而第二次 ...

  7. ASP.NET MVC中,动态处理页面静态化 【转载】

    首先解释一下什么是动态处理页面静态化 对于需要静态化的页面,第一次访问某个Action时,会先执行Action,并在页面渲染后向Response和服务器中网站的目录下都写入需要返回的html,而第二次 ...

  8. 在ASP.NET MVC中加载部分视图的方法及差别

    在视图里有多种方法可以加载部分视图,包括Partial() .Action().RenderPartial().RenderAction().RenderPage()方法.下面说明一下这些方法的差别. ...

  9. ASP.NET MVC中,前台DropDownList传值给后台。

    List<SelectListItem> ZH = new List<SelectListItem>(); ZH.Add(new SelectListItem { Text = ...

随机推荐

  1. oracle调试存储过程

    跟着楼主一起来测试存储过程吧: 1.右键要测试的存储过程 出现如下提示框 2.填写参数 3.点击开始,如下操作 over,就是这么简单 -------------------------------- ...

  2. [转]linux(centos)搭建SVN服务器

    转自:http://blog.163.com/longsu2010@yeah/blog/static/173612348201202114212933/   安装步骤如下: 1.yum install ...

  3. POJ 1753 (开关问题+高斯消元法)

    题目链接: http://poj.org/problem?id=1753 题目大意:一堆格子,或白或白.每次可以把一个改变一个格子颜色,其上下左右四个格子颜色也改变.问最后使格子全部白或全部黑,求最小 ...

  4. java.io包详细解说

    转自:http://hzxdark.iteye.com/blog/40133 hzxdark的博客 我不知道各位是师弟师妹们学java时是怎样的,就我的刚学java时的感觉,java.io包是最让我感 ...

  5. The Result of an Interesting and Useful Program on Floating Numbers

    The program: class Program { static void Main() { const double infinity = double.PositiveInfinity; c ...

  6. 当编译CCBReader时出现 “ CCBAnimationManager.m Use of undeclared identifier 'other‘ ” 解决方法

    第一种解决方法是去github上下载最新的CCBReader 第二种解决方法是把other替换成self.inner 建议用新版本的

  7. git的几种回滚 git revert 和 git reset的区别

    git的几种回滚 git revert 和 git reset的区别:强烈建议:对HEAD不熟的话最好不要用HEAD,直接用commitID吧,我遇到的问题:reset HEAD~1之后,可能是别人提 ...

  8. iOS 网络框架编写总结

    一,常用 1> 不错的处理接收到的网络图片数据的方法 id img= ISNSNULL(pic)?nil:[pic valueForKey:@"img"]; NSString ...

  9. thinkphp常用Config.php配置项

    <?php return array( //'配置项'=>'配置值' 'DB_HOST' => 'localhost', 'DB_USER' => 'root', 'DB_PW ...

  10. lua日期与时间操作

    os.date("%Y%m%d%H%M%S", os.time()) <== 20160405141211 yyyyMMddHHmmss os.time()          ...