ASP. net mvc use Bootstrap series (5) -- create ASP. net mvc Bootstrap Helpers and bootstraphelpers

ASP. net mvc use Bootstrap series (5) -- create ASP. net mvc Bootstrap Helpers and bootstraphelpers
Preface

ASP. net mvc allows developers to create custom HTML Helpers, whether using static or extension methods. An HTML Helper actually outputs an HTML string.
HTML Helpers allows us to share the same HTML Tag on multiple pages, which not only improves stability but also facilitates maintenance by developers. Of course, developers can also perform unit tests on reusable code. Therefore, it is necessary to create ASP. net mvc Bootstrap Helpers.

Built-in HTML Helpers

ASP. net mvc has several built-in standard HTML Helpers, which are called through @ HTML to parse and render the HTML content in the view engine. This allows developers to reuse public methods in multiple views.

For example, the following code generates an Input whose type is text, and its id and name are both CustomerName, and its Value is Northwind Traders:

Most of the built-in HTML helpers provide options for passing in anonymous elements to generate specified HTML attributes. the TextBox method is slightly modified. The style attribute of the output element is set by passing in an anonymous type:

Use the above Code@ HelperA new parameter named PrimaryButtonSmall helper is created. It accepts two parameters: Id and caption. It generates an HTML tag of the Button type and sets the Bootstrap style.

Note: any custom helpers must exist in the App_Code folder to be recognized by ASP. net mvc view.

• In the view, use @ BootstrapHelpers. PrimaryButtonSmall ("btnSave", "save") to use the newly created helper.
• It generates the following Bootstrap HTML elements:

Of course, to make our helper more universal, such as specifying the size and style, we will make the following modifications to add the input parameters:

Now we can use it like this:

It will generate the following style buttons:

However, the only disadvantage of helper in this mode is that you need "hard code" to pass in the style and size, which may require you to be very familiar with the Bootstrap style.

Create Helpers using static methods

The static method can also be used to quickly and conveniently create custom Bootstrap helpers. It also returns the HTML Tag. To create a static method, follow these steps:

• Add a folder named Helpers
• Create the following enumerated classes

The Button method returns an MvcHtmlString object, which represents the encoded HTML characters.

• Use static methods to call:

You can compare it with the previous "hard code" statement, even though they produce the same result:

Create Helpers using extension methods

Built-in ASP. net mvc helper (@ HTML) Is based on the extension method, we can upgrade the above static method-use the extension method to create Bootstrap helpers.

• Create a ButtonExtensions class in the Helpers folder
• Modify ButtonExtensions to Static type
• Modify Namespace to System. Web. Mvc. Html.@ HTMLCall Extension Method
• Add Extension Method and return MvcHtmlString

Because the BootstrapButton method is an extension method, it is called as follows:

Though the statement is different, the returned results are consistent.

Create Fluent Helpers

Fluent Interface (reference: http://martinfowler.com/bliki/FluentInterface.html) is used for software development to implement an object-oriented API, in this way, it provides more readable code, easy for developers to understand. It is usually implemented through chained programming.

For example, we will create an HTML helper to generate a closed warning box, which can be called using Fluent Interface as follows:

To create Fluent helpers, follow these steps:

• Creating IFluentAlert to implement the IHtmlString interface is an important step. For the ASP. net mvc Razor view engine, if the type returned after @ is implementedIHtmlStringInterface, the view engine willAutomaticCall ToHtmlString () to return the actual HTML Tag.

• Create an IAlert to implement the IFluentAlert Interface

• Create Alert to inherit the IAlert Interface

In the above CodeTagBuilderYou can quickly create HTML elements.

• Create AlertFluent to inherit IAlertFluent

• Finally, create a static method

By building this Fluent API, We can chain to create the Bootstrap component, which is very convenient for those who are not familiar with the Bootstrap Framework. We can use@ HTML. Alert ("Title"). Danger (). Dismissible ()To create the following warning box:

Create automatically closed Helpers

In ASP. net mvc, the built-in @ HTML. BeginForm () helper is an automatically closed helper. Of course, we can also customize the automatically closed helpers, as long as the IDisposable interface is implemented. Using the IDisposable interface, when the object is Dispose, We output the close tag of the element, as follows:

• Therefore, create a folder named Panel under the Helpers folder.
• Add a Panel and implement the IDisposable Interface

In the above Code, the Write attribute can be used to output HTML tags in the current view, and two closed <div> tags are output in the Dispose method.

Note: We have rewritten the ToString () method of TagBuilder to generate the start tag of the <div> element.

• Use automatically closed helpers in View

The result is as follows:

Summary

In this blog, we have created several Bootstrap helpers to reduce the HTML Tag writing. These helpers enable people who do not know the Bootstrap Framework to quickly get started with Bootstrap.
Download reference code