【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八大類擴展(上篇)