MVC辅助器方法之使用内建的Form辅助器方法

最新推荐文章于 2022-06-14 19:49:57 发布

极客研究者

最新推荐文章于 2022-06-14 19:49:57 发布

阅读量213

点赞数

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

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

版权

ASP.NET MVC 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在MVC框架中使用辅助器方法创建HTML表单元素，包括使用BeginForm和EndForm方法的不同方式，以及如何设置固有属性和自定义属性，为用户提供了一种更高效、更灵活的表单创建方式。

摘要由CSDN通过智能技术生成

MVC框架包含了一些内建的辅助器方法,以帮助创建HTML中的form元素。

1.创建Form元素:
在一个Web应用程序中,最常见的交互形式就是HTML表单,这是许多不同辅助器方法的主题。

在Home控制器中,添加两个重载的动作方法AddUser:

  /// <summary>
        ///前台页面加载时调用
        /// </summary>
        /// <returns></returns>
        public ActionResult AddUser()
        {
            return View(new UserInfo());
        }

        /// <summary>
        /// 接收Post提交方式的请求
        /// </summary>
        /// <param name="user">接收form表单提交数据</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult AddUser(UserInfo user)
        {
            return View(user);
        }

添加对应的View视图AddUser.cshtml:


@model MVC_ProjectDemo.Models.UserInfo

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddUser</title>
</head>
<body>
    <div> 
        <h2>Add User</h2>
        <form action="/Home/AddUser" method="post">
            <div class="dataElement">
                <label>Userid</label>
                <input type="text" name="Userid" value="@Model.Userid"/>
            </div>
            <div class="dataElement">
                <label>Username</label>
                <input type="text" name="Username" value="@Model.Username" />
            </div>
            <div class="dataElement">
                <label>Password</label>
                <input type="password" name="Password" value="@Model.Password" />
            </div>
            <div class="dataElement">
                <label>Telephone</label>
                <input type="text" name="Telephone" value="@Model.Telephone" />
            </div>
            <input  type="submit" value="Submit"/>
        </form>
    </div>
</body>
</html>

该视图含有一个非常标准的手工创建的表单,并且用模型对象对input元素的value标签属性进行设置值。
注意:
该form表单上设置了所有input元素的name属性值,为了与后台Action动作方法的接收参数Model中的属性保持一致,在处理post请求时,MVC框架默认模型绑定器会使用name属性值,用input元素的值构造模型类型的属性值,如果忽略了属性值,表单将不能正常工作。其实在模型绑定中,可以处理这个行为,后续再介绍。

2.创建表单元素
方式一:
使用Html.BeginForm()和Html.EndForm()方法创建form元素,

<div> 
        <h2>Add User</h2>
        @*<form action="/Home/AddUser" method="post">*@
        @{Html.BeginForm();}
           .............................
           ..............................
        @*</form>*@
        @{Html.EndForm();}
    </div>

在上面的代码,我们使用Rasor表达式,嵌入C#代码动态生成html元素,
BeginForm()有很多重载方法,用于创建form元素,这两个方法是MVC Web类FormExtensions提供的方法:
FormExtensions 类

方式二:
使用重载方法:

BeginForm (this System.Web.Mvc.HtmlHelper htmlHelper, string actionName, string controllerName, System.Web.Mvc.FormMethod method);

  @using (Html.BeginForm("AddUser", "Home",FormMethod.Post))
  {
	.........................
	........................
}

以上代码,将BeginForm辅助器方法封装在using表达式中(类似于C#中的用法),在using块的最后,.NET运行时会在BeginForm返回的对象上调用Dispose方法释放该对象,然后调用EndForm()方法
方式三:
设置固有属性值(id、class等)以及自定义属性(data-开头)
重载方法:

BeginForm(action,controller,method,attributes)

 @using (Html.BeginForm("AddUser", "Home",FormMethod.Post,new {@class="userClass", @id="userForm", data_formType="User"}))
{
	..............................
	..............................
}

在这里插入图片描述
注意:
在代码中不能使用带连字符(’-’)的动态对象,而换做使用下划线(’’_’),该下划线会被自动映射成连字符

new {@class="userClass", @id="userForm", data_formType="User"}

总结:
1.固有属性赋值:
@固有属性=属性值
2.自定义属性:
data_自定义属性=属性值