mvc VIEW部分介绍
因为如果在view页面中的路径直接写死为<from action="/Home/Save" method="post">那么当Global.asax.cs文件中的Routing自定义或随时修改后,还要连带修改数十个视图中的窗口发送路径.
在MVC中,我们可以使用Html.BeginForm()
- <%
- using (Html.BeginForm("Save","Home",FormMethod.Post)){
- %>
- 窗口内容
- <%}%>
或
- <%
- using (Html.BeginForm("Save","Home")){
- %>
- 窗口内容
- <%}%>
如果窗口送出的对象是同一个Action,那么可以简写为
- <%
- using (Html.BeginForm()){
- %>
- 窗口内容
- <%}%>
因为送出窗口的对象与当前视图所在的Controller相同,只是Action不同,所以可以通过View的RouteData.Values对象获取当前的所有路由值,并动态加载路由值中的Controller的名称
RouteData.Values
- <%
- using (Html.BeginForm(("Save",RouteData.Values["controller"].ToString())){
- %>
- 窗口内容
- <%}%>
使用 <%: Html.TextBox("姓名")%>为mvc2新建的强类型HTML辅助方法
使用强类型的好处在于可以有提示,不必担心把字段名称写错
Model要重、Controller要轻、View要够笨
HTML辅助方法:
MVC内置且常用的HTML辅助方法主要分为两大类:
用于生成超链接的HTML辅助方法,Html. ActionLink()、Html. RouteLink();
用于生成窗口元素的HTML辅助方法,包括Html.BeginForm()、Html. EndFrom()、Html. TextBox()、Html. TextArea()、Html. Password()、Html. Hidden()、Html. CheckBox()、Html. DropDownList()、Html. ListBox()、Html. RadioButton();
Html. ActionLink():
- <%=Html. ActionLink("超链接文字","actionName")%>
- <%=Html. ActionLink("超链接文字","actionName","controllerName")%>
- <%=Html. ActionLink("超链接文字","actionName","controllerName",new{id=123,page=5})%>
在使用Html. ActionLink()时,超链接文本处不可以输入空白或“null”值,否则会抛“The Value cannot be null or emtty”的异常。
Html. RouteLink():
- <%=Html. RouteLink("会员专区","Member",new{type="default"},new{@class="back"})%>
- 等价:
- <a class="back" href="Member/?type=default">会员专区</a>
Html. BeginForm():
该方法主要用来产生<form>标签,你可以通过using语法来使用它,也可以配合Html.EndForm()辅助方法产生适当的</from>窗口结尾标签。注意这里使用是<%%>里千万不能加等号。
Html. TextBox():
<%=Html. TextBox("name")%>等价于<input id="name" name="name" type="text" value=""/>由此可知,我们指定了name字段的名称,通过HTML辅助方法产出HTML代码的同时,会同时将id字段赋予和Name字段一样的值。
<%=Html. TextBox("name","value")%>等价于<input id="name" name="name" type="text" value="value"/>注意这里的value不能写“”
<%=Html. TextBox("name","value",new{id="testId"})%> 等价于<input id="testId" name="name" type="text" value="value"/>值得注意的是HTML属性的Class是保留字,当需要设定Class是,需要加上“@”来跳脱
<%=Html. TextBox("name","value",new{id="testId",@class="testClass"})%>
还可以使用IDictionary<stirng object>接口,此重载在同一个页面中有许多HTML标签需要用到相同的的Class或Style等属性时使用。使用此重载需要现在Controller中建立一个Dictionary对象,并且使用ViewData转到View
- public ActionResult HelperSample(){
- IDictionary<string,object> attr = new Dictionary<string,object>();
- attr.Add("siez","32");
- attr.Add("style","color:red");
- ViewData["Dictionary"]=attr;
- return View();
- }
<%=Html. TextBox("name","value",ViewData["Dictionary"] as IDictionary<string,object>)%>
<%=Html.HttpMethodOverride("HttpVerbs.Delete")%>用来是的MVC支持REST协议。
强类型辅助方法的命名方式皆为在原先名称的最后加上"For"
URL辅助方法:
URL辅助方法与HTML辅助方法很类似,URL辅助方法用于生成HTML代码,HTML辅助方法用于生成网址;
Url.Action():
- <%=Url.Action("About")%>
- <%=Url.Action("About",new{id=1})%>
- <%=Url.Action("About","Home")%>
- <%=Url.Action("About","Home",new{id=1})%>
Url.Encode():
与Server.RrlEncode()方法的用法相同。
Url.Content():
可用于获取绝对路径<%=Url.Content("~/image/Logo.png")%>
Url.RouteUrl():
可以指定使用某个Route name来生成网址
Url.Route(new{id=123}) /Home/Index/123
Url.Route("root") /root/Home/Index
Url.Route("root",new{id=123}) /root/Home/Index/123
Url.Route("root",new{id=123},"https") https://localhost/root/Home/Index/123
Ajax辅助方法:
使用Ajax辅助方法时,必须在页面或MasterPage中加载MicrosoftAjax.js与MicrosoftMvaAjax.js这两个js文件,而要加载顺序要正确,否则会报错。
最常用的辅助方法有:
Ajax.ActionLink()
Ajax.BeginForm()
而这两个辅助方法和Html.ActionLink()、Html.BeginForm大致相同,只是多了一个AjaxOptions类可以设定
|
AjaxOptions属性名称 |
说 明 |
|
Confim |
单击时会弹出Comfirm对话框 |
|
HttpMethod |
设定HTTP请求的方法(Get或Post) |
|
InsertionMode |
设定通过Ajax辅助方法取回数据时要如果将数据新建到UpdateTargetId属性指定的元素中,有3个方法: InsertionMode.Replace:替代UpdateTargetId属性指定的内容 InsertionMode.InsertBefore:在UpdateTargetId属性之前插入 InsertionMode.InsertAfter:在UpdateTargetId属性之后插入 |
|
LoadingElementId |
在读取尚未完成时所显示的区块 |
|
OnBegin |
设置开始时要执行的JavaScript函数名称 |
|
OnComplete |
设置结束时要执行的JavaScript函数名称 |
|
OnFailure |
设置失败时要执行的JavaScript函数名称 |
|
OnSuccess |
设置完成时要执行的JavaScript函数名称 |
|
UpdateTargetId |
设定返回值要显示在哪个ID上 |
|
Url |
设定Request的网址 |
以下是通过Ajax辅助方法来删除数据Demo:
- <%Ajax.ActionLink("Delete","Delete",new {controller="Home",id="Model.Id"},new AjaxOptions{OnSuccess="Delete",Confirm="你确定要删除么?"},HttpMethod="POST",LoadingElementId="AjaxLoad")%>
- <script language="javascript" type="text/javascript">
- function Delete(data){
- alert(data.get_data);
- }
- </script>
在Action中
- [HttpPost]
- public ActionResult Delete(string id){
- ....
- return content("删除成功");
- }
自定义HTML辅助方法:
- using System;
- using System.Text;
- using System.Web.Mvc;
- namespace MvcApplication1.Helpers
- {
- public static class ImgHelper
- {
- public static string Img(this HtmlHelper helper,string url,string alternateText,string title){
- return String.Format("<img src='{0}' alt='{1}' title='{2}'/>",url,alternateText,title);
- }
- }
- }
注意,因为我们使用了自定义的HTML辅助方法,因此,必须在View的最上方将命名空间引用进来,才能使用这个自定义的HTML辅助方法,示例如下:
<%@ Import Namespace="MvcApplication1.Helper"%>
<%=Html.Img....
如果写复杂的Helper类,需要拼接字符串,使用StringBuilder,但是这个类使用没有任何的弹性,所以,MVC设计了TagBuilder类,能够以对象化程度更高的方式生成HTML标签。
验证:
可以使用MVC内置了数据验证机制,只要搭配了ViewModel及ASP.NET 5 sp1,或者ASP.NET4.0提供的Data Annotations函数库,即可实现数据验证,同时实现客户端和服务端的验证
只要在ViewModel中多加载System.ComponentModel.DataAnnotations类,并
[Required(ErrorMessage = "当前密码不能为空!")]
[DataType(DataType.Password)]
[DisplayName("当前密码")]
public stringOldPassword { get; set; }
后台:
利用 ModelState.IsValid验证,我们可以判断通过数据库模型绑定进来的数据是否符合ViewModel字段验证的要求,如果验证失败,则会返回false
前台:
1、在Site.Master文件中添加三个项目内置的JavaScript文件
<scriptsrc="http://www.cnblogs.com/Scripts/MicrosoftAjax.js"type="text/javascript"></script>
<scriptsrc="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js"type="text/javascript"></script>
<scriptsrc="http://www.cnblogs.com/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
2、在 <% using (Html.BeginForm()) {%>语句之前加入以下声明:
<%Html.EnableClientValidation(); %>
需要注意的是,a:如果一个页面中有两个或两个以上的窗口需要进行验证,则Html.EnableClientValidation()必须出现在Html.BeginForm()声明之前,否则验证无法执行;b:使用此种验证方式必须使用Html.BeginForm()声明窗口。
3、在每个字段上加上 <%: Html.ValidationMessageFor(model => model.Name, "", new{ Style = "color:red" })%>
以显示验证失败的错误提示
重复发送信息:
为了解决这样现象,可以使用PRG(Post-Redirect-Get)样式的概念,当遇到需要传送窗口数据的情况时,会先通过Http Post请求送出数据,在处理完数据之后,立即转向(Redirect)另一个网址,最后通过Http Get请求取得跳转后的页面
public ActionResult About(ViewModel model){
。。。
return RedirectToAction("Other", "Home");
}
如果我们希望在About接受到的ViewModel数据传递给Other视图,这时就必须使用TempData机制来传递这种只会用到"1次"的数据。
TempData是一个Dictionary对象,它与ViewData很想,但非常特殊,所有存储在TempData中的数据只能被参考一次,用过之后数据就会被清空,我们可以利用TempData的特性,将About动作接受到的ViewMode类的数据传递给Other。
在About方法中需要有
TempData["LastPostViewModel"]=model;
然后在Other中
if(TempData["LastPostViewModel"]==null){
return RedirectToAction("Index");
}
var model = (强转)TempData["LastPostViewModel"];
mvc VIEW部分介绍的更多相关文章
- view components介绍
view components介绍 在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大. VCs兼顾了视图和控制器的优点,你可以把VCs ...
- .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI
作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...
- 转载 mvc:message-converters简单介绍 https://www.cnblogs.com/liaojie970/p/7736098.html
mvc:message-converters简单介绍 说说@ResponseBody注解,很明显这个注解就是将方法的返回值作为reponse的body部分.我们进一步分析下这个过程涉及到的内容,首先就 ...
- MVC模式的介绍(C#)
MVC模式的介绍(C#) Benefits在开发项目中使用“模型-视图-控制器(MVC)”模式的好处在于可以完全消除商业流程和应用表达层之间的相互影响.此外,还可以获得一个完全独立的对象来控制表达 ...
- asp.net core mvc View Component 应用
ViewComponent 1.View 组件介绍 在ASP.NET CORE MVC中,View组件有点类似于partial views,但是他们更强大,View组件不能使用model bindin ...
- ASP.NET MVC View 和 Web API 的基本权限验证
ASP.NET MVC 5.0已经发布一段时间了,适应了一段时间,准备把原来的MVC项目重构了一遍,先把基本权限验证这块记录一下. 环境:Windows 7 Professional SP1 + Mi ...
- 【记录】ASP.NET MVC View 移动版浏览的奇怪问题
ASP.NET MVC View 中的一段代码: <span id="span_Id">@Model.ID</span> 没什么问题吧,浏览器浏览正常,查看 ...
- Android Animation学习(六) View Animation介绍
Android Animation学习(六) View Animation介绍 View Animation View animation系统可以用来执行View上的Tween animation和F ...
- ASP.Net MVC View
ASP.Net MVC View(视图) View视图职责是向用户提供界面.负责根据提供的模型数据,生成准备提供给用户的格式界面. 支持多种视图引擎(Razor和ASPX视图引擎是官方默认给出的, ...
随机推荐
- 转发一个javascript的编码规范
google出品:http://chajn.org/jsguide/javascriptguide.html
- curl 使用
1.cURL介绍 cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性 ...
- 基于UDP协议的网络编程
UDP协议是一种不可靠的网络协议,它在通信实例的两端各建立一个Socket,但这两个Socket之间并没有虚拟链路,这两个Socket只是发送.接收数据报的对象. Java使用DatagramSock ...
- Idea把依赖打入Jar包,Maven项目步骤
1:修改pom.xml安装assembly插件 1:修改pom.xml 安装assembly插件 <plugin> <artifactId>maven-assembly-plu ...
- 关于STM32的IO口速率问题
输入模式可以不用配置速度,但是输出模式必须确定最大输出频率.当STM32的GPIO端口设置为输出模式时,有三种速度可以选择:2MHz.10MHz和50MHz,这个速度是指I/O口驱动电路的速度,是用来 ...
- ACdream 1028 Path
先思考一下序列上应该怎么做. 如果某段和为x,并且x为偶数,那么比x小的偶数,一定是这段的子段. 如果某段和为x,并且x为奇数,那么比x小的奇数,一定是这段的子段. 因此....只要寻找最大的连续的和 ...
- hdu1022
#include <stdio.h>#include <string.h> int main(void){ int n,i,j,k,l; char o1[10],o2[10], ...
- socket的accept函数解析
今天与同学争执一个话题:由于socket的accept函数在有客户端连接的时候产生了新的socket用于服务该客户端,那么,这个新的socket到底有没有占用一个新的端口? 讨论完后,才发现,自己虽然 ...
- HTML通过事件传递参数到js一
原文链接:http://bbs.51cto.com/thread-1098421-1-1.html 目标处理函数为selectAttr(test) 1.直接传递给定参数如: onclick=" ...
- Nodejs(待补充)
Nodejs从入门到精通(待补充) 首先安装n模块: npm install -g n 第二步: 升级node.js到最新稳定版 n stable 是不是很简单?! n后面也可以跟随版本号比如: n ...