【ASP.NET MVC】View与Controller之间传递数据

来源:互联网 发布:windows 预览体验成员 编辑:程序博客网 时间:2024/05/16 05:29

1   概述

本篇文章主要从操作上简要分析Controller<=>View之间相互传值,关于页面之间传值,如果感兴趣,可参考我另外一篇文章ASP.NET 页面之间传值的几种方式 。

Controller=》View:Model,ViewBag,ViewData,TempData,ViewBag=>ViewData,ViewData=>ViewBag,ViewModel,JqGrid,AJAX+第三方插件等;

View=》Controller:QueryString,Form,FormCollection,Ajax,自定义模型绑定等;

2   Controller向View传递数据

2.1  Model传递数据

(1)DB表:

(2)Model

 1 public class CustomerInfo 2     { 3         public string EmployeeID { get; set; } 4         public string EmployeeName { get; set; } 5         public string EmployeeMajor { get; set; } 6         public string EmployeeDepartment { get; set; } 7         public string EmployeeTel { get; set; } 8         public string EmployeeEmail { get; set; } 9         public string EmployeeJiGuan { get; set; }10         public string EmployeeAddress { get; set; }11         public string EmployeePosition { get; set; }12         public string EmployeeBirthday { get; set; }13     }

(3)Controller

a.控制器action

public ActionResult ModelDataToView()        {            //定义集合            List<CustomerInfo> ltPI = new List<CustomerInfo>();            DataTable dt = GetCustomerInfoToDataTable();            for (int i = 0; i < dt.Rows.Count; i++)            {                CustomerInfo custInfo = new CustomerInfo();                custInfo.EmployeeID = dt.Rows[i]["EmployeeID"].ToString();                custInfo.EmployeeName = dt.Rows[i]["EmployeeName"].ToString();                custInfo.EmployeeMajor = dt.Rows[i]["EmployeeMajor"].ToString();                custInfo.EmployeeDepartment = dt.Rows[i]["EmployeeDepartment"].ToString();                custInfo.EmployeeTel = dt.Rows[i]["EmployeeTel"].ToString();                custInfo.EmployeeEmail = dt.Rows[i]["EmployeeEmail"].ToString();                custInfo.EmployeeJiGuan = dt.Rows[i]["EmployeeJiGuan"].ToString();                custInfo.EmployeeAddress = dt.Rows[i]["EmployeeAddress"].ToString();                custInfo.EmployeePosition = dt.Rows[i]["EmployeePosition"].ToString();                custInfo.EmployeeBirthday = dt.Rows[i]["EmployeeBirthday"].ToString();                ltPI.Add(custInfo);            }          return View("Index",ltPI);        }

b.ADO.NET 获取CustomerInfo数据

 1 //获取用户实体 2         public DataTable GetCustomerInfoToDataTable() 3         { 4             //连接字符串 5             string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString; 6             string strSql = @"SELECT * FROM EmployeeInfo"; 7             using (SqlConnection conn = new SqlConnection(conStr)) 8             { 9                 conn.Open();10                 SqlCommand cmd = new SqlCommand(strSql, conn);11                 cmd.ExecuteNonQuery();12                 SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);13                 DataSet ds = new DataSet();14                 sda.Fill(ds,"CustomerInfo");15                 return ds.Tables["CustomerInfo"];16             }17         }

(4)View

 1 @{ 2     Layout = null; 3 } 4  5 <!DOCTYPE html> 6  7 <html> 8 <head> 9     <meta name="viewport" content="width=device-width" />10     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />11     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />12     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />13     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>14     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>15     <title>Index</title>16 </head>17 <body>18     <div class="table-responsive">19        <table class="table table-striped">20                 <thead>21                    <tr>22                         <td>员工ID</td>23                         <td>员工姓名</td>24                         <td>员工专业</td>25                         <td>员工部门</td>26                         <td>员工电话</td>27                         <td>员工邮件</td>28                         <td>员工籍贯</td>29                         <td>员工住址</td>30                         <td>员工职位</td>31                         <td>员工生日</td>32                     </tr>33                 </thead>34                 <tbody>35                     @foreach (var item in Model)36                     {37                         <tr>38                             <td>@item.EmployeeID</td>39                             <td>@item.EmployeeName</td>40                             <td>@item.EmployeeMajor</td>41                             <td>@item.EmployeeDepartment</td>42                             <td>@item.EmployeeTel</td>43                             <td>@item.EmployeeEmail</td>44                             <td>@item.EmployeeJiGuan</td>45                             <td>@item.EmployeeAddress</td>46                             <td>@item.EmployeePosition</td>47                             <td>@item.EmployeeBirthday</td>48                         </tr>49                     }50                 </tbody>52             </table>53    </div>54 </body>55 </html>

(5)结果

2.2  ViewData传递数据

(1)DB表:

(2)Model

 1 public class CustomerInfo 2     { 3         public string EmployeeID { get; set; } 4         public string EmployeeName { get; set; } 5         public string EmployeeMajor { get; set; } 6         public string EmployeeDepartment { get; set; } 7         public string EmployeeTel { get; set; } 8         public string EmployeeEmail { get; set; } 9         public string EmployeeJiGuan { get; set; }10         public string EmployeeAddress { get; set; }11         public string EmployeePosition { get; set; }12         public string EmployeeBirthday { get; set; }13     }

(3)Controller

a.控制器action

 1  //ViewData传递 2         public ActionResult ViewDataToView() 3         { 4             List<CustomerInfo> ltPI = new List<CustomerInfo>(); 5             DataTable dt = GetCustomerInfoToDataTable(); 6             for (int i = 0; i < dt.Rows.Count; i++) 7             { 8                 CustomerInfo custInfo = new CustomerInfo(); 9                 custInfo.EmployeeID = dt.Rows[i]["EmployeeID"].ToString();10                 custInfo.EmployeeName = dt.Rows[i]["EmployeeName"].ToString();11                 custInfo.EmployeeMajor = dt.Rows[i]["EmployeeMajor"].ToString();12                 custInfo.EmployeeDepartment = dt.Rows[i]["EmployeeDepartment"].ToString();13                 custInfo.EmployeeTel = dt.Rows[i]["EmployeeTel"].ToString();14                 custInfo.EmployeeEmail = dt.Rows[i]["EmployeeEmail"].ToString();15                 custInfo.EmployeeJiGuan = dt.Rows[i]["EmployeeJiGuan"].ToString();16                 custInfo.EmployeeAddress = dt.Rows[i]["EmployeeAddress"].ToString();17                 custInfo.EmployeePosition = dt.Rows[i]["EmployeePosition"].ToString();18                 custInfo.EmployeeBirthday = dt.Rows[i]["EmployeeBirthday"].ToString();19                 ltPI.Add(custInfo);20                 ViewData["CustomerInfo"] = ltPI;21             }22             return View();23         }

 b.ADO.NET 获取CustomerInfo数据

 1 //获取用户实体 2         public DataTable GetCustomerInfoToDataTable() 3         { 4             //连接字符串 5             string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString; 6             string strSql = @"SELECT * FROM EmployeeInfo"; 7             using (SqlConnection conn = new SqlConnection(conStr)) 8             { 9                 conn.Open();10                 SqlCommand cmd = new SqlCommand(strSql, conn);11                 cmd.ExecuteNonQuery();12                 SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);13                 DataSet ds = new DataSet();14                 sda.Fill(ds,"CustomerInfo");15                 return ds.Tables["CustomerInfo"];16             }17         }

(4)View

 1 @using MVCCrud.Areas.JqGridDemo.Models 2  3  4 @{ 5     Layout = null; 6 } 7  8 <!DOCTYPE html> 9 10 <html>11 <head>12     <meta name="viewport" content="width=device-width" />13     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />14     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />15     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />16     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>17     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>18     <title>ViewDataToView</title>19 </head>20 <body>21     <div class="table-responsive">22         <table class="table table-striped">23             <thead>24                 <tr>25                     <td>员工ID</td>26                     <td>员工姓名</td>27                     <td>员工专业</td>28                     <td>员工部门</td>29                     <td>员工电话</td>30                     <td>员工邮件</td>31                     <td>员工籍贯</td>32                     <td>员工住址</td>33                     <td>员工职位</td>34                     <td>员工生日</td>35                 </tr>36             </thead>37             <tbody>38                 @foreach (var item in (List<CustomerInfo>)ViewData["CustomerInfo"])39                 {40                     <tr>41                         <td>@item.EmployeeID</td>42                         <td>@item.EmployeeName</td>43                         <td>@item.EmployeeMajor</td>44                         <td>@item.EmployeeDepartment</td>45                         <td>@item.EmployeeTel</td>46                         <td>@item.EmployeeEmail</td>47                         <td>@item.EmployeeJiGuan</td>48                         <td>@item.EmployeeAddress</td>49                         <td>@item.EmployeePosition</td>50                         <td>@item.EmployeeBirthday</td>51                     </tr>52                 }53 54             </tbody>55         </table>56     </div>57 </body>58 </html>

(5)结果

2.3  ViewBag传递数据

(1)DB表: 

(2)Model

 1 public class CustomerInfo 2     { 3         public string EmployeeID { get; set; } 4         public string EmployeeName { get; set; } 5         public string EmployeeMajor { get; set; } 6         public string EmployeeDepartment { get; set; } 7         public string EmployeeTel { get; set; } 8         public string EmployeeEmail { get; set; } 9         public string EmployeeJiGuan { get; set; }10         public string EmployeeAddress { get; set; }11         public string EmployeePosition { get; set; }12         public string EmployeeBirthday { get; set; }13     }

(3)Controller

a.控制器action

 1 //ViewBag传递 2         public ActionResult ViewBagDataToView() 3         { 4             List<CustomerInfo> ltPI = new List<CustomerInfo>(); 5             DataTable dt = GetCustomerInfoToDataTable(); 6             for (int i = 0; i < dt.Rows.Count; i++) 7             { 8                 CustomerInfo custInfo = new CustomerInfo(); 9                 custInfo.EmployeeID = dt.Rows[i]["EmployeeID"].ToString();10                 custInfo.EmployeeName = dt.Rows[i]["EmployeeName"].ToString();11                 custInfo.EmployeeMajor = dt.Rows[i]["EmployeeMajor"].ToString();12                 custInfo.EmployeeDepartment = dt.Rows[i]["EmployeeDepartment"].ToString();13                 custInfo.EmployeeTel = dt.Rows[i]["EmployeeTel"].ToString();14                 custInfo.EmployeeEmail = dt.Rows[i]["EmployeeEmail"].ToString();15                 custInfo.EmployeeJiGuan = dt.Rows[i]["EmployeeJiGuan"].ToString();16                 custInfo.EmployeeAddress = dt.Rows[i]["EmployeeAddress"].ToString();17                 custInfo.EmployeePosition = dt.Rows[i]["EmployeePosition"].ToString();18                 custInfo.EmployeeBirthday = dt.Rows[i]["EmployeeBirthday"].ToString();19                 ltPI.Add(custInfo);20                 ViewBag.CustomerInfo = ltPI;21             }22             return View();23         }

b.ADO.NET 获取CustomerInfo数据

 1 //获取用户实体 2         public DataTable GetCustomerInfoToDataTable() 3         { 4             //连接字符串 5             string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString; 6             string strSql = @"SELECT * FROM EmployeeInfo"; 7             using (SqlConnection conn = new SqlConnection(conStr)) 8             { 9                 conn.Open();10                 SqlCommand cmd = new SqlCommand(strSql, conn);11                 cmd.ExecuteNonQuery();12                 SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);13                 DataSet ds = new DataSet();14                 sda.Fill(ds,"CustomerInfo");15                 return ds.Tables["CustomerInfo"];16             }17         }

(4)View

 1 @{ 2     Layout = null; 3 } 4  5 <!DOCTYPE html> 6  7 <html> 8 <head> 9     <meta name="viewport" content="width=device-width" />10     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />11     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />12     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />13     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>14     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>15     <title>ViewBagDataToView</title>16 </head>17 <body>18     <div class="table-responsive">19         <table class="table table-striped">20             <thead>21                 <tr>22                     <td>员工ID</td>23                     <td>员工姓名</td>24                     <td>员工专业</td>25                     <td>员工部门</td>26                     <td>员工电话</td>27                     <td>员工邮件</td>28                     <td>员工籍贯</td>29                     <td>员工住址</td>30                     <td>员工职位</td>31                     <td>员工生日</td>32                 </tr>33             </thead>34             <tbody>35                 @foreach (var item in ViewBag.CustomerInfo)36                 {37                     <tr>38                         @*<td>@item.Em</td>*@39                         <td>@item.EmployeeName</td>40                         <td>@item.EmployeeMajor</td>41                         <td>@item.EmployeeDepartment</td>42                         <td>@item.EmployeeTel</td>43                         <td>@item.EmployeeEmail</td>44                         <td>@item.EmployeeJiGuan</td>45                         <td>@item.EmployeeAddress</td>46                         <td>@item.EmployeePosition</td>47                         <td>@item.EmployeeBirthday</td>48                     </tr>49                 }50 51             </tbody>52         </table>53 54     </div>55 </body>56 </html>

(4)View

 1 @using MVCCrud.Areas.JqGridDemo.Models 2  3 @{ 4     Layout = null; 5 } 6  7 <!DOCTYPE html> 8  9 <html>10 <head>11     <meta name="viewport" content="width=device-width" />12     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />13     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />14     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />15     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>16     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>17     <title>ViewBagDataToView</title>18 </head>19 <body>20     <div class="table-responsive">21         <table class="table table-striped">22             <thead>23                 <tr>24                     <td>员工ID</td>25                     <td>员工姓名</td>26                     <td>员工专业</td>27                     <td>员工部门</td>28                     <td>员工电话</td>29                     <td>员工邮件</td>30                     <td>员工籍贯</td>31                     <td>员工住址</td>32                     <td>员工职位</td>33                     <td>员工生日</td>34                 </tr>35             </thead>36             <tbody>37                 @foreach (var item in (List<CustomerInfo>)TempData["CustomerInfo"])38                 {39                     <tr>40                         <td>@item.EmployeeID</td>41                         <td>@item.EmployeeName</td>42                         <td>@item.EmployeeMajor</td>43                         <td>@item.EmployeeDepartment</td>44                         <td>@item.EmployeeTel</td>45                         <td>@item.EmployeeEmail</td>46                         <td>@item.EmployeeJiGuan</td>47                         <td>@item.EmployeeAddress</td>48                         <td>@item.EmployeePosition</td>49                         <td>@item.EmployeeBirthday</td>50                     </tr>51                 }52 53             </tbody>54         </table>55     </div>56 </body>57 </html>

(5)结果

2.4  TempData传递数据

(1)DB表: 

(2)Model

 1  public class CustomerInfo 2     { 3         public string EmployeeID { get; set; } 4         public string EmployeeName { get; set; } 5         public string EmployeeMajor { get; set; } 6         public string EmployeeDepartment { get; set; } 7         public string EmployeeTel { get; set; } 8         public string EmployeeEmail { get; set; } 9         public string EmployeeJiGuan { get; set; }10         public string EmployeeAddress { get; set; }11         public string EmployeePosition { get; set; }12         public string EmployeeBirthday { get; set; }13     }

(3)Controller

a.action

 1  //TempData传递数据 2         public ActionResult TempDataToView() 3         { 4             List<CustomerInfo> ltPI = new List<CustomerInfo>(); 5             DataTable dt = GetCustomerInfoToDataTable(); 6             for (int i = 0; i < dt.Rows.Count; i++) 7             { 8                 CustomerInfo custInfo = new CustomerInfo(); 9                 custInfo.EmployeeID = dt.Rows[i]["EmployeeID"].ToString();10                 custInfo.EmployeeName = dt.Rows[i]["EmployeeName"].ToString();11                 custInfo.EmployeeMajor = dt.Rows[i]["EmployeeMajor"].ToString();12                 custInfo.EmployeeDepartment = dt.Rows[i]["EmployeeDepartment"].ToString();13                 custInfo.EmployeeTel = dt.Rows[i]["EmployeeTel"].ToString();14                 custInfo.EmployeeEmail = dt.Rows[i]["EmployeeEmail"].ToString();15                 custInfo.EmployeeJiGuan = dt.Rows[i]["EmployeeJiGuan"].ToString();16                 custInfo.EmployeeAddress = dt.Rows[i]["EmployeeAddress"].ToString();17                 custInfo.EmployeePosition = dt.Rows[i]["EmployeePosition"].ToString();18                 custInfo.EmployeeBirthday = dt.Rows[i]["EmployeeBirthday"].ToString();19                 ltPI.Add(custInfo);20                 TempData["CustomerInfo"] = ltPI;21             }22             return View();23         }

b.ADO.NET 获取CustomerInfo数据

 1  //获取用户实体 2         public DataTable GetCustomerInfoToDataTable() 3         { 4             //连接字符串 5             string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString; 6             string strSql = @"SELECT * FROM EmployeeInfo"; 7             using (SqlConnection conn = new SqlConnection(conStr)) 8             { 9                 conn.Open();10                 SqlCommand cmd = new SqlCommand(strSql, conn);11                 cmd.ExecuteNonQuery();12                 SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);13                 DataSet ds = new DataSet();14                 sda.Fill(ds,"CustomerInfo");15                 return ds.Tables["CustomerInfo"];16             }17         }

(5)结果

2.5 第三方插件

JqGrid插件:

控制器:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6  7 namespace MVCCrud.Areas.JqGridDemo.Controllers 8 { 9     public class JqGridCustomerInfoController : Controller10     {11         // GET: JqGridDemo/JqGridCustomerInfo12         public ActionResult Index()13         {14             return View();15         }16     }17 }

视图:

  1 @{  2     Layout = null;  3 }  4   5 <!DOCTYPE html>  6   7 <html>  8 <head>  9     <meta name="viewport" content="width=device-width" /> 10     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" /> 11     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.theme.css" rel="stylesheet" /> 12     <link href="~/OuterLibrary/tonytomov-jqGrid-6659334/css/ui.jqgrid.css" rel="stylesheet" /> 13     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script> 14     <script src="~/OuterLibrary/tonytomov-jqGrid-6659334/js/i18n/grid.locale-en.js"></script> 15     <script src="~/OuterLibrary/tonytomov-jqGrid-6659334/js/jquery.jqGrid.js"></script> 16     <title>Index</title> 17 </head> 18 <body> 19     <div>  20         <div class="main" id="main"> 21             <table id="JqGrid-table"></table> 22             <div id="JqGrid-pager"></div> 23        </div> 24        <script type="text/javascript"> 25            $("#JqGrid-table").jqGrid({ 26                 url: "/JqGridDemo/JsonDemo/Index",    27                 datatype: "json",  28                 height: 150,  29                 mtype: "Get",  30                 colNames: ['员工ID', '员工姓名', '员工专业', '员工部门', '员工电话','员工邮件','员工籍贯','员工住址','员工职位','员工生日'], 31                 colModel: [{ 32                     name: 'EmployeeID', 33                     index: 'EmployeeID',  34                     key: true,  35                     width: 100, 36                     editable: false, 37                     editoptions: { 38                         size: "20", 39                         maxlength: "30" 40                     } 41                 }, { 42                     name: 'EmployeeName', 43                     index: 'EmployeeName', 44                     width: 200,  45                     editable: false, 46                     edittype: false,  47                     editoptions: { 48                         size: "20", 49                         maxlength: "30" 50                     } 51                     }, { 52                         name: 'EmployeeMajor', 53                         index: 'EmployeeMajor', 54                         width: 200, 55                         editable: false, 56                         edittype: false, 57                         editoptions: { 58                             size: "20", 59                             maxlength: "30" 60                         } 61                     }, 62                     { 63                         name: 'EmployeeDepartment', 64                         index: 'EmployeeDepartment', 65                         width: 200, 66                         editable: false, 67                         edittype: false, 68                         editoptions: { 69                             size: "20", 70                             maxlength: "30" 71                         } 72                     }, { 73                         name: 'EmployeeTel', 74                         index: 'EmployeeTel', 75                         width: 200, 76                         editable: false, 77                         edittype: false, 78                         editoptions: { 79                             size: "20", 80                             maxlength: "30" 81                         } 82                     }, { 83                         name: 'EmployeeEmail', 84                         index: 'EmployeeEmail', 85                         width: 200, 86                         editable: false, 87                         edittype: false, 88                         editoptions: { 89                             size: "20", 90                             maxlength: "30" 91                         } 92                     }, { 93                         name: 'EmployeeJiGuan', 94                         index: 'EmployeeJiGuan', 95                         width: 200, 96                         editable: false, 97                         edittype: false, 98                         editoptions: { 99                             size: "20",100                             maxlength: "30"101                         }102                     }, {103                         name: 'EmployeeAddress',104                         index: 'EmployeeAddress',105                         width: 200,106                         editable: false,107                         edittype: false,108                         editoptions: {109                             size: "20",110                             maxlength: "30"111                         }112                     }, {113                         name: 'EmployeePosition',114                         index: 'EmployeePosition',115                         width: 200,116                         editable: false,117                         edittype: false,118                         editoptions: {119                             size: "20",120                             maxlength: "30"121                         }122                     }, {123                         name: 'EmployeeBirthday',124                         index: 'EmployeeBirthday',125                         width: 200,126                         editable: false,127                         edittype: false,128                         editoptions: {129                             size: "20",130                             maxlength: "30"131                         }132                     },  ],133                 viewrecords: true, 134                 rowNum: 10, 135                 rowList: [10, 20, 30], 136                 pager: '#JqGrid-pager', 137                 altRows: true, 138                 multiselect: true, 139                 multiboxonly: true, 140                 caption: "员工信息表", 141                 autowidth: true 142             });143              jQuery("#grid-table").jqGrid('navGrid', '#grid-pager', { edit: true, add: true, del: true });144         </script>145     </div>146 </body>147 </html>

控制器:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Helpers; 6 using System.Web.Mvc; 7 using System.Web.Script.Serialization; 8  9 namespace MVCCrud.Areas.JqGridDemo.Controllers10 {11     public class JsonDemoController : Controller12     {13         // GET: JqGridDemo/JsonDemo14         15         public ActionResult Index()16         {17             var jsondata = new[]18             {19                new{20                     EmployeeID = "NX0001",21                     EmployeeName = "张三",22                     EmployeeMajor = "金融学",23                     EmployeeDepartment = "风投部门",24                     EmployeeTel = "XXX",25                     EmployeeEmail="XXX@qq.com",26                     EmployeeJiGuan="上海",27                     EmployeeAddress="上海浦东新区",28                     EmployeePosition="高级软件工程师",29                     EmployeeBirthday="XXX",30                   }31             };32              return Json(jsondata,JsonRequestBehavior.AllowGet);33         }34     }35 }

result:

关于第三方插件,类型比较多,如Bootstrap-table等,希望广大读者朋友去研究。JqGrid,其功能很强大,在本篇文章中,仅仅是提及,下篇文章将重点分析JqGrid,与广大读者朋友分享。

2.6 ViewBag=》ViewData

2.7 ViewData=》ViewBag

2.8 ViewModel

 留给读者朋友们去研究。。。。。。

2.9 Ajax+第三方插件(JqGrid,BootStrap-table)

留给读者朋友们去研究。。。。。。

3  View向Controller传递数据

3.1  QueryString

controller:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6  7 namespace MVCCrud.Areas.JqGridDemo.Controllers 8 { 9     public class QueryStringController : Controller10     {11         // GET: JqGridDemo/QueryString12         public ActionResult Index()13         {14             return View();15         }16 17         public void GetParamsFromToView(string EmployeeID,string EmployeeName)18         {19             EmployeeID = Request["EmployeeID"].ToString();20             EmployeeName= Request["EmployeeName"].ToString();21         }22     }23 }

View:

 1 @{ 2     Layout = null; 3 } 4  5 <!DOCTYPE html> 6  7 <html> 8 <head> 9     <meta name="viewport" content="width=device-width" />10     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>11     <title>Index</title>12     <script>13         $(function () {14             $('#btnQueryString').click(function () {15                 //url不区分大小写16                 location.href ="/JqGridDemo/QueryString/GetParamsFromToView?EmployeeID=NX001&EmployeeName=张三";17             });18         });19     </script>20     <style>21         #btnQueryString{22             width:320px;23             height:30px;24         }25     </style>26     27 </head>28 <body>29     <div>30         <button id="btnQueryString">QueryString向Controller传递值</button>31     </div>32 </body>33 </html>

result:

3.2  AJax

controller:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6  7 namespace MVCCrud.Areas.JqGridDemo.Controllers 8 { 9     public class AjaxDataController : Controller10     {11         // GET: JqGridDemo/AjaxData12         public ActionResult Index()13         {14             return View();15         }16 17         //action Receiving data from Ajax18         public void GetParamsFromAjax(string EmployeeID, string EmployeeName)19         {20 21         }22     }23 }

View:

 1 @{ 2     Layout = null; 3 } 4  5 <!DOCTYPE html> 6  7 <html> 8 <head> 9     <meta name="viewport" content="width=device-width" />10     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>11     <title>Index</title>12     <script>13         $(function () {14             $('#btnAjax').click(function () {15                 $.ajax({16                     url: "/JqGridDemo/AjaxData/GetParamsFromAjax",17                     type:"GET",18                     data:{EmployeeID:'NX001',EmployeeName:'张三'},19                     error: function(message) {20                         alert('error!');21                     }22                 });23             })24         })25     </script>26 </head>27 <body>28     <button id="btnAjax">Ajax传递参数</button>29 </body>30 </html>

或者

 1 @{ 2     Layout = null; 3 } 4  5 <!DOCTYPE html> 6  7 <html> 8 <head> 9     <meta name="viewport" content="width=device-width" />10     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>11     <title>Index</title>12     <script>13         $(function () {14             $('#btnAjax').click(function () {15                 $.ajax({16                     url: "/JqGridDemo/AjaxData/GetParamsFromAjax" +"?EmployeeID='NX001'&EmployeeName='张三",17                     type:"GET",18                     //data:{EmployeeID:'NX001',EmployeeName:'张三'},19                     error: function(message) {20                         alert('error!');21                     }22                 });23             })24         })25     </script>26 </head>27 <body>28     <button id="btnAjax">Ajax传递参数</button>29 </body>30 </html>

result:

3.3  Form传递

controller:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6  7 namespace MVCCrud.Areas.JqGridDemo.Controllers 8 { 9     public class FormTransferDataController : Controller10     {11         // GET: JqGridDemo/FormTransferData12         public ActionResult Index()13         {14             return View();15         }16 17         //action Receiving data from Form18         public void GetParamsFromForm(string EmployeeID, string EmployeeName)19         {20 21         }22     }23 }

View:

 1 @{ 2     Layout = null; 3 } 4  5 <!DOCTYPE html> 6  7 <html> 8 <head> 9     <meta name="viewport" content="width=device-width" />10     <title>Index</title>11 </head>12 <body>13     <form action="/JqGridDemo/FormTransferData/GetParamsFromForm" method="get">14         员工ID:<input type="text" name="EmployeeID" />15         员工姓名:<input type="text" name="EmployeeName" />16         <input type="submit" name="btnFormTransferData" value="Form表单传递数据" />17     </form>18 </body>19 </html>

result:

3.4  FormCollection

controller:

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6  7 namespace MVCCrud.Areas.JqGridDemo.Controllers 8 { 9     public class FormCollectionTransferDataController : Controller10     {11         // GET: JqGridDemo/FormCollectionTransferData12         public ActionResult Index()13         {14             return View();15         }16 17         //action Receiving data from FormCollection18         public void GetParamsFromFormCollection(FormCollection fc)19         {20             string EmployeeID = fc["EmployeeID"].ToString();21             string EmployeeName = fc["EmployeeName"].ToString();22         }23     }24 }

view:

 1 @{ 2     Layout = null; 3 } 4  5 <!DOCTYPE html> 6  7 <html> 8 <head> 9     <meta name="viewport" content="width=device-width" />10     <title>Index</title>11 </head>12 <body>13     <div> 14         @using (Html.BeginForm("GetParamsFromFormCollection", "FormCollectionTransferData"))15         {16             @Html.TextBox("EmployeeID","员工ID");17             @Html.TextBox("EmployeeName","员工姓名");18             <input type="submit" value="FormCollection传值"/>19         }20     </div>21 </body>22 </html>

result:

3.5 自定义模型绑定

敬请期待,下篇文章与大家一起分享。。。。

4   版权

 

  • 感谢您的阅读,若有不足之处,欢迎指教,共同学习、共同进步。
  • 博主网址:http://www.cnblogs.com/wangjiming/。
  • 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的,大部分为原创。
  • 如您喜欢,麻烦推荐一下;如您有新想法,欢迎提出,邮箱:2016177728@qq.com。
  • 可以转载该博客,但必须著名博客来源。
阅读全文
0 0
原创粉丝点击