Custom Controls - View/Resource File

When we have already prepared a big part of the HTML code we can use it as a base for a control. The control can be based on the view or a HTML file added as a programme resources.

Stage 1: Preparing a Base

Step 1: Creating a Class

Each control needs to inherit from the MvcComponent class. We create a generic class which inherits from the MvcComponent class. The class contains two generic parameters: TComponent and TModel, that is, a type and a model of the control, respectively.

                
                    public class NavBar<TModel> : MvcComponent<NavBar<TModel>, TModel>
                    {
                    }
                
            
NavBar<TModel> class.

Step 2: Creating a HTML Code

In a Shared folder we need to create a view that will be base for the control.

                
                    <nav class="navbar navbar-expand navbar-light bg-light">
                        <a class="navbar-brand" href="#">My Website</a>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul w-select="Menu" class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="/">Start</a>
                                </li>
                            </ul>
                            <form class="form-inline my-2 my-lg-0">
                                <input class="form-control mr-sm-2" type="search" placeholder="Search">
                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                            </form>
                        </div>
                    </nav> 
                
            
A HTML code that will be a base for the NavBar<TModel> control.

Step 2: Creating a Constructor

Then we need to invoke one of the base constructors. In the case of big amounts of the external source we can choose from two constructors. One of them uploads the view from the Shared folder and we will use this one. The other constructor uploads a file of resources added to the programme.

                
                    public class NavBar<TModel> : MvcComponent<NavBar<TModel>, TModel>
                    {
                        public NavBar(IMvcService<TModel> mvcService) : base(mvcService, View.Create("_NavBar"))
                        {
                        }

                        /*
                        public NavBar(IMvcService<TModel> mvcService) : base(mvcService, Resource.Create("Path_To_Resouce"))
                        {
                        }
                        */
                    }
                
            
Possible constructors for the NavBar<TModel> class.

How to modify the HTML elements?

When we create a HTML code as object-oriented, we can save a reference to the particular elements while creating them. In the case when a control is based on many nested elements we need to have a chance to refer to them in the code. Wojdav Bootstrap Mvc helps to do it in two ways with the assistance of a selector or attribute. Both ways will be further illustrated in the examples of the method implementation.

Stage 2: Implementation of the Methods

Brand Method

A Brand method inserts a text in the element with a .navbar-brand class.

In this case, the appropriate element is searched by a Select method which takes a Selector CSS and returns the appropriate element.

The Select method works only with simple selectors of elements, classes and identifiers. It is not so extended as methods of the JavaScript or jQuery.

                
                    public NavBar<TModel> Brand(string text)
                    {
                        Select(".navbar-brand").Text(text);
                        return this;
                    }
                
            
Implementation of the Brand method

AddMenuItem Method

An AddMenuItem method adds a further menu element to the list.

In this case the element, to which we want to refer to, is in a dictionary called SelectedElement. It is there because of the fact that a w-select="Menu" attribute was added to the HTML code of this element. The control looks for such elements while parsing and adds them to the dictionary in order to use it later.

                
                    public NavBar<TModel> AddMenuItem(string text, Func<IUrlHelper, string> url)
                    {
                        var link = MvcService.WB.Link().Text(text).Href(url).Class("nav-link");
                        var li = WQ.Create("<li class=\"nav-item\"></li>").Html(link);
                        SelectedElements["Menu"].Append(li);
                        return this;
                    }
                
            
Implementation of the AddMenuItem method.

NavBarExtensions Method

At the end, we need to create the extended method of the IWB interface, which returns a new control object conveying to the object an instantion of the MvcService object.

                
                    public static NavBar<TModel> NavBar<TModel>(this IWB<TModel> wb)
                    {
                        return new NavBar<TModel>(wb.MvcService);
                    }
                
            
Extended method

Usage

                        
                            @(Html.WB().NavBar()
                              .Brand("WMB")
                              .AddMenuItem("User", x => x.Action("Profile"))
                              .AddMenuItem("Contact", x => x.Action("Contact")))
                        
                    
The use of the control.

Result

UserInfo Component Result A part of the view.

Summary

It is only a simple example aiming to show some basics of creating the custom controls. In practise, the controls may contain a very complicated logics.

Back