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();
 }

 

 

 

 

posted @ 2020-07-19 10:48  江南-烟雨  阅读(966)  评论(0编辑  收藏  举报