【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制…

2018-06-22 07:51:42来源：未知阅读 ()

ASP.NET MVC系列文章

【01】浅谈Google Chrome浏览器（理论篇）

【02】浅谈Google Chrome浏览器（操作篇）（上）

【03】浅谈Google Chrome浏览器（操作篇）（下）

【04】浅谈ASP.NET框架

【05】浅谈ASP.NET MVC运行过程

【06】浅谈ASP.NET MVC 控制器

【07】浅谈ASP.NET MVC 路由

【08】浅谈ASP.NET MVC 视图

【09】浅谈ASP.NET MVC 视图与控制器传递数据

【10】浅谈jqGrid 在ASP.NET MVC中增删改查

【11】浅谈ASP.NET 页面之间传值的几种方式

【12】浅谈缓存技术在ASP.NET中的运用

【13】浅谈NuGet在VS中的运用

【14】浅谈ASP.NET 程序发布过程

【15】浅谈数据注解和验证

【16】浅谈依赖注入

【17】浅谈表单和HTML辅助方法

【18】浅谈基于APS.NET身份验证

【19】浅谈ASP.NET MVC 模型

【20】浅谈ASP.NET MVC 单元测试

【21】浅谈ASP.NET MVC网络安全;

【22】浅谈ASP.NET MVC八大类扩展

【23】再谈ASP.NET MVC Routing

【24】浅谈ASP.NET 高级话题

【25】浅谈大型ASP.NET MVC项目（含DEMO）

【26】下一系列：ASP.NET WebAPI

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 : Controller
10     {
11         // GET: JqGridDemo/JqGridCustomerInfo
12         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.Controllers
10 {
11     public class JsonDemoController : Controller
12     {
13         // GET: JqGridDemo/JsonDemo
14         
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 : Controller
10     {
11         // GET: JqGridDemo/QueryString
12         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 : Controller
10     {
11         // GET: JqGridDemo/AjaxData
12         public ActionResult Index()
13         {
14             return View();
15         }
16 
17         //action Receiving data from Ajax
18         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 : Controller
10     {
11         // GET: JqGridDemo/FormTransferData
12         public ActionResult Index()
13         {
14             return View();
15         }
16 
17         //action Receiving data from Form
18         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 : Controller
10     {
11         // GET: JqGridDemo/FormCollectionTransferData
12         public ActionResult Index()
13         {
14             return View();
15         }
16 
17         //action Receiving data from FormCollection
18         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>