方式一:
数据存储模型Model:此方式未用到数据存储模型Model,仅简单的字符串string型数据传递
前台接收显示数据视图View:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div style="height:300px; 100%"> <div style="margin-left:100px;margin-top:50px;"> <input id="testData" type="text" style="200px;" /><br /> <input id="submitButton" type="button" style="height: 25px; 75px;margin-top:35px;" value="submit"> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class TransportDataController : Controller { // // GET: /TransportData/ public ActionResult Index() { return View(); } public string GetFrontViewData(string frontViewData) { //handle frontViewData code return frontViewData; } }
传输中数据样式截图:
前台视图View输入测试值:
后台控制器Controller获得此值:
方式二:
(借鉴:刘哇勇的部落格)
数据存储模型Model:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class Model { public string rtoNumber { set; get; } public string approver { set; get; } public string modifier { set; get; } public string comment { set; get; } }
前台接收显示数据视图View:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class TransportModelDataController : Controller { // // GET: /TransportModelData/ public ActionResult Index() { return View(); } public ActionResult getModelInfo(List<Model> model) { string rtoNumber = model[0].rtoNumber; string modifier = model[0].modifier; string comment = model[0].comment; string approver = model[0].approver; return Content(""); } }
传输中数据样式截图:
前台视图View输入测试值:
后台控制器Controller获得此值:
(根据枫上善若水评论改写)
此前辈建议:只传一组数据时,没必要用each遍历。此外,jquery查找元素尽量精确,这样可以提升查找效率!
只修改了View部分代码,其他代码没变:
前台接收显示数据视图View:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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传来的数据的!
本人用到及此,下次遇到再续写,谢谢!(有错有缺陷请指导)
在此添加一段话(给评论的):
首先这篇文章能有这么多评论,是大家真心话!在此谢过技术性评论!!!!!
我写这不是误导新人好吧!说他误导新人,这有点过了吧!你想想看,你技术是大牛型的,大神级的,写的代码再好再优考虑更全面有什么用,新手看了就能会吗!我这是我实践出来的,可行的,我一步一步走出来的,一步一步学来的!最起码新手照抄照搬可以立马就会,有缺陷有错误后期遇到可以慢慢改啊,这就是成长!我承认大神们写得好,可是看不懂不会用,还是没用的,那是够不着的,学习不就是从简单的一步一步来嘛!不可能一口吃个大胖子是不是!
所以大家技术性相关的评论我很欢迎,这对我有好处啊学的更多!非技术性评论的就不要说那些话,想想挺伤人的不是!自己考虑一下!
我是菜鸟,你可以跟我比菜吗?不能!正是因为我写的不好,所以才要写出来,让大家指导的不是吗!大家的评论好的,有建设性的都是我值得学习的...
更多知识分享:微笑空间站