📜  ASP.NET MVC中的不同类型的HTML助手

📅  最后修改于: 2021-05-29 20:49:40             🧑  作者: Mango

ASP.NET提供了各种各样的内置HTML帮助器,可以根据用户的选择使用它们,因为它们有多个替代项。 ASP.NET提供了三种类型的内置HTML帮助器。

1.标准HTML助手

主要用于呈现HTML元素(如文本框,复选框,单选按钮和下拉列表等)的HTML帮助器称为标准HTML帮助器。

标准HTML帮助器列表

@Html.ActionLink() - Used to create link on html page
@Html.TextBox() - Used to create text box
@Html.CheckBox() - Used to create check box
@Html.RadioButton() - Used to create Radio Button
@Html.BeginFrom() - Used to start a form
@Html.EndFrom() - Used to end a form
@Html.DropDownList() - Used to create drop down list
@Html.Hidden() - Used to create hidden fields
@Html.label() - Used for creating HTML label is on the browser
@Html.TextArea() - The TextArea Method renders textarea element on browser
@Html.Password() - This method is responsible for creating password input field on browser
@Html.ListBox() - The ListBox helper method creates html ListBox with scrollbar on browser

HTML
@{
    Layout = null;
}
  

  


    
    Built-in HTML Helper


    
        

Label example

        @Html.Label("firstName", "First Name")            

Text Box Example

        @Html.TextBox("txtFirstName", "", new { @class = "form-control", placeholder = "First Name" })            

Text Area Example

        @Html.TextArea("address", new { @class = "form-control", rows = "5" })            

password Example

        @Html.Password("password", " ", new { @class = "form-control" })            

Radio Button Example

        @Html.RadioButton("MaritalStatus", "Married", new { id = "IsMarried" }) Married            

Check Box Example

        @Html.CheckBox("htmlSkill") HTML 5            

List Box Example

        @Html.ListBox("Skills", new List {             new SelectListItem { Text="ASP.NET",Value="1"},             new SelectListItem { Text="MVC",Value="2"},             new SelectListItem { Text="SQL Server",Value="3"},             new SelectListItem { Text="Angular",Value="4"},             new SelectListItem { Text="Web API",Value="5"}         }, new { @class = "form-control" })            

drop down List Example

        @Html.DropDownList("Gender", new List {                     new SelectListItem {Text="Select Gender",Value="-1" },                     new SelectListItem {Text="Male",Value="1" },                     new SelectListItem {Text="Female", Value="2" }                     }, new { @class = "custom-select" })        


C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
  
namespace HTML_Helper_Demo.Models
{
    public class Employee
    {
        public int EmpId { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public city city { get; set; }
        public skills skills { get; set; }
        public string Address { get; set; }
        public string Password { get; set; }
        public bool AgreeTerm { get; set; }
    }
}
public enum city
{
    Dehli,
    Mumbai,
    Kolkata,
    Channai,
    Bangalore
}
public enum skills
{
    HTML5,
    CSS3,
    Bootstrap,
    JavaScript,
    JQuery,
    Angular,
    MVC,
    WebAPI
}


C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HTML_Helper_Demo.Models;
  
namespace HTML_Helper_Demo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(Employee emp)
        {
            return View();
        }
    }
}


HTML
@using HTML_Helper_Demo.Models
@model Employee
@{
    ViewBag.Title = "Index";
}
  
  
    

Label  Example

    @Html.LabelFor(model => model.Name, new { @class = "label-control" })        

Text box Example

    @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })        

Text Box Example 2

    @Html.TextAreaFor(model => model.Address, new { @class = "form-control", rows = "5" })        

Passwrod for example

    @Html.PasswordFor(model => model.Password, new { @class = "form-control" })        

Radio Button Example

    @Html.RadioButtonFor(model => model.Gender, true, new { id = "male-true" })     @Html.Label("male-true", "Male")     @Html.RadioButtonFor(model => model.Gender, false, new { id = "female-true" })     @Html.Label("female-true", "Female")        

Check Box Example

    @Html.CheckBoxFor(model => model.AgreeTerm)        

List Box Example

    @Html.ListBoxFor(model => model.skills, new SelectList(Enum.GetValues(typeof(skills))),                                              new { @class = "form-control" })           

Drop Down List Example

    @Html.DropDownListFor(model => model.city, new SelectList(Enum.GetValues(typeof(city))),                                              "Select City", new { @class = "form-control" })   


C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HTML_Helper_Demo.Models;
  
namespace HTML_Helper_Demo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Details()
        {
            //Here we are hardcoded the Employee Details
            //In Realtime you will get the data from any data source
            Employee employee = new Employee()
            {
                EmpId = 1,
                Name = "Rishabh Tyagi",
                Gender = "Male",
                city = city.Dehli,
                skills = skills.WebAPI,
                Address = "lajpat Nagar",
                AgreeTerm = true
            };
            ViewData["EmployeeData"] = employee;
            return View();
        }
    }
}


HTML
@{
    ViewBag.Title = "Details";
}
    Employee Details     @Html.Display("EmployeeData")


标准HTML助手

2.强类型HTML帮助器

强类型HTML帮助器将lambda作为参数,该参数告诉该帮助器在类型化视图中使用模型的哪个元素。强类型视图用于呈现特定种类的模型对象,而不是使用整体的View-Data结构。

强类型HTML帮助器列表

@Html.HiddenFor()
@Html.LabelFor()
@Html.TextBoxFor()
@Html.RadioButtonFor()
@Html.DropDownListFor()
@Html.CheckBoxFor()
@Html.TextAreaFor()
@Html.PasswordFor()
@Html.ListBoxFor()

所有这些功能都与上面相同,但是它们与模式类一起使用。现在,我们知道我们需要一个模型类来使用强类型HTML。因此,首先我们将添加一个模型类,如下所示

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
  
namespace HTML_Helper_Demo.Models
{
    public class Employee
    {
        public int EmpId { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public city city { get; set; }
        public skills skills { get; set; }
        public string Address { get; set; }
        public string Password { get; set; }
        public bool AgreeTerm { get; set; }
    }
}
public enum city
{
    Dehli,
    Mumbai,
    Kolkata,
    Channai,
    Bangalore
}
public enum skills
{
    HTML5,
    CSS3,
    Bootstrap,
    JavaScript,
    JQuery,
    Angular,
    MVC,
    WebAPI
}

现在,在控制器中编写以下代码。然后添加具有默认属性的视图。

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HTML_Helper_Demo.Models;
  
namespace HTML_Helper_Demo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(Employee emp)
        {
            return View();
        }
    }
}

现在编写HTML,如下所示:

的HTML

@using HTML_Helper_Demo.Models
@model Employee
@{
    ViewBag.Title = "Index";
}
  
  
    

Label  Example

    @Html.LabelFor(model => model.Name, new { @class = "label-control" })        

Text box Example

    @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })        

Text Box Example 2

    @Html.TextAreaFor(model => model.Address, new { @class = "form-control", rows = "5" })        

Passwrod for example

    @Html.PasswordFor(model => model.Password, new { @class = "form-control" })        

Radio Button Example

    @Html.RadioButtonFor(model => model.Gender, true, new { id = "male-true" })     @Html.Label("male-true", "Male")     @Html.RadioButtonFor(model => model.Gender, false, new { id = "female-true" })     @Html.Label("female-true", "Female")        

Check Box Example

    @Html.CheckBoxFor(model => model.AgreeTerm)        

List Box Example

    @Html.ListBoxFor(model => model.skills, new SelectList(Enum.GetValues(typeof(skills))),                                              new { @class = "form-control" })           

Drop Down List Example

    @Html.DropDownListFor(model => model.city, new SelectList(Enum.GetValues(typeof(city))),                                              "Select City", new { @class = "form-control" })   

输出将如下所示:

强类型HTML帮助器

强类型HTML帮助器

3.模板化HTML帮助器

模板化的HTML Helper用于数据显示和输入。它会根据模型属性自动生成HTML,并且可以使用单个标签为完整的模型生成HTML。这些分为两类

  • 显示模板
  • 编辑器范本

模板化HTML帮助器列表

Display

@Html.Display()
@Html.DisplayFor()
@Html.DisplayName()
@Html.DisplayNameFor()
@Html.DisplayText()
@Html.DisplayTextFor()
@Html.DisplayModelFor()

Edit / Input

@Html.Editor()
@Html.EditorFor()
@Html.EditorForModel()

现在,在这里我们可以使用先前创建的模型类,然后应该在控制器中编写此代码

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HTML_Helper_Demo.Models;
  
namespace HTML_Helper_Demo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Details()
        {
            //Here we are hardcoded the Employee Details
            //In Realtime you will get the data from any data source
            Employee employee = new Employee()
            {
                EmpId = 1,
                Name = "Rishabh Tyagi",
                Gender = "Male",
                city = city.Dehli,
                skills = skills.WebAPI,
                Address = "lajpat Nagar",
                AgreeTerm = true
            };
            ViewData["EmployeeData"] = employee;
            return View();
        }
    }
}

现在添加具有所有默认属性的视图,并编写以下代码

的HTML

@{
    ViewBag.Title = "Details";
}
    Employee Details     @Html.Display("EmployeeData")

输出如下

模板化HTML帮助器