MVC @Html控件

最新推荐文章于 2021-06-17 23:41:58 发布

weixin_30374009

最新推荐文章于 2021-06-17 23:41:58 发布

阅读量272

点赞数 1

文章标签：测试 javascript c# ViewUI

原文链接：http://www.cnblogs.com/wangcq/p/3624738.html

版权

传统的Html元素不能和服务端数据进行绑定 HtmlHelper类提供了一系列的方法来生成Html元素并可以实现与数据绑定在一起然后生成Html

Html.BeginForm（actionName , controllerName , FormMethod , htmlAttribute）

创建一个表单

actionName 和 controllerName

这两个参数表示表单要提交到哪个controllerName下的哪个Action方法中

FormMethod

此参数是一个枚举表示表单提交方式 GET or POST

htmlAttribute

表示form元素的Html属性是一个object对象使用new {html属性名字="值"} class也是html属性但同时它是C#关键字只能这样指定：new {@class="formstyle"}

Html.EndForm（）

表示表单结束如

1 @Html.BeginForm("index", "default", FormMethod.Post, new {id="form1"})
2 <input type="text" />
3 @{Html.EndForm();}

BeginForm方法返回System.Web.Mvc.Html.MvcForm类型如果不用中括号括起来则表示要输出该方法返回的值 EndForm无返回值所以也需要使用中括号括起来最后一个参数通过objecr来指定它的Html属性

Html.Raw()

@Html.Raw() 方法输出带有html标签的字符串，如：
@Html.Raw("<div style='color:red'>输出字符串</div>")
结果：输出字符串

Html.RadioButton（name,value,Ischecked,htmlAttribute）

创建单选按钮

name

单选按钮的name

value

单选按钮的值

Ischecked

是否是选中状态

1 @{Html.BeginForm("index", "default", FormMethod.Post);}
2     男人 @Html.RadioButton("radiobtn","man",true,new{@class="radioStyle"})
3     女人 @Html.RadioButton("radiobtn","woman",false,new{@class="radioStyle"})
4 @{Html.EndForm();}

Html.RadioButtonFor（expression,value,htmlAttribute）

同样是创建单选按钮的方法但+For后缀的方法可以使用强类型作为参数expression的参数推导出类型的属性它可以将类型的属性名字作为表单元素的name的值

expression

类型为System.Linq.Express.Expression.<Fun<dynamic,Tproperty>>的表达式如

1 @model Course.Models.Employee
2 @{Html.BeginForm("index", "default", FormMethod.Post);}
3     北京 @Html.RadioButtonFor(n=>n.Address,"北京",new{@class="radioStyle",@checked="checked"})
4     上海 @Html.RadioButtonFor(n=>n.Address,"上海",new{@class="radioStyle"})
5 @{Html.EndForm();}

Html.CheckBox（）

创建复选框

不建议使用此方法来创建复选框服务端不好获取值请直接使用input 注意每个复选框需要有value值否则获取的选中的复选框的值永远是on

1 <input type="checkbox" class="Book" value="1" name="Books" checked="checked"/>民谣<br/>
2 <input type="checkbox" class="Book" value="2" name="Books" checked="checked"/>电子<br/>
3 <input type="checkbox" class="Book" value="3" name="Books" />低保真<br/>

在Action中这样获取

1 public ActionResult Editor(int[] Books)
2 {
3     foreach (var item in Books)
4     {
5     }
6 }

Html.CheckBoxFor（）

不建议使用此方法

Html.DropDownList（name , selectList , defaultSelected,htmlAttribute）

创建下拉选项

name

下拉选项的name

selectList

一个IEnumerable<SelectListItem>集合集合中的每个选项是SelectListItem类型的我们可以在Action中创建实现了IEnumerable<selectListItem>接口的集合然后将集合作为此方法的第二个参数如

 1 public ActionResult Index()
 2 {
 3     List<SelectListItem> itemList = new List<SelectListItem>
 4     {
 5         new SelectListItem{Text="荔枝",Value="荔枝", Selected=false},
 6         new SelectListItem{Text="番茄",Value="番茄",Selected=false},
 7         new SelectListItem{Text="芒果",Value="芒果",Selected=false}
 8     };
 9     ViewData["choose"] = itemList;
10     return View();
11 }

在视图中

1 @{Html.BeginForm("index", "default", FormMethod.Post);}
2     @Html.DropDownList("choose",ViewData["choose"] as IEnumerable<SelectListItem>,new{@class="selectStyle"})
3 @{Html.EndForm();}

defaultSelected

一个文本表示默认选择的项可选

1 @Html.DropDownList("choose",ViewData["choose"] as IEnumerable<SelectListItem>,"请选择",new{@class="selectStyle"})

使用Linq创建下拉选项集合如

 1 public ActionResult Index()
 2 {
 3     List<Employee> empList = new List<Employee>
 4     {
 5             new Employee{ ID=1, Name="sam"},
 6             new Employee{ ID=2, Name="leo"},
 7             new Employee{ ID=3, Name="korn"}
 8     };
 9     List<SelectListItem> itemList = (from n in empList.ToList()
10                                         select new SelectListItem { Text = n.Name, Value = n.ID.ToString(), Selected = false }).ToList();
11 
12     ViewData["choose"] = itemList;
13     return View();
14 }

还可以直接创建SelectList对象来得到同样的结果这种方式更简洁如

 1 public ActionResult Index()
 2 {
 3     List<Employee> empList = new List<Employee>
 4     {
 5             new Employee{ ID=1, Name="sam"},
 6             new Employee{ ID=2, Name="leo"},
 7             new Employee{ ID=3, Name="korn"}
 8     };
 9     SelectList selecyList = new SelectList(empList, "ID", "Name");
10     ViewData["choose"] = selecyList;
11     return View();
12 }

在视图中只需两个参数参数1为choose 引用的是ViewData["choose"]中的键

1 @Html.DropDownList("choose","请选择")

Html.DropDownListFor（expression,selectList,htmlAttribute）

同样是创建下拉选项的方法但+For后缀的方法可以使用强类型作为参数expression的参数推导出类型的属性它可以将类型的属性名字作为下拉选项元素的name的值

expression

类型为System.Linq.Express.Expression.<Fun<dynamic,Tproperty>>的表达式

selectList

类型为SelectLlist的对象

 1 public ActionResult Index()
 2 {
 3     List<Employee> empList = new List<Employee>
 4     {
 5             new Employee{ ID=1, Name="sam"},
 6             new Employee{ ID=2, Name="leo"},
 7             new Employee{ ID=3, Name="korn"}
 8     };
 9     SelectList selectList = new SelectList(empList, "ID", "Name");
10     ViewData["choose"] = selectList;
11     return View();
12 }

在视图中

1 @model Course.Models.Employee
2 @{Html.BeginForm("index", "default", FormMethod.Post);}
3     @Html.DropDownListFor(n=>n.Name,ViewData["choose"] as SelectList,new{@class="selectStyle"})
4 @{Html.EndForm();}

Html.ActionLink(linkText , actionName , controlName , routeValues , htmlAttribut）

//var url = "Url.Action("SearchResult")" + "?name=" + keyword;

创建超链接

linkText

超链接文本

actionName

提交到哪个Action处理

controlName

提交到哪个控制器可选默认就是当前视图所属的Action所在的控制器

routeValues

object对象设置超链接查询字符跟设置html属性是一样的如new {id=1,name="sam"}

1 @Html.ActionLink("详细","Detail",new { id=1})

生成的超链接为

1 生成对应的超链接为：
2 <a href="default/Detail/1">详细</a>

提供多个查询字符

1 Html.ActionLink("详细","Detail",new { id=1,name="sam"})
2 生成对应的超链接为：
3 <a href="default/Detail?id=1&name=1">详细</a>

Html.Partial（）

将分布视图渲染到当前视图页面该方法具有多个重载版所有参数介绍如下

partialName

参数为分布视图名称

viewData

一个ViewDataDictionary类型的对象

model

分布视图需要使用的强类型对象

分布视图可以手动在当前视图的目录中创建扩展名还是cshtml 只不过里面没有<html>/<head>/<body>标签你可以在分布视图中编写body以下级别的html元素也可以写Js和服务端脚本除了没有几个主体标签其它和视图都是一样的可以右击Action - 添加视图选择分布视图如

打开TestPartial文件输入以下代码做个测试

<div style="background:#010067;width:200px;height:100px;padding-top:50px;text-align:center;color:white;">
    <label style="color:red;font-size:20px;font-weight: bolder;vertical-align:middle;">+</label>
    <label style="vertical-align:middle;">这个框里的内容是分布视图TestPartial</label>
</div>

接着打开Index视图调用此方法来加载分布视图TestPartial

<body>
    <div style="background:#ffd800;width:200px;padding:10px;">
        这是Index视图<br /><br />
        @Html.Partial("TestPartial")
    </div>
</body>

运行http://localhost:8559/default/index 结果如图：

viewData参数和model参数的用法如下

<body>
    <div style="background:#ffd800;width:200px;padding:10px;">
        这是Index视图<br /><br />
        @Html.Partial("TestPartial", new Course.Models.Employee{ ID=1, Name="sam"}, new ViewDataDictionary { {"music1","Free Jazz"},{"music2","BossaNova"}})
    </div>
</body>

在分布视图中可获取viewData和model model必须声明一下

@model Course.Models.Employee
<div style="background:#010067;width:200px;height:100px;padding-top:50px;text-align:center;color:white;">
    <label style="color:red;font-size:20px;font-weight: bolder;vertical-align:middle;">+</label>
    <label style="vertical-align:middle;">@Model.Name</label>
    <p><label style="vertical-align:middle;">@ViewData["music1"]</label></p>
    <p><label style="vertical-align:middle;">@ViewData["music2"]</label></p>
</div>

运行http://localhost:8559/default/index 结果如图：

Html.RenderPartial（）

与Partial方法有类似的行为区别在于Partial是将分布视图作为字符串加入主视图而RenderPartial则是将分布式图写入响应输出流在性能上RenderPartial要优于前者但以往内此方法不返回值所以必须使用中括号括起来

@{Html.RenderPartial("TestPartial");}
@{Html.RenderPartial("TestPartial", new Course.Models.Employee{ ID=1, Name="sam"}, new ViewDataDictionary { {"music1","Free Jazz"},{"music2","BossaNova"}});}

Html.Action（）

调用一个子操作（Action）并以Html形式返回结果

actionName

Action的名称

controllerName

控制器的名称

routeValues

路由参数格式:new {id=xx,code=xxx}

此方法与Partial类似区别在于 Partial方法不经过Action处理它直接加载一个分部视图页面而Action方法会先经过Action处理再加载分布视图其用法如下

public ActionResult Menu()
{
    return PartialView("Menu");
}

右击Menu方法创建一个分部视图Menu 打开分部视图输入如下代码

<div style="background: #010067; text-align: center; color: white;">
    <p>这是分布视图</p>
    <ul>
        <li>坂本龍一  </li>
        <li>Ian Brown</li>
        <li>Ataraxia </li>
    </ul>
</div>

在Index页面调用此方法

<body>
    <div style="background:#ffd800;width:200px;padding:10px;">
        这是Index视图<br /><br />
        @Html.Action("Menu")
    </div>
</body>

结果

Html.RenderAction（）

与Action方法有类似的行为区别在于Action方法是将分布视图作为字符串加入主视图而RenderAction则是将分布式图写入响应输出流在性能上RenderAction要优于前者但以往内此方法不返回值所以必须使用中括号括起来

类似的Html辅助方法还有Html.Hidden（）、Html.PassWord（）、Html.TextBox（）略 ……

UrlHelper类提供了方法用于生成URL

Content（）

将一个虚拟的、相对的URL转换为应用程序的绝对URL 如

1 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Encode（）

对URL地址进行加密

1 @Url.Encode("http://www.cnblogs.com/")

生成http%3a%2f%2fwww.cnblogs.com%2f

转载于:https://www.cnblogs.com/wangcq/p/3624738.html

weixin_30374009

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MVC @Html控件

传统的Html元素不能和服务端数据进行绑定 HtmlHelper类提供了一系列的方法来生成Html元素并可以实现与数据绑定在一起然后生成HtmlHtml.BeginForm（actionName , controllerName , FormMethod , htmlAttribute）创建一个表单actionName 和 controllerName 这两个参数表示表单...
复制链接

扫一扫