ASP.NET MVC中从前台页面视图（View）传递数据到后台控制器（Controller）方式
分类:
IT文章
•
2023-12-21 10:57:31
方式一：
数据存储模型Model：此方式未用到数据存储模型Model，仅简单的字符串string型数据传递
前台接收显示数据视图View：
![]()
<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>
View Code
![]()
<script type="text/javascript">
$(function () {
$("#submitButton").click(function () {
var data = $('#testData').val();
$.post("/TransportData/GetFrontViewData", { frontViewData: data }, function () {
alert("submit data is OK!");
});
});
})
</script>
View Code
后台处理数据控制器Controller：
![]()
public class TransportDataController : Controller
{
//
// GET: /TransportData/
public ActionResult Index()
{
return View();
}
public string GetFrontViewData(string frontViewData)
{
//handle frontViewData code
return frontViewData;
}
}
View Code
传输中数据样式截图：
前台视图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 Code
前台接收显示数据视图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>
View Code
![]()
<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>
View Code
后台处理数据控制器Controller：
![]()
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 Code
传输中数据样式截图：
前台视图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>
View Code
测试数据值与结果和方式二相同，如上截图。
（根据约个十月天评论改写）
此前辈建议：前后台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>
View Code
后台处理数据控制器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;
}
}
View Code
测试数据值与结果和方式二相同，如上截图。
注意：此方式需注意的地方是以前“contentType:'application/json;charset=utf-8'”改换成了“dataType:'json'”，因为后台Controller中的接收数据方法返回值类型由“ActionResult”改换成了“bool”。如果不改“contentType:'application/json;charset=utf-8'”为“dataType:'json'”的话，后台Controller中是无法得到前台View传来的数据的！
本人用到及此，下次遇到再续写，谢谢！（有错有缺陷请指导）
在此添加一段话（给评论的）：
首先这篇文章能有这么多评论，是大家真心话！在此谢过技术性评论！！！！！
我写这不是误导新人好吧！说他误导新人，这有点过了吧！你想想看，你技术是大牛型的，大神级的，写的代码再好再优考虑更全面有什么用，新手看了就能会吗！我这是我实践出来的，可行的，我一步一步走出来的，一步一步学来的！最起码新手照抄照搬可以立马就会，有缺陷有错误后期遇到可以慢慢改啊，这就是成长！我承认大神们写得好，可是看不懂不会用，还是没用的，那是够不着的，学习不就是从简单的一步一步来嘛！不可能一口吃个大胖子是不是！
所以大家技术性相关的评论我很欢迎，这对我有好处啊学的更多！非技术性评论的就不要说那些话，想想挺伤人的不是！自己考虑一下！
我是菜鸟，你可以跟我比菜吗？不能！正是因为我写的不好，所以才要写出来，让大家指导的不是吗！大家的评论好的，有建设性的都是我值得学习的...
更多知识分享：微笑空间站
