ASP.NET MVC - HTML 帮助器

时间:2019-03-14
本文章向大家介绍ASP.NET MVC - HTML 帮助器,主要包括ASP.NET MVC - HTML 帮助器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

HTML 帮助器用于修改 HTML 输出。


 

HTML 帮助器

通过 MVC,HTML 帮助器类似于传统的 ASP.NET Web Form 控件。

类似 ASP.NET 中的 web form 控件,HTML 帮助器用于修改 HTML。但是 HTML 帮助器更轻。与 web form 控件不同,HTML 帮助器没有事件模型和 view state。

在大多数情况下,HTML 帮助器仅仅是返回字符串的方法。

通过 MVC,您能够创建自己的帮助器,或者使用内建的 HTML 帮助器。


以下为@Html 控件的一些用法:

1、创建表单:@Html.BeginForm(actionName , controllerName , FormMethod , htmlAttribute,new {html属性名字="值",@class=""})

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

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

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

 new {html属性名字="值"} class也是html属性 但同时它是C#关键字 只能这样指定:new {@class="formstyle"}

new {}是一个对象,对象中指定html属性

@Html.EndForm() --> 表达结束

举个栗子:上传文件的表达

@using (Html.BeginForm("PostFile", "Service", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div style="height:50px;width:300px; text-align:center;margin:0px auto;margin-top:80px;">
            <a href="javascript:;" class="file">
                选择文件
                <input type="file" name="file" id="file">
            </a>
            <p style="text-align:center">
                <a href="~/Content/SysFile/模板.xlsx">模板下载</a>
            </p>
        </div>
}

2、创建表单中的元素:

单选按钮:

  @Html.RadioButton(name,value,Ischecked,htmlAttribute)

  name单选按钮的name

  value单选按钮的值

  Ischecked是否是选中状态 (true |  false)

@Html.RadioButton("radiobtn","man",true,new{@class="radioStyle"})男
@Html.RadioButton("radiobtn","women",false,new{@class="radioStyle"})女

  @Html.RadioButtonFor(expression,value,htmlAttribute)

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

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

@Html.RadioButtonFor(n=>n.sex,"",new{@class="radioStyle",@checked="checked"})
@Html.RadioButtonFor(n=>n.sex,"",new{@class="radioStyle"})


复选框:@Html.CheckBox()  和@Html.CheckBoxFor()   此方法从未使用过,因为不好在服务端获取值,建议直接用html标签:

<input type="checkbox" class="Book" value="1" name="box" checked="checked"/>.net<br/>
<input type="checkbox" class="Book" value="2" name="box" checked="checked"/>C#<br/>
<input type="checkbox" class="Book" value="3" name="box" />C++<br/>

 

下拉框:@Html.DropDownList(name , selectList , defaultSelected,htmlAttribute)

name下拉选项的name

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

 @Html.DropDownList("state", new List<SelectListItem>()
{
    new SelectListItem(){ Text="认证成功",Value="1"},
    new SelectListItem(){ Text="待认证",Value="2"},
    new SelectListItem(){ Text="未认证",Value="0"},
    new SelectListItem(){ Text="认证失败",Value="3"}
}, "状态")

也可以来自服务端:

 @Html.DropDownList("state", ViewData["State"], "状态")

服务端代码:

 ViewData["State"] = new List<SelectListItem>()
{
         new SelectListItem(){ Text="认证",Value="1"},
         new SelectListItem(){Text="未认证",Value="0" }
};

defaultSelected 一个文本 表示默认选择的项 可选参数如:

@Html.DropDownList("state", ViewData["State"], "状态","未认证",new {@class="style"})

 

@Html.DropDownListFor(expression,selectList,htmlAttribute)

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

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

selectList类型为SelectLlist的对象

@Html.DropDownListFor(model => model.Address, ViewData["area"] as List<SelectListItem>, "-请选择-",new{@class="selectStyle"})

3、@Html.Raw()方法

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

 

4、创建超链接 @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"}

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

 

5、动态加载分布视图 @Html.Partial(partialName,viewData["model"])

partialName 参数为分布视图名称

viewData 一个ViewDataDictionary类型的强类型对象

 @Html.Partial("_partial", Model)
Model为服务器传输的强类型对象

@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(actionName,controllerName,routeValues,new {id=xx,code=xxx}

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

actionName  Action的名称

controllerName 控制器的名称

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

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

//加载左部分菜单栏,只需要插入代码

 @Html.Action("LeftMenu", "Menu")

 

6、@Html.HiddenFor()、@Html.PassWord()、@Html.TextBox()

这些辅助控件也非常好用:@Html.HiddenFor(model => model.Logo, new { id = "imgurl" }) 等...

 

7、 @Html.ValidationSummary(true, "", new { @class = "text-danger" })

Validation 是服务器控件

定义和用法

ValidationSummary 控件用于在网页、消息框或在这两者中内联显示所有验证错误的摘要。

在该控件中显示的错误消息是由每个验证控件的 ErrorMessage 属性规定的。如果未设置验证控件的 ErrorMessage 属性,就不会为那个验证控件显示错误消息。

属性

主要用于验证表单中的必填内容    具体用法请参考:http://www.w3school.com.cn/aspnet/aspnet_refvalidationcontrols.asp

 


 

总结:在实际项目中并非所有的标签都要用@Html 控件 选取重要的方便的标签以达到开发需要,我们最终的目的还是实现项目功能!

上一页 下一页

原文地址:http://www.manongjc.com/article/72436.html