ASP.NET MVC 5 Web编程5 -- 页面传值的方式

本篇文章将讲述MVC的页面传值方式,具体包括:后端向前端传值(Controller向View传值);前端向后端传值(View向Controller传值);Action与Action之间的传值。

回顾

我们回顾下在ASP.NET WebForms中,页面之间最常用的传值方式,有以下几种:

a). QueryString(也叫URL传值)

b). Session

c). Cookie

d). Application

e). Server.Transfer

这里不再讲述这几种传值方式的用法和利弊,在本章后面将用MVC的传值方式与之对比,并展开一些探讨。

下面正式开始MVC的页面传值方式

Controller向View传值

1. ViewBag

用法:

在Controller中书写

ViewBag.Test123 = "Hello World.";

前台接收

@ViewBag.Test123

说明: ViewBag是dynamic动态类型,上面例子中的key => Test123可以指定任何类型。

2. ViewData

用法:

在Controller中书写

ViewData["Test123"] = "Hello World. This is ViewData";

前台接收

@ViewData["Test123"]

说明:ViewData是字典类型,继承自IDictionary<string,object>接口

3. TempData

用法:

在Controller中书写

TempData["tmpData"] = "I am TempData...";

前台接收

@TempData["tmpData"]

说明:TempData也是字典类型,继承自IDictionary<string,object>接口

4. Model

这是初学者最常使用的传值方式。在上一篇文章中, 我们在Razor视图的页面代码中有这样一句:

@model IEnumerable<MVC5Demo.Models.UserInfoViewModel>

然后我们的信息列表是这样:

<tbody>
                    @foreach (var item in Model) {
                    <tr>
                        <td>@Html.DisplayFor(p => item.UserName)</td>
                        <td>@(item.Sex == 0 ? "女" : "男")</td>
                        <td>@Html.DisplayFor(p => item.Age)</td>
                        <td>@Html.DisplayFor(p => item.Dept)</td>
                        <td>@Html.ActionLink("编辑", "Edit", "UserInfo", new { id=item.UserID.ToString() },null) @Html.ActionLink("删除", "Delete", "UserInfo", new { id = item.UserID.ToString() }, new { onclick="return confirm(‘确认删除"+item.UserName+"的记录?‘);" })</td>
                    </tr>
                    }
                </tbody>

如代码所示,因为我们的Model是一个泛型集合,这里就可以很方便的取出集合中的数据。

在后台Controller中,是怎么书写的呢?

        public ActionResult Index()
        {
            return View("UserInfo", GetTestData());//GetTestData()返回泛型集合
        }

如代码所示,只需返回视图时,同时指定视图的数据对象。

View向Controller传值

1. 使用Html.BeginForm(...)方法提交表单

    @using(Html.BeginForm("actionName","controllerName"))
    {
        <div>表单内容</div>
        <div>...</div>
        <input type="submit" value="提交表单" />
    }

说明:将 <form> 开始标记写入响应。在用户提交窗体时,将由某个操作方法(指定Controller的某个Action)处理该请求。

(使用using关闭form,下面不再说明。)

2. 使用Html.BeginRouteForm(...)方法提交表单

    @Html.BeginRouteForm("路由名称", new { controller = "userinfo", action="save", userID = Model.UserID, userName = Model.UserName }, FormMethod.Post)
    {
        <div>表单内容</div>
        <div>...</div>
        <input type="submit" value="提交表单" />
    }

说明:同Html.BeginForm(),但使用路由方式提交表单,同时参数也不同。

3. 传统Form表单的Action属性提交

    <form id="postForm" action="@Url.Action("Save")" method="post">
            <div>表单内容</div>
            <div>...</div>
            <input type="submit" value="提交表单" />
    </form>

说明:使用传统html form原生标记。

4. 使用Ajax方式提交表单, Ajax.BeginForm(...)

    @Ajax.BeginForm("actionName", new AjaxOptions { Url="",OnSuccess="",HttpMethod="get" })
    {
        <div>表单内容</div>
        <div>...</div>
        <input type="submit" value="提交表单" />
    }

说明:使用异步方式提交form表单。

5. Jquery和Ajax提交表单

省略... 不在文章讨论范围。

6. 表单参数传递

6.1 全参数传递

[HttpPost]
public ActionResult Save(string username,int sex,int age,string dept)

说明:html标签name和参数名需相同。

6.2 实体传参

[HttpPost]
public ActionResult Save(UserInfoViewModel item)

说明:页面使用@model绑定类型

6.3 表单集合传参

[HttpPost]
public ActionResult Save(FormCollection fc)

说明:需解析FormCollection,如:

UserInfoViewModel userInfo = new UserInfoViewModel();
TryUpdateModel<UserInfoViewModel>(userInfo, fc);

6.4 传统方式

使用HttpContext,在MVC中我们同样可以使用以下对象:

Application,Server,Session,Request,Response,Cache ...

Controller向Controller传值(Action之间传值)

1. RedirectToAction

1.1 传递实体对象

        public ActionResult Index()
        {
            return RedirectToAction("Index", "Home", new UserInfoViewModel { UserID = Guid.NewGuid(), UserName = "zhangsan", Sex = 1, Age = 20, Dept = "hr" });
        }

说明:在UserInfoController中,在页面加载时,新建一个实体类型,并跳转至首页。

接收:

    public class HomeController : Controller
    {
        public ActionResult Index(UserInfoViewModel model)
        {
            //处理model的值
            //...

1.2 传递普通参数

        public ActionResult Index()
        {
            return RedirectToAction("Index", "Home", new { UserID = Guid.NewGuid(), UserName = "zhangsan"});
        }

接收:

    public class HomeController : Controller
    {
        public ActionResult Index(string userID,string userName)
        {
            //处理userID, userName的值
            //...

2. TempData

            TempData["userName"] = "zhangsan";
            return RedirectToAction("Index2");

在Index2中接收:

string userName = TempData["userName"].ToString();

说明:TempData可以在同Controller中不同Action之间传递,并且具有‘一次访问’的特质。使用时要特别注意。

与WebForms传值的对比

1. 后台不能通过非提交方式获取某个页面元素的值,因为没有‘服务器控件’;MVC使用原生Http,是【无状态】的。

2. 不能使用(也没有)ViewState。

3. 使用特有的机制传值(ViewData,ViewBag...等等)。

一个简单的入门级Demo

效果图:

开发工具: VS2013

功能点:用户信息列表,实现对用户信息的 增,删,改,查功能。

点我下载

总结

本文主要对ASP.NET MVC5的页面传值方式做总体介绍。并提供了一个简单的Demo供需要的朋友参考学习。

由于本人水平有限,如文章有错误处还请各位指出,并不吝赐教!作者在这里先行表示感谢。

本章是ASP.NET MVC5“入门”阶段的最后一篇,后续文章将侧重进阶技术和一些技巧性或存疑的问题。敬请期待~

希望本文对你有帮助。

时间: 2024-10-13 07:22:27

ASP.NET MVC 5 Web编程5 -- 页面传值的方式的相关文章

ASP.NET MVC 5 Web编程4 -- Razor视图引擎

Razor简介 Razor是ASP.NET新增的一个视图引擎,由微软全球最年轻的副总裁,有着"ASP.NET之父"称呼的Scott Guthrie主导的团队开发. 主导Razor开发的Scott Guthrie,毕业于美国杜克大学.现任微软云计算与企业级产品工程部执行副总裁. Razor对传统aspx页面的写法和页面渲染能力提出了反思,所以它在代码书写和HTML生成方面都进行了优化.Rzaor的设计目标遵循以下几点: a). 尽量减少代码 b). 上手快,只需要现有的编程语言和基本的H

ASP.NET MVC 5 Web编程2 -- URL映射(路由原理)

本章将讲述ASP.NET MVC5 的路由原理,即URL映射机制. 简单点就是解释:为什么MVC在浏览器输入地址就能访问到类(或类中的方法)?这是怎么做到的?我自己可以通过.NET写出一个自己的MVC框架吗? 答案是:可以. 模拟URL映射 先来看一个Demo,在传统的.NET WebForms项目中,实现URL的拦截. 打开VS2013,新建一个“ASP.NET Web窗体应用程序”项目,并取名为Demo4URLRouting. 为了方便测试,注释掉Default.aspx页面的内容和模板引用

ASP.NET MVC 5 Web编程1 -- 入门

开篇引言 说起ASP.NET MVC,我想作为WebForms开发者第一点要问的是:为什么要使用它?我的理解是:MVC是更细节化的框架,“细节可控”意味着你的系统更精致.具体体现在应用上.MVC的出现,可能正是迎合Web开发越来越精致的需求.就我了解的一个大型投资管理电商平台,所用的架构就是ASP.NET MVC.MVC将来在系统应用的趋势,很可能就是大型电子商务平台.当然,WebForms并不是被“抛弃”,在快速开发,控件复用上,WebForms依然走在前面.有时候,根据需要,我们可以在同一项

ASP.NET MVC 5 Web编程3 -- Controller的应用及扩展

http://www.midifan.com/moduleuser-index-420934.htmhttp://www.midifan.com/moduleuser-index-420949.htmhttp://www.midifan.com/moduleuser-index-421026.htmhttp://www.midifan.com/moduleuser-index-420782.htmhttp://www.midifan.com/moduleuser-index-421061.htm

ABP示例程序-使用AngularJs,ASP.NET MVC,Web API和EntityFramework创建N层的单页面Web应用

本片文章翻译自ABP在CodeProject上的一个简单示例程序,网站上的程序是用ABP之前的版本创建的,模板创建界面及工程文档有所改变,本文基于最新的模板创建.通过这个简单的示例可以对ABP有个更深入的了解,每个工程里应该写什么样的代码,代码如何组织以及ABP是如何在工程中发挥作用的. 源文档地址:https://www.codeproject.com/Articles/791740/Using-AngularJs-ASP-NET-MVC-Web-API-and-EntityFram 源码可以

Asp.Net MVC 4 Web API 中的安全认证-使用OAuth

Asp.Net MVC 4 Web API 中的安全认证-使用OAuth 各种语言实现的oauth认证: http://oauth.net/code/ 上一篇文章介绍了如何使用基本的http认证来实现asp.net web api的跨平台安全认证. 这里说明一个如何使用oauth实现的认证.oauth大家可能不陌生.那么这里需要注意的是我们使用的是.net平台一个比较好的开源oauth库. DOTNETOPENAUTH. 就像上图所示,我们需要一个ISSSUE Server来给我们一个token

[Asp.Net] MVC 和Web API 的区别

Asp.net MVC 和web api 的action 在获取从前台传入的数据是有很大不同 前台使用ajax的方式向后台发起post的请求 Content-Type:application/json 使用以下json对象 { "user": { "Username":"xxx", "Password":"xxxx" } } { "Username":"xxx", &

关于在ASP.NET MVC 中使用EF的Code First的方式来读取数据库时的Validation failed for one or more entities. See &#39;EntityValidationErrors&#39; property for more details.

今天在做一个小网站的时候遇到很多问题唉,我还是个菜鸟,懂的也不多,今天一个表单的提交按钮用不了,都弄了几个小时唉.不过最后还是搞定了,还有浏览器有开发人员选项,不然我都不知道我还要继续排查多久哦,今天晚上在把数据存入数据库的又出现了问题.我使用的是Entity Framework的Code First模式来访问数据库的.对于数据的验证我在数据模型上加了数据注解.当然在前台也引入了一些JS这样就可以再不把数据提交到服务器时完成验证功能.在后台保存用户提交的数据的时候,我们要用到ModelStatu

Spring MVC 从 Controller向页面传值的方式

Spring MVC 从 Controller向页面传值的方式 在实际开发中,Controller取得数据(可以在Controller中处理,当然也可以来源于业务逻辑层),传给页面,常用的方式有:   1.利用ModelAndView页面传值 后台程序如下: @RequestMapping(value="/reciveData",method=RequestMethod.GET) public ModelAndView StartPage() { ModelMap map=new Mo