12、ASP.NET MVC入门到精通——HtmlHelper

时间:2022-12-31 08:21:33

本系列目录:ASP.NET MVC4入门到精通系列目录汇总

HtmlHelper:是为了方便View的开发而产生

HtmlHelper的演变

普通首页超级链接为:<a href="/home/index">首页</a>

当路由改变时候则可能需要修改为:<a href="/home/index1">首页</a>,如果项目里面有很多超级链接那需要改动很多地方

路由改变也不受影响:<a href="<%=Url.Action("Index","Home")%>">首页</a>

因为没有智能感知,调试不方便,所以应运而生了:Html.Action("Home","Index")

HtmlHelper之Action、表单标签

ActionLink()

动态生成超链接:根据路由规则,生成对应的 html 代码。

//1.注册路由信息
routes.MapRoute(
name: "Test",
url: "{controller}_yujie/{action}.html/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
//2.在视图上创建超链接
<a href="/Home/Index">网站首页</a><br />
@Html.ActionLink("网站首页","Index", "Home")
//3.在浏览器看到的生成结果
<a href="/Home/Index">网站首页</a><br />
<a href="/Home_yujie/Index.html">网站首页</a>

HtmlHelper – Form

方式一:{}   强烈推荐

@using(Html.BeginForm("HandleForm", "Home"))
{ }

方式二:Begin   End

@Html.BeginForm()
@{Html.EndForm();}

//1.在视图中 创建 表单

@using (Html.BeginForm("Add", "home", FormMethod.Post, new { id="form1" }))
{ }

//2.生成的html代码

<form action="/home/Add" id="form1" method="post"> </form>
//直接在视图中 @ 调用有返回值的方法,就已经相当于是将返回值写入Response了
@Html.Label("UserName")
//相当于下面代码
@{
Response.Write(Html.Label("UserName"));
}

HtmlHelper –弱类型与强类型方法

Lable()等生成html标签方法

弱类型方法:指定name和value

注:所有的方法都默认去视图的Model属性所储存的对象中查找匹配属性

  using System.ComponentModel;
//1.为实体类添加特性DisplayName
public class User
{
[DisplayName("用户名")]
public string UserName { get; set; }
}
    //2.在Action方法中,为视图 的 Model 设置值
    public ActionResult Index()
    {
         return View(new User { UserName = "郭靖" });
    }

//3.在视图中,通过html的帮助方法,生成 html 标签,同时指定,要读取的 属性名

@Html.Label("UserName")

//4.生成对应的html标签,并自动读取了对应属性的DisplayName里的文本。

<label for="UserName">用户名</label>

其他控件方法也一样

强类型方法:通过lambda表达式指定模型属性(@model)

强类型方法,直接通过 lambda表达式,去视图的Model属性对象中查找对应的属性数据

  @Html.TextBoxFor(m=>m.UserName); //1.视图上调用方法
<input type="text" id="UserName" name="UserName" value="郭靖"/> //2.生成的html代码

超强强类型方法(通过属性的DataType特性生成html标签)

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
/// <summary>
/// 1.在实体类中为Remark属性设置DataType特性,指定为多行文本框
/// </summary>
[DataType(DataType.MultilineText)]
public string Remark { get; set; }

//2.视图上 自动根据model对象里属性保存的实体类属性的[DataType] 特性里指定的类型生成对应的html标签

@Html.EditorFor(a=> a.Remark)

/3.生成html代码

<textarea id="Remark" class="text-box multi-line" name="Remark"></textarea>

HtmlHelper – LabelFor & 模型元数据

模型类的元数据包括:属性(名称和类型) 与 特性包含的值。

为实体类属性设置 DisplayName 特性:

[DisplayName("用户名")]
public string UserName{ get; set; }

在 新增/修改 页面上显示某个属性的标签说明:

@Html.LabelFor(model => model.UserName)

生成Html源码:<label for="UserName">用户名</label>

HtmlHelper – Display / Editor 模型元数据

@Html.Editor / @Html.Display 可以通过读取特性值生成HTML:

        [DataType(DataType.MultilineText)]
[DisplayName("备注")]
public string Remark { get; set; }

控制器中:

        public ActionResult Index()
{
//ViewBag.UserName = "小李飞刀";
return View(new User { UserName = "郭靖",Remark="武林高手" });
}

在 新增/修改 页面上显示某个属性的input标签:

<div>@Html.DisplayFor(model => model.Remark):@Html.EditorFor(a=> a.Remark)</div>

生成Html源码:

<div>武林高手:<textarea id="Remark" class="text-box multi-line" name="Remark">武林高手</textarea></div>

支持强类型(1):Html.xxFor

这种方式生成的html控件的name和指定实体对应的属性名一致

12、ASP.NET MVC入门到精通——HtmlHelper

弱类型(2):Html.xx(“”)

<%: Html.TextBox("Id")%>

DropDownList

var items = new List<SelectListItem>()
{
    (new SelectListItem() {Text = "001", Value = "1", Selected = false}),
    (new SelectListItem() {Text = "002", Value = "2", Selected = false})
};

将items值给ViewData: ViewData["items"] = items;
在视图中这样使用: @Html.DropDownList("items")
CheckBox & RadioButton & Hidden & Password

@Html.CheckBox(“bookType”) 在Controller获取提交的值为(true,false)未操作  true选择  false不选择三种
RadioButton第一个参数为控件名字(名字相同说明为同一个Group),返回值为第二个参数(红色部分)

@Html.RadioButton("favColor", "Blue", true)Blue <br />
@Html.RadioButton("favColor", "Purple", false) Purple <br />
@Html.RadioButton("favColor", "Red", false) Red <br />
@Html.RadioButton("favColor2", "Orange", false) Orange <br />
@Html.RadioButton("favColor2", "Yellow", false) Yellow <br />
@Html.RadioButton("favColor2", "Brown", false) Brown <br />
@Html.RadioButton("favColor2", "Green", false) Green

HtmlHelper –RenderPartial

从分部视图里取数据

@Html.RenderPartial( "Par", ViewData.Model );
@Html.RenderPartial( "~/Views/Home/Par.cshtml ", ViewData.Model );

直接将用户控件嵌入到界面上
这个方法通过接受分部视图的文件名以及相应的可变化的数据进行的呈现可重用 分部视图 显示到具体的页面中
区别:
    布局页面(模板页)子页,是把自己的内容填到 布局页面上去;
    分部视图:供某个页面过来取分部视图的内容。

HtmlHelper类 - RenderAction

在视图中请求某个 Action方法 (违反了mvc设计)

 @{Html.RenderAction("Test");}

允许你直接调用某个Action,并把返回的结果直接显示在当前调用的View中

两者的相同点
RenderPartial和RenderAction通常都被用来显示一个功能相对独立的“块”,比如说显示菜单或者导航条。 两者输出的结果都被作为调用的View的一部分显示。
两者的不同点
RenderPatial的数据来自于调用的View,而RenderAction来自自己。
RenderAction会发起一个新的Request,而RenderPatial不会。
如何选择
根据两者不同点中的第二点,由于RenderAction会调用一个新的Action方法,而Asp.net Mvc中Action是最小的缓存单位,因此如果某一个“块”的数据比较固定,不会因为访问者的不同而发生变化,那么这时就是使用 RenderAction的时候了。 题外话,对于RenderAction会发起一个新的Request,感觉对调用页面的流程有点破坏。一个View在显示的时候,自己又发起一个 Request去获取数据来显示,显然有点破坏了作为一个View的原则:A View should only know how to render, but not what to render!

HtmlHelper扩展方法

扩展方法:

1.方法所在的类必须是静态的

2.方法也必须是静态的

3.方法的第一个参数必须是你要扩展的那个类型,比如你要给int扩展一个方法,那么第一个参数就必须是int。

4.在第一个参数前面还需要有一个this关键字。
在MVC中扩展HtmlHelper后,要在使用扩展方法的页面上引用扩展方法所在的名称空间
     例如: @using Ebuy.Models

    public class User
{
public string Name { get; set; }
}
public static class UserHelper
{
public static string UserShow(this HtmlHelper<User> helper)
{
var user = helper.ViewData.Model;
if (user.Name == "zouqj")
{
return string.Format("<div>我是{0}</div>",user.Name);
}
else
{
return "<div>找不到</div>";
}
}
}

控制器

  public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
var model = new User { Name="zouqj"};
return View(model);
}

View调用

@model Ebuy.Models.User
@using Ebuy.Models
@Html.Raw(Html.UserShow()

界面显示:

我是zouqj

12、ASP.NET MVC入门到精通——HtmlHelper的更多相关文章

  1. 25、ASP&period;NET MVC入门到精通——Spring&period;net-业务层仓储

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 上一节,我们已经把项目框架的雏形搭建好了,那么现在我来开始业务实现,在业务实现的过程当中,不断的来完善我们现有的框架. 1.假设我们来做一个 ...

  2. 26、ASP&period;NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  3. 1、ASP&period;NET MVC入门到精通——新语法

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...

  4. 8、ASP&period;NET MVC入门到精通——View&lpar;视图&rpar;

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 View视图职责是向用户提供界面.负责根据提供的模型数据,生成准备提供给用户的格式界面. 支持多种视图引擎(Razor和ASPX视图引擎是官 ...

  5. 11、ASP&period;NET MVC入门到精通——AspnetMVC分页

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 说起分页,这基本上是我们Web开发中遇见得最多的场景,没有之一,可即便如此,要做出比较优雅的分页还是需要技巧的.这里我先说一种ASP.NET ...

  6. 13、ASP&period;NET MVC入门到精通——MVC请求管道

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 ASP.NET MVC的请求管道和ASP.NET请求管道基本上一模一样,如果你对ASP.NET请求管道十分熟悉的话,你只要关注一下不同点.看 ...

  7. 15、ASP&period;NET MVC入门到精通——MVC-路由

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Routing(路由) – URL url 作为广泛使用的Web用户接口,需要被重视 好的Url应该满足如下条件: URL应为获取某种资源提 ...

  8. 24、ASP&period;NET MVC入门到精通——数据库仓储

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 业务层调用数据层对象,我不想每次都new一个数据层对象,而是在数据层创建一个仓储,统一管理所有的对象调用. 1.在IDAL项目中,新建IDB ...

  9. ASP&period;NET MVC入门到精通——MVC请求管道

    https://www.cnblogs.com/jiekzou/p/4896315.html 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 ASP.NET MVC的请求管道和ASP.NE ...

随机推荐

  1. asp&period;net mvc添加多条数据到数据库

    mvc的视图太强大了,个人刚刚接触.(初级菜鸟,懂的不多,往大神们指点)需求是,客户点击添加按钮弹出一个框选择产品后直接添加到表单中,在表单可以自己更改产品的数量,以及一些信息.mvc表单提交的时候只 ...

  2. Jquery 实现json复杂查询等操作(jsonDB)

    一.jsonDB 下载地址:https://github.com/ThinkerCodeChina/jsonDB jsonDB是js的一个类库,实现使用SQL语句对json数据增删改查.jsonDB的 ...

  3. NPOI2&period;0

    今天在使用NPOI2.0读取上传excel文件(excel2010)时,报了一个很奇怪的错误:无效的 URI: 未能分析主机名. 在网上查找了下找到的出错情况跟这个完全不着边际,没有办法只有自己去测试 ...

  4. C&plus;&plus; trivial和non-trivial构造函数及POD类型(转)

    原博客地址http://blog.csdn.net/a627088424/article/details/48595525 最近正纠结这个问题就转过来了,做了点补充(参考<深度探索C++对象模型 ...

  5. cygwin with openssh

    新建系统变量 CYGWIN=ntsec path添加 ;c:\cygwin\bin 之后参考http://blog.csdn.net/benkaoya/article/details/8884677 ...

  6. The Painter&&num;39&semi;s Partition Problem Part II

    (http://leetcode.com/2011/04/the-painters-partition-problem-part-ii.html) This is Part II of the art ...

  7. Linux下添加源的几种方法

    sudo add-apt-repository  xxxxxxx sudo gedit /etc/apt/sources.list然后把源粘贴进去,保存,最后shell输入sudo apt-get u ...

  8. linux查看端口被占用等常用命令

    一   根据端口号 查找对应的服务 比如我们查查找端口号8189对应的服务是哪个 1  先根据端口号查找对应对的pid(进程id)为23367 netstat -anp  | grep 8189    ...

  9. UVALive - 3026:Period

    用KMP里面的next数组即可,原理就是next数组的原理 #include<cstdio> #include<cstdlib> #include<algorithm&g ...

  10. NPM install 中:-save 、 -save-dev 和 没有--save的情况

    原文地址:https://www.cnblogs.com/limitcode/p/7906447.html npm install moduleName 命令 . 安装模块到项目node_module ...