【ASP.NET MVC】View与Controller之间传递数据
ASP.NET MVC系列文章
【02】浅谈Google Chrome浏览器(操作篇)(上)
【03】浅谈Google Chrome浏览器(操作篇)(下)
【04】浅谈ASP.NET框架
【07】浅谈ASP.NET MVC 路由
【08】浅谈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
public class CustomerInfo
{
public string EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string EmployeeMajor { get; set; }
public string EmployeeDepartment { get; set; }
public string EmployeeTel { get; set; }
public string EmployeeEmail { get; set; }
public string EmployeeJiGuan { get; set; }
public string EmployeeAddress { get; set; }
public string EmployeePosition { get; set; }
public string EmployeeBirthday { get; set; }
}
(3)Controller
a.控制器action
public ActionResult ModelDataToView()
{
//定义集合
List<CustomerInfo> ltPI = new List<CustomerInfo>();
DataTable dt = GetCustomerInfoToDataTable();
for (int i = ; 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数据
//获取用户实体
public DataTable GetCustomerInfoToDataTable()
{
//连接字符串
string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
string strSql = @"SELECT * FROM EmployeeInfo";
using (SqlConnection conn = new SqlConnection(conStr))
{
conn.Open();
SqlCommand cmd = new SqlCommand(strSql, conn);
cmd.ExecuteNonQuery();
SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);
DataSet ds = new DataSet();
sda.Fill(ds,"CustomerInfo");
return ds.Tables["CustomerInfo"];
}
}
(4)View
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>
     <title>Index</title>
 </head>
 <body>
     <div class="table-responsive">
        <table class="table table-striped">
                 <thead>
                    <tr>
                         <td>员工ID</td>
                         <td>员工姓名</td>
                         <td>员工专业</td>
                         <td>员工部门</td>
                         <td>员工电话</td>
                         <td>员工邮件</td>
                         <td>员工籍贯</td>
                         <td>员工住址</td>
                         <td>员工职位</td>
                         <td>员工生日</td>
                     </tr>
                 </thead>
                 <tbody>
                     @foreach (var item in Model)
                     {
                         <tr>
                             <td>@item.EmployeeID</td>
                             <td>@item.EmployeeName</td>
                             <td>@item.EmployeeMajor</td>
                             <td>@item.EmployeeDepartment</td>
                             <td>@item.EmployeeTel</td>
                             <td>@item.EmployeeEmail</td>
                             <td>@item.EmployeeJiGuan</td>
                             <td>@item.EmployeeAddress</td>
                             <td>@item.EmployeePosition</td>
                             <td>@item.EmployeeBirthday</td>
                         </tr>
                     }
                 </tbody>
             </table>
    </div>
 </body>
 </html>
(5)结果

2.2 ViewData传递数据
(1)DB表:

(2)Model
public class CustomerInfo
{
public string EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string EmployeeMajor { get; set; }
public string EmployeeDepartment { get; set; }
public string EmployeeTel { get; set; }
public string EmployeeEmail { get; set; }
public string EmployeeJiGuan { get; set; }
public string EmployeeAddress { get; set; }
public string EmployeePosition { get; set; }
public string EmployeeBirthday { get; set; }
}
(3)Controller
a.控制器action
//ViewData传递
public ActionResult ViewDataToView()
{
List<CustomerInfo> ltPI = new List<CustomerInfo>();
DataTable dt = GetCustomerInfoToDataTable();
for (int i = ; 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);
ViewData["CustomerInfo"] = ltPI;
}
return View();
}
b.ADO.NET 获取CustomerInfo数据
//获取用户实体
public DataTable GetCustomerInfoToDataTable()
{
//连接字符串
string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
string strSql = @"SELECT * FROM EmployeeInfo";
using (SqlConnection conn = new SqlConnection(conStr))
{
conn.Open();
SqlCommand cmd = new SqlCommand(strSql, conn);
cmd.ExecuteNonQuery();
SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);
DataSet ds = new DataSet();
sda.Fill(ds,"CustomerInfo");
return ds.Tables["CustomerInfo"];
}
}
(4)View
 @using MVCCrud.Areas.JqGridDemo.Models
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>
     <title>ViewDataToView</title>
 </head>
 <body>
     <div class="table-responsive">
         <table class="table table-striped">
             <thead>
                 <tr>
                     <td>员工ID</td>
                     <td>员工姓名</td>
                     <td>员工专业</td>
                     <td>员工部门</td>
                     <td>员工电话</td>
                     <td>员工邮件</td>
                     <td>员工籍贯</td>
                     <td>员工住址</td>
                     <td>员工职位</td>
                     <td>员工生日</td>
                 </tr>
             </thead>
             <tbody>
                 @foreach (var item in (List<CustomerInfo>)ViewData["CustomerInfo"])
                 {
                     <tr>
                         <td>@item.EmployeeID</td>
                         <td>@item.EmployeeName</td>
                         <td>@item.EmployeeMajor</td>
                         <td>@item.EmployeeDepartment</td>
                         <td>@item.EmployeeTel</td>
                         <td>@item.EmployeeEmail</td>
                         <td>@item.EmployeeJiGuan</td>
                         <td>@item.EmployeeAddress</td>
                         <td>@item.EmployeePosition</td>
                         <td>@item.EmployeeBirthday</td>
                     </tr>
                 }
             </tbody>
         </table>
     </div>
 </body>
 </html>
(5)结果

2.3 ViewBag传递数据
(1)DB表:

(2)Model
public class CustomerInfo
{
public string EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string EmployeeMajor { get; set; }
public string EmployeeDepartment { get; set; }
public string EmployeeTel { get; set; }
public string EmployeeEmail { get; set; }
public string EmployeeJiGuan { get; set; }
public string EmployeeAddress { get; set; }
public string EmployeePosition { get; set; }
public string EmployeeBirthday { get; set; }
}
(3)Controller
a.控制器action
//ViewBag传递
public ActionResult ViewBagDataToView()
{
List<CustomerInfo> ltPI = new List<CustomerInfo>();
DataTable dt = GetCustomerInfoToDataTable();
for (int i = ; 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);
ViewBag.CustomerInfo = ltPI;
}
return View();
}
b.ADO.NET 获取CustomerInfo数据
//获取用户实体
public DataTable GetCustomerInfoToDataTable()
{
//连接字符串
string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
string strSql = @"SELECT * FROM EmployeeInfo";
using (SqlConnection conn = new SqlConnection(conStr))
{
conn.Open();
SqlCommand cmd = new SqlCommand(strSql, conn);
cmd.ExecuteNonQuery();
SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);
DataSet ds = new DataSet();
sda.Fill(ds,"CustomerInfo");
return ds.Tables["CustomerInfo"];
}
}
(4)View
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>
     <title>ViewBagDataToView</title>
 </head>
 <body>
     <div class="table-responsive">
         <table class="table table-striped">
             <thead>
                 <tr>
                     <td>员工ID</td>
                     <td>员工姓名</td>
                     <td>员工专业</td>
                     <td>员工部门</td>
                     <td>员工电话</td>
                     <td>员工邮件</td>
                     <td>员工籍贯</td>
                     <td>员工住址</td>
                     <td>员工职位</td>
                     <td>员工生日</td>
                 </tr>
             </thead>
             <tbody>
                 @foreach (var item in ViewBag.CustomerInfo)
                 {
                     <tr>
                         @*<td>@item.Em</td>*@
                         <td>@item.EmployeeName</td>
                         <td>@item.EmployeeMajor</td>
                         <td>@item.EmployeeDepartment</td>
                         <td>@item.EmployeeTel</td>
                         <td>@item.EmployeeEmail</td>
                         <td>@item.EmployeeJiGuan</td>
                         <td>@item.EmployeeAddress</td>
                         <td>@item.EmployeePosition</td>
                         <td>@item.EmployeeBirthday</td>
                     </tr>
                 }
             </tbody>
         </table>
     </div>
 </body>
 </html>
(4)View
 @using MVCCrud.Areas.JqGridDemo.Models
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap.css" rel="stylesheet" />
     <link href="~/OuterLibrary/bootstrap/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <script src="~/OuterLibrary/bootstrap/bootstrap/js/bootstrap.js"></script>
     <title>ViewBagDataToView</title>
 </head>
 <body>
     <div class="table-responsive">
         <table class="table table-striped">
             <thead>
                 <tr>
                     <td>员工ID</td>
                     <td>员工姓名</td>
                     <td>员工专业</td>
                     <td>员工部门</td>
                     <td>员工电话</td>
                     <td>员工邮件</td>
                     <td>员工籍贯</td>
                     <td>员工住址</td>
                     <td>员工职位</td>
                     <td>员工生日</td>
                 </tr>
             </thead>
             <tbody>
                 @foreach (var item in (List<CustomerInfo>)TempData["CustomerInfo"])
                 {
                     <tr>
                         <td>@item.EmployeeID</td>
                         <td>@item.EmployeeName</td>
                         <td>@item.EmployeeMajor</td>
                         <td>@item.EmployeeDepartment</td>
                         <td>@item.EmployeeTel</td>
                         <td>@item.EmployeeEmail</td>
                         <td>@item.EmployeeJiGuan</td>
                         <td>@item.EmployeeAddress</td>
                         <td>@item.EmployeePosition</td>
                         <td>@item.EmployeeBirthday</td>
                     </tr>
                 }
             </tbody>
         </table>
     </div>
 </body>
 </html>
(5)结果

2.4 TempData传递数据
(1)DB表:

(2)Model
public class CustomerInfo
{
public string EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string EmployeeMajor { get; set; }
public string EmployeeDepartment { get; set; }
public string EmployeeTel { get; set; }
public string EmployeeEmail { get; set; }
public string EmployeeJiGuan { get; set; }
public string EmployeeAddress { get; set; }
public string EmployeePosition { get; set; }
public string EmployeeBirthday { get; set; }
}
(3)Controller
a.action
//TempData传递数据
public ActionResult TempDataToView()
{
List<CustomerInfo> ltPI = new List<CustomerInfo>();
DataTable dt = GetCustomerInfoToDataTable();
for (int i = ; 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);
TempData["CustomerInfo"] = ltPI;
}
return View();
}
b.ADO.NET 获取CustomerInfo数据
//获取用户实体
public DataTable GetCustomerInfoToDataTable()
{
//连接字符串
string conStr = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
string strSql = @"SELECT * FROM EmployeeInfo";
using (SqlConnection conn = new SqlConnection(conStr))
{
conn.Open();
SqlCommand cmd = new SqlCommand(strSql, conn);
cmd.ExecuteNonQuery();
SqlDataAdapter sda = new SqlDataAdapter(strSql, conn);
DataSet ds = new DataSet();
sda.Fill(ds,"CustomerInfo");
return ds.Tables["CustomerInfo"];
}
}
(5)结果

2.5 第三方插件
JqGrid插件:
控制器:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCCrud.Areas.JqGridDemo.Controllers
{
public class JqGridCustomerInfoController : Controller
{
// GET: JqGridDemo/JqGridCustomerInfo
public ActionResult Index()
{
return View();
}
}
}
视图:
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.css" rel="stylesheet" />
     <link href="~/OuterLibrary/jquery-ui-themes-1.12.1/jquery-ui.theme.css" rel="stylesheet" />
     <link href="~/OuterLibrary/tonytomov-jqGrid-6659334/css/ui.jqgrid.css" rel="stylesheet" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <script src="~/OuterLibrary/tonytomov-jqGrid-6659334/js/i18n/grid.locale-en.js"></script>
     <script src="~/OuterLibrary/tonytomov-jqGrid-6659334/js/jquery.jqGrid.js"></script>
     <title>Index</title>
 </head>
 <body>
     <div>
         <div class="main" id="main">
             <table id="JqGrid-table"></table>
             <div id="JqGrid-pager"></div>
        </div>
        <script type="text/javascript">
            $("#JqGrid-table").jqGrid({
                 url: "/JqGridDemo/JsonDemo/Index",
                 datatype: "json",
                 height: 150,
                 mtype: "Get",
                 colNames: ['员工ID', '员工姓名', '员工专业', '员工部门', '员工电话','员工邮件','员工籍贯','员工住址','员工职位','员工生日'],
                 colModel: [{
                     name: 'EmployeeID',
                     index: 'EmployeeID',
                     key: true,
                     width: 100,
                     editable: false,
                     editoptions: {
                         size: "20",
                         maxlength: "30"
                     }
                 }, {
                     name: 'EmployeeName',
                     index: 'EmployeeName',
                     width: 200,
                     editable: false,
                     edittype: false,
                     editoptions: {
                         size: "20",
                         maxlength: "30"
                     }
                     }, {
                         name: 'EmployeeMajor',
                         index: 'EmployeeMajor',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     },
                     {
                         name: 'EmployeeDepartment',
                         index: 'EmployeeDepartment',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     }, {
                         name: 'EmployeeTel',
                         index: 'EmployeeTel',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     }, {
                         name: 'EmployeeEmail',
                         index: 'EmployeeEmail',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     }, {
                         name: 'EmployeeJiGuan',
                         index: 'EmployeeJiGuan',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     }, {
                         name: 'EmployeeAddress',
                         index: 'EmployeeAddress',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     }, {
                         name: 'EmployeePosition',
                         index: 'EmployeePosition',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     }, {
                         name: 'EmployeeBirthday',
                         index: 'EmployeeBirthday',
                         width: 200,
                         editable: false,
                         edittype: false,
                         editoptions: {
                             size: "20",
                             maxlength: "30"
                         }
                     },  ],
                 viewrecords: true,
                 rowNum: 10,
                 rowList: [10, 20, 30],
                 pager: '#JqGrid-pager',
                 altRows: true,
                 multiselect: true,
                 multiboxonly: true,
                 caption: "员工信息表",
                 autowidth: true
             });
              jQuery("#grid-table").jqGrid('navGrid', '#grid-pager', { edit: true, add: true, del: true });
         </script>
     </div>
 </body>
 </html>
控制器:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;
using System.Web.Script.Serialization; namespace MVCCrud.Areas.JqGridDemo.Controllers
{
public class JsonDemoController : Controller
{
// GET: JqGridDemo/JsonDemo public ActionResult Index()
{
var jsondata = new[]
{
new{
EmployeeID = "NX0001",
EmployeeName = "张三",
EmployeeMajor = "金融学",
EmployeeDepartment = "风投部门",
EmployeeTel = "XXX",
EmployeeEmail="XXX@qq.com",
EmployeeJiGuan="上海",
EmployeeAddress="上海浦东新区",
EmployeePosition="高级软件工程师",
EmployeeBirthday="XXX",
}
};
return Json(jsondata,JsonRequestBehavior.AllowGet);
}
}
}
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:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCCrud.Areas.JqGridDemo.Controllers
{
public class QueryStringController : Controller
{
// GET: JqGridDemo/QueryString
public ActionResult Index()
{
return View();
} public void GetParamsFromToView(string EmployeeID,string EmployeeName)
{
EmployeeID = Request["EmployeeID"].ToString();
EmployeeName= Request["EmployeeName"].ToString();
}
}
}
View:
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <title>Index</title>
     <script>
         $(function () {
             $('#btnQueryString').click(function () {
                 //url不区分大小写
                 location.href ="/JqGridDemo/QueryString/GetParamsFromToView?EmployeeID=NX001&EmployeeName=张三";
             });
         });
     </script>
     <style>
         #btnQueryString{
             width:320px;
             height:30px;
         }
     </style>
 </head>
 <body>
     <div>
         <button id="btnQueryString">QueryString向Controller传递值</button>
     </div>
 </body>
 </html>
result:

3.2 AJax
controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCCrud.Areas.JqGridDemo.Controllers
{
public class AjaxDataController : Controller
{
// GET: JqGridDemo/AjaxData
public ActionResult Index()
{
return View();
} //action Receiving data from Ajax
public void GetParamsFromAjax(string EmployeeID, string EmployeeName)
{ }
}
}
View:
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <title>Index</title>
     <script>
         $(function () {
             $('#btnAjax').click(function () {
                 $.ajax({
                     url: "/JqGridDemo/AjaxData/GetParamsFromAjax",
                     type:"GET",
                     data:{EmployeeID:'NX001',EmployeeName:'张三'},
                     error: function(message) {
                         alert('error!');
                     }
                 });
             })
         })
     </script>
 </head>
 <body>
     <button id="btnAjax">Ajax传递参数</button>
 </body>
 </html>
或者
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <script src="~/OuterLibrary/Jquery/jquery-3.2.1.js"></script>
     <title>Index</title>
     <script>
         $(function () {
             $('#btnAjax').click(function () {
                 $.ajax({
                     url: "/JqGridDemo/AjaxData/GetParamsFromAjax" +"?EmployeeID='NX001'&EmployeeName='张三",
                     type:"GET",
                     //data:{EmployeeID:'NX001',EmployeeName:'张三'},
                     error: function(message) {
                         alert('error!');
                     }
                 });
             })
         })
     </script>
 </head>
 <body>
     <button id="btnAjax">Ajax传递参数</button>
 </body>
 </html>
result:

3.3 Form传递
controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCCrud.Areas.JqGridDemo.Controllers
{
public class FormTransferDataController : Controller
{
// GET: JqGridDemo/FormTransferData
public ActionResult Index()
{
return View();
} //action Receiving data from Form
public void GetParamsFromForm(string EmployeeID, string EmployeeName)
{ }
}
}
View:
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>Index</title>
 </head>
 <body>
     <form action="/JqGridDemo/FormTransferData/GetParamsFromForm" method="get">
         员工ID:<input type="text" name="EmployeeID" />
         员工姓名:<input type="text" name="EmployeeName" />
         <input type="submit" name="btnFormTransferData" value="Form表单传递数据" />
     </form>
 </body>
 </html>
result:

3.4 FormCollection
controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MVCCrud.Areas.JqGridDemo.Controllers
{
public class FormCollectionTransferDataController : Controller
{
// GET: JqGridDemo/FormCollectionTransferData
public ActionResult Index()
{
return View();
} //action Receiving data from FormCollection
public void GetParamsFromFormCollection(FormCollection fc)
{
string EmployeeID = fc["EmployeeID"].ToString();
string EmployeeName = fc["EmployeeName"].ToString();
}
}
}
view:
 @{
     Layout = null;
 }
 <!DOCTYPE html>
 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>Index</title>
 </head>
 <body>
     <div>
         @using (Html.BeginForm("GetParamsFromFormCollection", "FormCollectionTransferData"))
         {
             @Html.TextBox("EmployeeID","员工ID");
             @Html.TextBox("EmployeeName","员工姓名");
             <input type="submit" value="FormCollection传值"/>
         }
     </div>
 </body>
 </html>
result:

3.5 自定义模型绑定
敬请期待,下篇文章与大家一起分享。。。。
4 版权
- 感谢您的阅读,若有不足之处,欢迎指教,共同学习、共同进步。
 - 博主网址:http://www.cnblogs.com/wangjiming/。
 - 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的,大部分为原创。
 - 如您喜欢,麻烦推荐一下;如您有新想法,欢迎提出,邮箱:2016177728@qq.com。
 - 可以转载该博客,但必须著名博客来源。
 
【ASP.NET MVC】View与Controller之间传递数据的更多相关文章
- 【MVC架构】——怎样利用Json在View和Controller之间传递数据
		
在MVC架构中,尽管非常多东西和三层非常相似,可是也有非常大的差别.就比方传递数据.在三层架构中,传递数据就仅仅要一层返回,另外一层用同样类型的变量来接收即可了.在MVC中,事实上原理是一样的,Con ...
 - Controller之间传递数据:属性传值
		
在项目中,Controller之间传递数据非常之多,这里简单介绍一下属性传值.例如有FirstController 和 SecondController,数据从First传递到Second中,我们如何 ...
 - Controller之间传递数据:Block传值
		
http://itjoy.org/?p=420 前边我们介绍过属性传值和协议传值,这里介绍一下块传值,块类似于C中的函数指针.在Controller中传递数据非常方便,还是继续上一章的例子,将数据从S ...
 - MVC进阶学习--View和Controller之间的数据传递(一)
		
1.使用ViewData ViewData 的是ControllerBase 的一个属性,是一个数据字典类型的,其实现代码如(这段代码来自asp.net MVC开源项目中源码)下: Code 1 ...
 - ASP.NET MVC View向Controller提交数据
		
我们知道使用MVC的一个很重的的用途就是把Controller和View之间进行解耦,通过控制器来调用不同的视图,这就注定了Controller和View之间的传值是一个很重的知识点,这篇博文主要解释 ...
 - ASP.NET MVC系列:从Controller访问Model数据
		
在项目解决方案中,添加一个MoviesController控制器,选择对应的模板,和模型类以及数据上下文:关于如何添加模型类和数据上下文,我们在ASP.NET MVC系列:添加模型中已经介绍过
 - Controller之间传递数据:协议传值
		
http://itjoy.org/?p=416 前边介绍过从第一个页面传递数据到第二个页面,那么反过来呢我们该如何操作?还是同一个例子,将第二个页面的字符串传递到第一个页面显示出来,这中形式就可以使用 ...
 - MVC进阶学习--View和Controller之间的数据传递(二)
		
1. 使用Request.Form MVC 将页面简单化,与WebForm中的事件机制完全不同,就和普通的html标签表单提交没有任何区别(当然WebForm中的事件机制其实也是表单提交).在表单提交 ...
 - ASP.NET MVC View向Controller传值方式总结
		
1:QueryString传值1)也可以使用new{}来为form的action增加querystring2)在controler里使用Request.QueryString["word&q ...
 
随机推荐
- Java 程序员技能导图 1.0
			
做Java开发已经一年,并非科班出身,在毕业工作三年后毅然决然辞职,参加培训机构从零开始.在这期间迷茫.失望.绝望时常伴我左右,但是在不断自我提高与努力中渐渐看到一些小小的成果使我不断坚信自己的选择并 ...
 - Infer - 文件说明
			
Infer - 文件说明 Infer - bin目录下的文件 主要命令 文件名 意义 infer 运行infer,python脚本.可以看详细的说明文档了解使用细节 inferTest 执行测试,sh ...
 - Android学习笔记-构建一个可复用的自定义BaseAdapter
			
转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html 作者:coder-pig 本节引言: 如题, ...
 - springMVC 中几种获取request和response的方式
			
1.最简单方式:参数 例如: @RequestMapping("/test") @ResponseBody public void saveTest(HttpServletRequ ...
 - R语言 write.xlsx()    写入同一excel,及同一sheet注意
			
write.xlsx(x, file, sheetName="Sheet1", col.names=TRUE, row.names=TRUE, append=FALSE, show ...
 - 云计算——Google App Eng…
			
云计算--Google App Engine(一) 编者:王尚 2014.04.12 20:20 介绍:Google App Engine提供一套开发组件让用户轻松的在本地构建和调试网络应用,之后能让 ...
 - Vue模板逻辑
			
前面的话 上一篇介绍了Vue的模板内容,而对于一般的模板引擎来说,除了模板内容,还包括模板逻辑.常用的模板逻辑包括条件和循环.本文将详细介绍Vue模板逻辑 条件渲染 在Vue中,实现条件逻辑依靠条件指 ...
 - Unity 粒子系统 特效 移除屏幕外面后再移回来 不会显示问题
			
今天遇到的问题 勾选Particle System组件中的Sub Emitters属性 如图
 - Hibernate中HQL函数汇总及获取当前时间进行比较举例
			
在很多时候,我们负责的项目中,在数据访问层(DAO层)通常我们会使用sql语句或者hql语句,而在我们使用hql语句拼接时有时会报错,通常的原因是:我们使用了标准的sql语句,开启的确是hiberna ...
 - java虚拟机详解
			
注: 此篇文章可以算是读<深入理解Java虚拟机:JVM高级特性与最佳实践>一书后的笔记总结加上我个人的心得看法. 整体总结顺序沿用了书中顺序,但多处章节用自己的话或直白或扩展的进行了重新 ...