MVC - 12.HtmlHelper

1.动态生成URL

• @Url.Action("Index3","Stu3")
• @Url.RouteUrl("Default2", new { controller = "Stu3", action = "Index3", id = UrlParameter.Optional })

• ---

2.在视图上直接请求其他action

• @Html.Action("actionName")

---

3.生成超链接

• @Html.ActionLink("我是超链接~", "Party", "Home", new { id = "newId", style = "color:red" })

---

4.表单Form

• 4.1.@using (Html.BeginForm())
• 4.2.Begin End

• ---

5.弱类型和强类型方法

• 5.1.弱类型方法：@Html.TextBox("Title",model.Title);
• 5.2.强类型方法：@Html.TextBoxFor(s=>s.Name)

• ---

6.LabelFor & 模型元数据

• @Html.LabelFor(s=>s.Name)

---

7.Display / Editor 模型元数据

• [DataType(DataType.Password)]
• @Html.EditorFor(s=>s.Name)

 

1.动态生成URL

 

RouteConfig.cs

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Stu", action = "Index", id = UrlParameter.Optional }
            );
            routes.MapRoute(
                name: "Default2",
                url: "{action}/{controller}/{id}",//{action}/{controller}位置改编
                defaults: new { controller = "Stu", action = "Index", id = UrlParameter.Optional }
            );

 

Html/index.cshtml

直接编写 url 造成格式固定，不灵活<br/>
<a href="/Stu/Index">1.去玩</a><br />
Url.Action 方法 根据 路由规则生成 url 地址<br />
<a href="@Url.Action("Index3","Stu3")">2.去玩Url.Action</a><br />
Url.RouteUrl 方法 根据 路由 name 生成 url 地址，更灵活<br />
<a href="@Url.RouteUrl("Default2", new { controller = "Stu3", action = "Index3", id = UrlParameter.Optional })">
    3.去玩 Url.RouteUrl
</a>

 

2.在视图上直接请求其他action

@Html.Action("actionName")

参考：8.4 MVC – 8.Razor 布局

 

3.生成超链接

@Html.ActionLink("我是超链接~", "Party", "Home", new { id = "newId", style = "color:red" })

html源代码

<a href="/Html/Party?Length=4" id="newId" style="color:red">我是超链接~</a>

 

4.表单Form

 

4.1.强烈推荐第一种用法

@using (Html.BeginForm("HandleForm", "Home", FormMethod.Post, new { id = "form1" }))
{
    <input type="text" />
}

4.2.Begin End

@Html.BeginForm("HandleForm", "Home", FormMethod.Post, new { id = "form2" })
<input type="text" />
@{Html.EndForm();}

 

5.弱类型和强类型方法

5.1.弱类型方法：

指定 name 和 value

@Html.TextBox("Title",model.Title);

<input id="Title" name="Title" type="text" value="aaaa" /></form>

@Html.RadioButton("chkHabit","篮球",true)

<input checked="checked" id="chkHabit" name="chkHabit" type="radio" value="篮球" />

等其他控件方法也一样

 

5.2.强类型方法：

强类型方法名有"For"后缀

 

因为在Razor引擎内部，<> 尖括号在这里被识别为html标签

通过lambda表达式指定模型属性(@model)

@model _06MVCAjax_CodeFirst.Models.Student

@Html.TextBoxFor(s=>s.Name)

@Html.DropDownListFor(s => s.Cid, ViewBag.seList as IEnumerable<SelectListItem>)

特殊案例：

单选按钮：性别

@*<input type="radio" id="GenderFF" name="Gender" value="保密" checked="checked" />保密
                <input type="radio" id="GenderM" name="Gender" value="男" />男
                <input type="radio" id="GenderW" name="Gender" value="女" />女*@
@Html.RadioButtonFor(s => s.Gender, "保密", new { id = "GenderFF" })保密
                @Html.RadioButtonFor(s => s.Gender, "男", new { id = "GenderM" })男
                @Html.RadioButtonFor(s => s.Gender, "女", new { id = "GenderW" })女

js

//性别
                    if (jsonObj.Data.Gender=="男") {
                        $("#GenderFF").removeAttr("Checked");
                        $("#GenderW").removeAttr("Checked");
                        $("#GenderM").attr("Checked","Checked");
                    }else if (jsonObj.Data.Gender=="女") {
                        $("#GenderFF").removeAttr("Checked");
                        $("#GenderM").removeAttr("Checked");
                        $("#GenderW").attr("Checked","Checked");
                    }else {
                        $("#GenderM").removeAttr("Checked");
                        $("#GenderW").removeAttr("Checked");
                        $("#GenderFF").attr("Checked","Checked");
                    }

6.LabelFor & 模型元数据

把姓名，班级，性别改为lable标签

@Html.LabelFor(s=>s.Name)

@Html.LabelFor(s => s.Cid)

@Html.LabelFor(s => s.Gender)

效果如下：

<label for="Name">Name</label>

<label for="Cid">Cid</label>

<label for="Gender">Gender</label>

 

解决方案：

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

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

[DisplayName("班级名")]
        public Nullable<int> Cid { get; set; }

注意：DisplayName需要命名空间

using System.ComponentModel;

生成的html代码：

<label for="Name">姓名</label>

 

7.Display / Editor 模型元数据

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

[DataType(DataType.Password)]
        public string Name { get; set; }

注意：DataType需要命名空间:

using System.ComponentModel.DataAnnotations;

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

@*<input type="text" id="Name" name="Name" />*@
@Html.EditorFor(s=>s.Name)

生成的html代码：

<input type="password" value="" name="Name" id="Name" class="text-box single-line password">