ASP.NET proporciona una amplia gama de asistentes HTML incorporados que se pueden usar según la elección del usuario, ya que hay varias anulaciones disponibles para ellos. Hay tres tipos de asistentes HTML integrados que ofrece ASP.NET.
1. Asistente HTML estándar
Los asistentes de HTML que se utilizan principalmente para representar elementos HTML como cuadros de texto, casillas de verificación, botones de opción y listas desplegables, etc. se denominan asistentes de HTML estándar.
Lista de ayudantes HTML estándar
@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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Built-in HTML Helper</title>
</head>
<body>
<div>
<h3>Label example</h3>
@Html.Label("firstName", "First Name")
<h3>Text Box Example</h3>
@Html.TextBox("txtFirstName", "", new { @class = "form-control", placeholder = "First Name" })
<h3>Text Area Example</h3>
@Html.TextArea("address", new { @class = "form-control", rows = "5" })
<h3>password Example</h3>
@Html.Password("password", " ", new { @class = "form-control" })
<h3>Radio Button Example</h3>
@Html.RadioButton("MaritalStatus", "Married", new { id = "IsMarried" }) Married
<h3>Check Box Example</h3>
@Html.CheckBox("htmlSkill") HTML 5
<h3>List Box Example</h3>
@Html.ListBox("Skills", new List<SelectListItem> {
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" })
<h3>drop down List Example</h3>
@Html.DropDownList("Gender", new List<SelectListItem> {
new SelectListItem {Text="Select Gender",Value="-1" },
new SelectListItem {Text="Male",Value="1" },
new SelectListItem {Text="Female", Value="2" }
}, new { @class = "custom-select" })
</div>
</body>
</html>
2. Asistente HTML fuertemente tipado
El asistente de HTML fuertemente tipado toma una lambda como parámetro que le dice al asistente qué elemento del modelo se utilizará en la vista escrita. Las vistas fuertemente tipadas se utilizan para representar tipos específicos de objetos de modelo, en lugar de utilizar la estructura general de View-Data.
Lista de ayudantes HTML fuertemente tipados
@Html.HiddenFor() @Html.LabelFor() @Html.TextBoxFor() @Html.RadioButtonFor() @Html.DropDownListFor() @Html.CheckBoxFor() @Html.TextAreaFor() @Html.PasswordFor() @Html.ListBoxFor()
La funcionalidad de todos estos es la misma que la anterior, pero se usan con clases modales. Ahora, como sabemos, necesitamos una clase modelo para usar HTML fuertemente tipado. Entonces, primero agregaremos una clase modelo de la siguiente manera
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
}
Ahora escriba el siguiente código en el controlador. Y luego agregue una vista con las propiedades predeterminadas.
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();
}
}
}
Ahora escribe el HTML de la siguiente manera:
HTML
@using HTML_Helper_Demo.Models
@model Employee
@{
ViewBag.Title = "Index";
}
<div>
<h3>Label Example</h3>
@Html.LabelFor(model => model.Name, new { @class = "label-control" })
<h3>Text box Example</h3>
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
<h3>Text Box Example 2</h3>
@Html.TextAreaFor(model => model.Address, new { @class = "form-control", rows = "5" })
<h3>Password for example</h3>
@Html.PasswordFor(model => model.Password, new { @class = "form-control" })
<h3>Radio Button Example</h3>
@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")
<h3>Check Box Example</h3>
@Html.CheckBoxFor(model => model.AgreeTerm)
<h3>List Box Example</h3>
@Html.ListBoxFor(model => model.skills, new SelectList(Enum.GetValues(typeof(skills))),
new { @class = "form-control" })
<h3>Drop Down List Example</h3>
@Html.DropDownListFor(model => model.city, new SelectList(Enum.GetValues(typeof(city))),
"Select City", new { @class = "form-control" })
</div>
La salida será la siguiente:
3. Asistente HTML con plantilla
El HTML Helper con plantilla se utiliza para mostrar e ingresar datos. Genera HTML automáticamente según la propiedad del modelo y puede generar HTML para un modelo completo con una sola etiqueta. Estos se dividen en dos categorías
- Plantilla de visualización
- Plantilla de edición
Lista de ayudantes HTML con plantilla
Display @Html.Display() @Html.DisplayFor() @Html.DisplayName() @Html.DisplayNameFor() @Html.DisplayText() @Html.DisplayTextFor() @Html.DisplayModelFor() Edit / Input @Html.Editor() @Html.EditorFor() @Html.EditorForModel()
Ahora, aquí podemos usar la clase de modelo creada previamente y luego debemos escribir este código en el controlador
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();
}
}
}
Ahora agregue la vista con todas las propiedades predeterminadas y escriba el siguiente código
HTML
@{
ViewBag.Title = "Details";
}
<fieldset>
<legend>Employee Details</legend>
@Html.Display("EmployeeData")
</fieldset>
La salida será la siguiente
Publicación traducida automáticamente
Artículo escrito por rishabhtyagi2306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA