ASP.NET MVC之从视图传递数据到控制器
1.数据存储模型Model：此方式未用到数据存储模型Model，仅简单的字符串string型数据传递
前台接收显示数据视图View：
1 <script type="text/javascript"> 2 $(function () { 3 $("#submitButton").click(function () { 4 var data = $('#testData').val(); 5 $.post("/TransportData/GetFrontViewData", { frontViewData: data }, function () { 6 alert("submit data is OK!"); 7 }); 8 }); 9 }) 10 </script> 11 12 <div style="height:300px; width:100%"> 13 14 <div style="margin-left:100px;margin-top:50px;"> 15 16 <input id="testData" type="text" style="width:200px;" /><br /> 17 18 <input id="submitButton" type="button" style="height: 25px; width: 75px;margin-top:35px;" value="submit"> 19 20 </div> 21 22 </div>
后台处理数据控制器Controller：
1 public class TransportDataController : Controller 2 { 3 // 4 // GET: /TransportData/ 5 6 public ActionResult Index() 7 { 8 9 return View(); 10 11 } 12 13 public string GetFrontViewData(string frontViewData) 14 { 15 16 //handle frontViewData code 17 18 return frontViewData; 19 20 } 21 }
2.数据存储模型Model：此方式用到数据存储模型Model
1 public class Model 2 { 3 4 public string rtoNumber { set; get; } 5 6 public string approver { set; get; } 7 8 public string modifier { set; get; } 9 10 public string comment { set; get; } 11 12 }
前台接收显示数据视图View：
1 <div id="container"> 2 3 <table id="table"> 4 5 <tr> 6 7 <td><label>RTONumber</label><input name="rtoNumber" /></td> 8 9 <td><label>Approver</label><input name="approver" /></td> 10 11 <td><label>Modifier</label><input name="modifier" /></td> 12 13 <td><label>Comment</label><textarea name="comment" cols="30" rows="4"></textarea></td> 14 15 </tr> 16 17 </table> 18 19 <input id="submit" type="button" value="submit"/> 20 21 </div>
1 <script type="text/javascript"> 2 3 $(function () { 4 5 $('#submit').click(function () { 6 7 var model = []; 8 9 var subModel = []; 10 11 $.each($("table tr"), function (i, item) { 12 13 var RTONumber = $(item).find("[name=rtoNumber]").val(); 14 15 var Approver = $(item).find("[name=approver]").val(); 16 17 var Modifier = $(item).find("[name=modifier]").val(); 18 19 var Comment = $(item).find("[name=comment]").val(); 20 21 22 23 model.push({ rtoNumber: RTONumber, approver: Approver, modifier: Modifier, comment: Comment, checkBoxValue: subModel }); 24 25 }); 26 27 $.ajax({ 28 29 url: '/TransportModelData/getModelInfo', 30 31 data: JSON.stringify(model), 32 33 type: 'POST', 34 35 contentType: 'application/json;charset=utf-8', 36 37 async: false, 38 39 success: function (data) { 40 41 //window.location.href = "/RequestStatus/RequestDetail?requestID=" + data.RequestID; 42 43 alert("Postting data is over!"); 44 45 } 46 47 }); 48 49 }); 50 51 }); 52 53 </script>
后台处理数据控制器Controller：
1 public class TransportModelDataController : Controller 2 { 3 // 4 // GET: /TransportModelData/ 5 6 public ActionResult Index() 7 { 8 return View(); 9 } 10 11 public ActionResult getModelInfo(List<Model> model) 12 { 13 14 string rtoNumber = model[0].rtoNumber; 15 16 string modifier = model[0].modifier; 17 18 string comment = model[0].comment; 19 20 string approver = model[0].approver; 21 22 return Content(""); 23 } 24 }
3.传递数组到后台
1 //前台请求 2 $(function () { 3 var value = ["C#", "JAVA", "PHP"]; 4 $("input[type='button']").click(function () { 5 $.ajax( 6 { 7 url: "/Home/List", 8 type: "Get", 9 data: { valuelist: value }, 10 traditional: true, //必须设置该属性，否则控制器中获取不到值 11 success: function (data) { 12 alert("Success"); 13 } 14 }); 15 }); 16 17 }); 18 19 //后台代码 20 public ActionResult List(List<string> valuelist) 21 { 22 return View(); 23 }
4. 传递单个Model
1 // 前台code 2 @using (Html.BeginForm()) 3 { 4 <div class="form-group"> 5 @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) 6 <div class="col-md-10"> 7 @Html.EditorFor(model => model.Name) 8 @Html.ValidationMessageFor(model => model.Name) 9 </div> 10 </div> 11 12 <div class="form-group"> 13 @Html.LabelFor(model => model.Price, new { @class = "control-label col-md-2" }) 14 <div class="col-md-10"> 15 @Html.EditorFor(model => model.Price) 16 @Html.ValidationMessageFor(model => model.Price) 17 </div> 18 </div> 19 20 <div class="form-group"> 21 @Html.LabelFor(model => model.Color, new { @class = "control-label col-md-2" }) 22 <div class="col-md-10"> 23 @Html.EditorFor(model => model.Color) 24 @Html.ValidationMessageFor(model => model.Color) 25 </div> 26 </div> 27 28 <div class="form-group"> 29 <div class="col-md-offset-2 col-md-10"> 30 <input type="submit" value="提交" class="btn btn-default" /> 31 </div> 32 </div> 33 34 } 35 36 //实体code 37 public class Products 38 { 39 40 public int Id { get; set; } 41 42 [DisplayName("产品名称")] 43 [Required(ErrorMessage = "此项不能为空")] 44 public string Name { get; set; } 45 46 47 [DisplayName("产品价格")] 48 [Required(ErrorMessage = "此项不能为空")] 49 public string Price { get; set; } 50 51 [DisplayName("产品颜色")] 52 [Required(ErrorMessage = "此项不能为空")] 53 public string Color { get; set; } 54 55 } 56 57 //后台code 58 public ActionResult Add(Products product) 59 { 60 return View(); 61 }
5. 传递多个Model
//前台code $("input[type='submit']").click(function () { var promodes = []; promodes.push({ Id: "0", Name: "手机", Color: "白色",Price:"2499" }); promodes.push({ Id: "1", Name: "耳机", Color: "黑色", Price: "268" }); promodes.push({ Id: "2", Name: "充电器", Color: "黄色",Price: "99" }); $.ajax( { url: "/Home/List", type: "Post", data: JSON.stringify(promodes), //必须对数组进行序列化 contentType:"application/json", //设置contentType的值为"application/json",默认为"application/json" success: function (data) { alert("Success"); } }); }); //后台code public ActionResult List(List<Products> valuelist) { return View(); }
