【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制器传递数据
ASP.NET MVC系列文章javascript
【01】浅谈Google Chrome浏览器（理论篇）css
【02】浅谈Google Chrome浏览器（操做篇）（上）html
【03】浅谈Google Chrome浏览器（操做篇）（下）java
【04】浅谈ASP.NET框架 jquery
【05】浅谈ASP.NET MVC运行过程 ajax
【06】浅谈ASP.NET MVC 控制器 json
【07】浅谈ASP.NET MVC 路由 bootstrap
【08】浅谈ASP.NET MVC 视图 浏览器
【09】浅谈ASP.NET MVC 视图与控制器传递数据缓存
【10】浅谈jqGrid 在ASP.NET MVC中增删改查
【13】浅谈NuGet在VS中的运用
【14】浅谈ASP.NET 程序发布过程
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>
result:
3.5 自定义模型绑定
敬请期待，下篇文章与你们一块儿分享。。。。
4 版权
- 感谢您的阅读，如有不足之处，欢迎指教，共同窗习、共同进步。
- 博主网址：http://www.cnblogs.com/wangjiming/。
- 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
- 如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2016177728@qq.com。
- 能够转载该博客，但必须著名博客来源。
相关文章
- 1. 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图
- 2. 【ASP.NET MVC系列】浅谈ASP.NET MVC 路由
- 3. 【ASP.NET MVC系列】浅谈ASP.NET MVC 控制器
- 4. 浅谈ASP.NET MVC 控制器
- 5. ASP.NET MVC 之控制器与视图之间的数据传递
- 6. asp.net core mvc（4）控制器和视图的数据传递
- 7. ASP.NET MVC 5 - 将数据从控制器传递给视图
- 8. 浅谈ASP.NET MVC 视图
- 9. 【ASP.NET MVC系列】浅谈ASP.NET MVC运行过程
- 10. 【ASP.NET MVC系列】浅谈ASP.NET MVC八大类扩展(上篇)
- 更多相关文章...
- • ASP.NET MVC - 视图 - ASP.NET 教程
- • ASP.NET MVC - 控制器 - ASP.NET 教程
- • Flink 数据传输及反压详解
- • Docker容器实战(六) - 容器的隔离与限制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图
- 2. 【ASP.NET MVC系列】浅谈ASP.NET MVC 路由
- 3. 【ASP.NET MVC系列】浅谈ASP.NET MVC 控制器
- 4. 浅谈ASP.NET MVC 控制器
- 5. ASP.NET MVC 之控制器与视图之间的数据传递
- 6. asp.net core mvc（4）控制器和视图的数据传递
- 7. ASP.NET MVC 5 - 将数据从控制器传递给视图
- 8. 浅谈ASP.NET MVC 视图
- 9. 【ASP.NET MVC系列】浅谈ASP.NET MVC运行过程
- 10. 【ASP.NET MVC系列】浅谈ASP.NET MVC八大类扩展(上篇)