> For the complete documentation index, see [llms.txt](https://huy312100.gitbook.io/software-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huy312100.gitbook.io/software-development/.net-technology/.net-mvc/html-helpers.md).

# HTML Helpers

#### 1. Standard HTML Helpers

1. **Html.TextBox** - Renders a text box.

   ```csharp
   @Html.TextBox("name")
   ```
2. **Html.TextBoxFor** - Renders a text box for a model property.

   ```csharp
   @Html.TextBoxFor(model => model.PropertyName)
   ```
3. **Html.Label** - Renders a label.

   ```csharp
   @Html.Label("name", "Label Text")
   ```
4. **Html.LabelFor** - Renders a label for a model property.

   ```csharp
   @Html.LabelFor(model => model.PropertyName)
   ```
5. **Html.DropDownList** - Renders a drop-down list.

   ```csharp
   @Html.DropDownList("name", new SelectList(ViewBag.Options))
   ```
6. **Html.DropDownListFor** - Renders a drop-down list for a model property.

   ```csharp
   @Html.DropDownListFor(model => model.PropertyName, new SelectList(Model.Options))
   ```
7. **Html.CheckBox** - Renders a checkbox.

   ```csharp
   @Html.CheckBox("name")
   ```
8. **Html.CheckBoxFor** - Renders a checkbox for a model property.

   ```csharp
   @Html.CheckBoxFor(model => model.PropertyName)
   ```
9. **Html.RadioButton** - Renders a radio button.

   ```csharp
   @Html.RadioButton("name", "value")
   ```
10. **Html.RadioButtonFor** - Renders a radio button for a model property.

    ```csharp
    @Html.RadioButtonFor(model => model.PropertyName, "value")
    ```
11. **Html.ValidationMessage** - Renders a validation message for a specific input field.

    ```csharp
    @Html.ValidationMessage("name")
    ```
12. **Html.ValidationMessageFor** - Renders a validation message for a model property.

    ```csharp
    @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.

   ```csharp
   @Html.EditorFor(model => model.PropertyName)
   ```
2. **Html.DisplayFor** - Renders a read-only display of the model property.

   ```csharp
   @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:

```csharp
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:

```csharp
@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:

```csharp
@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.