查看: 716|回复: 0

[.NET开发] 【ASP.NET MVC】View与Controller之间传递数据

发表于 2017-9-26 08:00:01
尚学堂AD

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. 1 public class CustomerInfo
  2. 2 {
  3. 3 public string EmployeeID { get; set; }
  4. 4 public string EmployeeName { get; set; }
  5. 5 public string EmployeeMajor { get; set; }
  6. 6 public string EmployeeDepartment { get; set; }
  7. 7 public string EmployeeTel { get; set; }
  8. 8 public string EmployeeEmail { get; set; }
  9. 9 public string EmployeeJiGuan { get; set; }
  10. 10 public string EmployeeAddress { get; set; }
  11. 11 public string EmployeePosition { get; set; }
  12. 12 public string EmployeeBirthday { get; set; }
  13. 13 }
复制代码

(3)Controller

a.控制器action

  1. public ActionResult ModelDataToView()
  2. {
  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. }
  21. return View("Index",ltPI);
  22. }
复制代码

b.ADO.NET 获取CustomerInfo数据

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

(4)View

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

(5)结果

2.2 ViewData传递数据

(1)DB表:

(2)Model

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

(3)Controller

a.控制器action

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

b.ADO.NET 获取CustomerInfo数据

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

(4)View

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

(5)结果

2.3 ViewBag传递数据

(1)DB表:

(2)Model

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

(3)Controller

a.控制器action

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

b.ADO.NET 获取CustomerInfo数据

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

(4)View

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

(4)View

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

(5)结果

2.4 TempData传递数据

(1)DB表:

(2)Model

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

(3)Controller

a.action

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

b.ADO.NET 获取CustomerInfo数据

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

(5)结果

2.5 第三方插件

JqGrid插件:

控制器:

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

视图:

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

控制器:

  1. 1 using System;
  2. 2 using System.Collections.Generic;
  3. 3 using System.Linq;
  4. 4 using System.Web;
  5. 5 using System.Web.Helpers;
  6. 6 using System.Web.Mvc;
  7. 7 using System.Web.Script.Serialization;
  8. 8
  9. 9 namespace MVCCrud.Areas.JqGridDemo.Controllers
  10. 10 {
  11. 11 public class JsonDemoController : Controller
  12. 12 {
  13. 13 // GET: JqGridDemo/JsonDemo
  14. 14
  15. 15 public ActionResult Index()
  16. 16 {
  17. 17 var jsondata = new[]
  18. 18 {
  19. 19 new{
  20. 20 EmployeeID = "NX0001",
  21. 21 EmployeeName = "张三",
  22. 22 EmployeeMajor = "金融学",
  23. 23 EmployeeDepartment = "风投部门",
  24. 24 EmployeeTel = "XXX",
  25. 25 EmployeeEmail="XXX@qq.com",
  26. 26 EmployeeJiGuan="上海",
  27. 27 EmployeeAddress="上海浦东新区",
  28. 28 EmployeePosition="高级软件工程师",
  29. 29 EmployeeBirthday="XXX",
  30. 30 }
  31. 31 };
  32. 32 return Json(jsondata,JsonRequestBehavior.AllowGet);
  33. 33 }
  34. 34 }
  35. 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. 1 using System;
  2. 2 using System.Collections.Generic;
  3. 3 using System.Linq;
  4. 4 using System.Web;
  5. 5 using System.Web.Mvc;
  6. 6
  7. 7 namespace MVCCrud.Areas.JqGridDemo.Controllers
  8. 8 {
  9. 9 public class QueryStringController : Controller
  10. 10 {
  11. 11 // GET: JqGridDemo/QueryString
  12. 12 public ActionResult Index()
  13. 13 {
  14. 14 return View();
  15. 15 }
  16. 16
  17. 17 public void GetParamsFromToView(string EmployeeID,string EmployeeName)
  18. 18 {
  19. 19 EmployeeID = Request["EmployeeID"].ToString();
  20. 20 EmployeeName= Request["EmployeeName"].ToString();
  21. 21 }
  22. 22 }
  23. 23 }
复制代码

View:

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

result:

3.2 AJax

controller:

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

View:

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

或者

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

result:

3.3 Form传递

controller:

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

View:

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

result:

3.4 FormCollection

controller:

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

view:

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

result:

3.5 自定义模型绑定

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

4 版权

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


回复

使用道具 举报