MVC辅助器方法之输入辅助器HtmlHelper

最新推荐文章于 2021-07-01 11:50:32 发布

极客研究者

最新推荐文章于 2021-07-01 11:50:32 发布

阅读量280

点赞数

分类专栏： ASP.NET MVC 文章标签： asp.net mvc 5 c# .net

本文链接：https://blog.csdn.net/qq_34550459/article/details/106229141

版权

ASP.NET MVC 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

只有HTML的form是没有用的,除非还创建了一些input元素。
在ASP.NET Web Page 3.2中的System.Web.WebPages.Html命名空间下,
HtmlHelper类提供了一系列的方法,用来创建表单上的元素。
HtmlHelper类
1.将上一篇的form表单进行改写:


@model MVC_ProjectDemo.Models.UserInfo

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddUser</title>
     @*引入Jquery类库*@
    <script src="~/JS/jquery.min.js"></script>
</head>
<body>
    <div>
        <h2>Add User</h2>
        @*<form action="/Home/AddUser" method="post">*@
        @*@{Html.BeginForm();}*@
        @using (Html.BeginForm("AddUser", "Home", FormMethod.Post, new { @class = "userClass", @id = "userForm", data_formType = "User" }))
        {
            <div class="dataElement">
                <label>Userid</label>
                @*<input type="text" name="Userid" value="@Model.Userid" />*@

                @Html.TextBox("Userid", Model.Userid)
            </div>
            <div class="dataElement">
                <label>Username</label>
                @*<input type="text" name="Username" value="@Model.Username" />*@
                @Html.TextBox("Username", Model.Username)

            </div>

            <div class="dataElement">
                <label>Gender</label>
                Male  @Html.RadioButton("maleRadio", 0, true)
                FeMale  @Html.RadioButton("femaleRadio", 1)

            </div>

            <div class="dataElement">
                <label>Password</label>
                @*<input type="password" name="Password" value="@Model.Password" />*@
                @Html.Password("Password", Model.Password)
            </div>
            <div class="dataElement">
                <label>Telephone</label>
                @*<input type="text" name="Telephone" value="@Model.Telephone" />*@
                @Html.TextBox("Telephone", @Model.Telephone)
            </div>

            <div class="dataElement">
                <label>SelfIntroduction</label><br />
                 @Html.TextArea("SelfIntroduction","",5,60,null)
            </div>
            <input type="submit" value="Submit" />
        }

        @*</form>*@
        @*@{Html.EndForm();}*@
    </div>
</body>
</html>

在这里插入图片描述
可以看到出现了一些data形式的标签属性,这些是MVC框架的提示,用以支持表单验证。
注意:还是要这样处理的
如果想让表单中的字段值,提交后自动映射到后台对应Action方法中的形参Model的属性,其元素的name属性值必须与Model属性名保持一致(不分区大小写)
在这里插入图片描述

2.根据模型属性创建input元素:

首先准备好模型类UserInfo:

using System;
using System.Data;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace MVC_ProjectDemo.Models
{
    public class UserInfo
    {
        [DisplayName("用户编号")]
        public int Userid { get; set; }
        [DisplayName("用户名称")]
        public string Username { get; set; }
        [DisplayName("密码")]
        public string Password { get; set; }
        [DisplayName("电话号码")]
        public string Telephone { get; set; }
        [DisplayName("出生日期")]
        public DateTime Birthday { get; set; }

        [DisplayName("创建时间")]
        public DateTime Createtime { get; set; }
        [DisplayName("用户类型")]
        public int Typeid { get; set; }
        [DisplayName("备注")]
        public string Remark { get; set; }
        [DisplayName("图像索引")]
        public int ImageIndex { get; set; }
        [DisplayName("电子邮件")]
        public string Email { get; set; }
    }

}

在ASP.NET MVC 5.2中的InputExtensions类中,为HtmlHelper提供了一些拓展方法,用于form表单上input元素的操作
InputExtensions类
改写:
使用强类型的input辅助器,每一个基本的input辅助器,都有一个对应的强类型辅助器

@*强类型视图模型对象*@
@model MVC_ProjectDemo.Models.UserInfo

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddUser</title>
    @*引入Jquery类库*@
    <script src="~/JS/jquery.min.js"></script>
    <script>
        $(function () {
            //debugger;
           // $('input#Gender:eq(0)').prop("id", "male")
            //$('input#Gender').prop("id", "female")
            
        });
    </script>
</head>
<body>
    <div>
        <h2>Add User</h2>
        @using (Html.BeginForm("AddUser", "Home", FormMethod.Post, new { @class = "userClass", @id = "userForm", data_formType = "User" }))
        {
        <div class="dataElement">
            <label>@Html.DisplayNameFor(model=>model.Userid)</label>
            @Html.TextBoxFor(model => model.Userid)
        </div>
            <div class="dataElement">
                <label>@Html.DisplayNameFor(model=>model.Username)</label>
                @Html.TextBoxFor(model => model.Username)
            </div>
            <div class="dataElement">
	         <label>@Html.DisplayNameFor(model => model.Gender)</label>
	          Male  @Html.RadioButtonFor(model => model.Gender, 0,new {@id="maleRadion",@checked=true})
	          FeMale  @Html.RadioButtonFor(model => model.Gender, 1,new {@id="femaleRadio"})
            </div>
            <div class="dataElement">
                <label>@Html.DisplayNameFor(model=>model.Password)</label>
                @Html.PasswordFor(model => model.Password)
            </div>
            <div class="dataElement">
                <label>@Html.DisplayNameFor(model => model.Telephone)</label>
                @Html.TextBoxFor(model=>model.Telephone)

            </div>

            <div class="dataElement">
                <label>@Html.DisplayNameFor(model=>model.Remark)</label><br />
                @Html.TextAreaFor(model => model.Remark, 5, 60, null)
            </div>
			<div class="dataElement">
                <p>@Html.DisplayNameFor(model => model.Hobbies):</p>
                篮球: @Html.CheckBox("Hobby", new {@id= "basketballCBO", @value = "basketball",@checked=true})
                足球: @Html.CheckBox("Hobby", new { @id = "footballCBO", @value = "football" })
                乒乓球: @Html.CheckBox("Hobby", new { @id = "pingpangCBO", @value = "pingpang" })
                手球:@Html.CheckBox("Hobby", new { @id = "volleyballCBO", @value = "volleyball" })
            </div>
            <input type="submit" value="Submit" />
        }
    </div>
</body>
</html>

注意:
input辅助器以lambda表达式进行工作,传递给表达式的值是视图模型对象,以及可以选择的字段或属性

并且使用了DisplayNameExtensions类中的拓展方法DisplayNameFor(expression) 获取模型对象的属性上的DisplayName特性值

DisplayNameExtensions类

3.创建Select元素
在SelectExtensions拓展类中,提供了几个用来创建Select元素的重载的HtmlHelper的拓展方法:
SelectExtensions拓展类
比较常用的几个:
DropDownList()(下拉列表–弱类型)
DropDownListFor() (下拉列表–强类型)
ListBox(){多项选择–弱类型}
ListBoxFor(){多项选择–强类型}

我们现在从数据库中查询用户类型字段,将其展现为下拉列表的形式:

实体类UserType:

using System;
using System.Data;
using System.Collections.Generic;
using System.ComponentModel;

namespace MVC_Project3.Models
{
    public class UserType
    {
        [DisplayName("类型编号")]
        public int Typeid { get; set; }
        [DisplayName("类型名称")]
        public string Typename { get; set; }
    }
}

DropDownListFor<TModel, TProperty>(Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList)

从代码中可以看出,DropDownListFor()方法第二个参数需要一个selectList序列对象(集合对象),所以在后台要把查询出来的每个数据要包装成SelectListItem对象

在Home控制器中,封装方法:
返回一个下拉对象集合

private List<SelectListItem> GetListItems()
{
    List<UserType> userTypeList = DBHelper.GetList<UserType>("SELECT * FROM UserTypes");
    List<SelectListItem> selectLists = new List<SelectListItem>();
    foreach (UserType ut in userTypeList)
    {
        SelectListItem item = new SelectListItem();
        item.Text = ut.Typename;
        item.Value = ut.Typeid.ToString();
        selectLists.Add(item);
    }

    return selectLists;
}

在Action动作方法中调用封装好的方法,并将其传递给对应的view视图AddUser.cshtml:

///前台页面加载时调用
/// </summary>
/// <returns></returns>
public ActionResult AddUser()
{

    //给当前视图传递参数
    ViewBag.userTypeList = GetListItems();
    //传递对象参数,给model传递一个参数,可对页面上的相关UI控件赋初始值
    //return View(new UserInfo() {Typeid=2,Username="jack bryant"});
    return View(new UserInfo());
}

在AddUser.cshtml中填充到下拉列表中:

<div class="dataElement">
<label>@Html.DisplayNameFor(model => model.Typeid)</label>
@Html.DropDownListFor(model => model.Typeid, ViewBag.userTypeList == null ? new List<SelectListItem> { new SelectListItem { Text = "无选项", Value = "" } } : ViewBag.userTypeList as List<SelectListItem>, new { @class = "form-control" })
</div>

注意:ViewBag.userTypeList这里要做个强制类型转换,且要判空
Result:
在这里插入图片描述
方式二:
使用重载方法:
后台获取集合数据,然后传递给指定的视图:

List<UserType> userTypeList = DBHelper.GetList<UserType>("SELECT * FROM UserTypes");
//给当前视图传递参数
ViewBag.userTypeList = userTypeList;

View视图中,获取后台传递的数据,创建下拉菜单:

@Html.DropDownListFor(model=>model.Typeid,new SelectList(ViewBag.userTypeList, "Typeid", "Typename"),htmlAttributes:new { @class = "form-control" })

使用MVC命名空间下的SelectList类:

SelectList(IEnumerable items, string dataValueField, string dataTextField);

items:数据源(数组、集合)
dataValueField:下拉项的value值
dataTextField:下拉项的显示名称

多项选择:
ListBoxFor()方法

<div class="dataElement">
<label>@Html.DisplayNameFor(model=>model.Gender)</label>
@Html.DropDownListFor(model => model.Gender, new SelectList(new[] { "Male", "Female" }))
</div>

<div class="dataElement">
<label>您喜欢的城市:</label><br />
@Html.ListBoxFor(model=>model.City,new MultiSelectList(new[] {"南京","苏州","无锡","常州","徐州"}),new {@class="city"})
</div>

总结:
通过以上这些HtmlHelper辅助器提供的方法,生成的HTML没什么不同,但我们通常会在项目中使用强类型的辅助类方法,因为它们减少了由于输错属性名而引起错误的机会。

极客研究者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MVC辅助器方法之输入辅助器HtmlHelper

只有HTML的form是没有用的,除非还创建了一些input元素。在ASP.NET Web Page 3.2中的System.Web.WebPages.Html命名空间下,HtmlHelper类提供了一系列的方法,用来创建表单上的元素。HtmlHelper类1.将上一篇的form表单进行改写:@model MVC_ProjectDemo.Models.UserInfo@{ Layout = null;}<!DOCTYPE html><html>&l
复制链接

扫一扫