HTML Helpers

1. Standard HTML Helpers

1. Html.TextBox - Renders a text box.

   @Html.TextBox("name")

2. Html.TextBoxFor - Renders a text box for a model property.

   @Html.TextBoxFor(model => model.PropertyName)

3. Html.Label - Renders a label.

   @Html.Label("name", "Label Text")

4. Html.LabelFor - Renders a label for a model property.

   @Html.LabelFor(model => model.PropertyName)

5. Html.DropDownList - Renders a drop-down list.

   @Html.DropDownList("name", new SelectList(ViewBag.Options))

6. Html.DropDownListFor - Renders a drop-down list for a model property.

   @Html.DropDownListFor(model => model.PropertyName, new SelectList(Model.Options))

7. Html.CheckBox - Renders a checkbox.

   @Html.CheckBox("name")

8. Html.CheckBoxFor - Renders a checkbox for a model property.

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

9. Html.RadioButton - Renders a radio button.

   @Html.RadioButton("name", "value")

10. Html.RadioButtonFor - Renders a radio button for a model property.

    @Html.RadioButtonFor(model => model.PropertyName, "value")

11. Html.ValidationMessage - Renders a validation message for a specific input field.

    @Html.ValidationMessage("name")

12. Html.ValidationMessageFor - Renders a validation message for a model property.

    @Html.ValidationMessageFor(model => model.PropertyName)

2. Templated HTML Helpers

ASP.NET MVC also provides templated helpers which use the data annotations on the model to generate the appropriate HTML elements.

1. Html.EditorFor - Renders an appropriate HTML element based on the data type of the model property.

   @Html.EditorFor(model => model.PropertyName)

2. Html.DisplayFor - Renders a read-only display of the model property.

   @Html.DisplayFor(model => model.PropertyName)

3. Custom HTML Helpers

You can also create custom HTML helpers by defining extension methods on the HtmlHelper class.

For example, to create a custom HTML helper that renders a Bootstrap-styled button:

public static class CustomHtmlHelpers
{
    public static IHtmlString BootstrapButton(this HtmlHelper htmlHelper, string text, string type = "primary")
    {
        string buttonHtml = $"<button class='btn btn-{type}'>{text}</button>";
        return new HtmlString(buttonHtml);
    }
}

In your view, you would use the custom helper like this:

@Html.BootstrapButton("Click Me")

4. Using HTML Helpers in Razor Views

In a Razor view (.cshtml), you can use these helpers within the @ syntax to generate the necessary HTML elements based on the properties of your model or view data.

Here is an example of using some of these helpers in a form:

@model MyNamespace.MyModel

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => m.Name)
        @Html.TextBoxFor(m => m.Name)
        @Html.ValidationMessageFor(m => m.Name)
    </div>

    <div>
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        @Html.ValidationMessageFor(m => m.Email)
    </div>

    <div>
        <button type="submit">Submit</button>
    </div>
}

In this example, the form is created with fields for Name and Email properties of the model, and validation messages are displayed if there are any validation errors.

Benefits of Using Custom HTML Helpers

1. Reusability: Custom helpers allow you to reuse HTML components across multiple views, promoting DRY (Don't Repeat Yourself) principles.

2. Maintainability: By encapsulating HTML markup in helper methods, you can easily update the markup in one place rather than searching through multiple views.

3. Readability: Helpers can make your Razor views cleaner and more readable by abstracting complex HTML structures into simple method calls.

4. Separation of Concerns: Custom helpers help separate the concerns of rendering HTML from the business logic, making your code more modular and easier to manage.