【ASP.NET MVC】View與Controller之間傳遞數據
阿新 • • 發佈：2019-04-16
avg 信息 per $.ajax click 表單 tin manager 大小
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="[email protected]",
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:
標簽: MVC, Controller, View
【ASP.NET MVC】View與Controller之間傳遞數據