Easy Modification

A functionality of controls can be extended in many ways, for example, by using generic methods coming from a WQuery library, as well as extension methods or an inheritance.

WQuery Methods

Every control implements all methods of the WQuery library. These methods are nearly identical to those used in jQuery. For example, AddClass, AddAttr, Style, Append etc.

                        
                            @Html.WB().Button().Text("Custom Button").Style(ButtonStyle.Primary).Prepend("<i class=\"fa fa-user\">&nbsp;</i>")
                            @Html.WB().Button().Text("Custom Button").Class("bg-dark").Class("text-white").MY(2)
                        
                    
The use of generic methods

Extension Methods

The extension methods can be used in order to increase the control functionality. Method WrapInForm will wrap button in form tag. Additionally, the method sets the button to a submit type and adds an action attribute to the form.

                
                    public static class ButtonExtensions
                    {
                        public static IButton<TModel> WrapInForm<TModel>(this IButton<TModel> button, Func<IUrlHelperAdapter, string> url)
                        {
                            var u = url?.Invoke(button.MvcService.UrlHelper);
                            var form = WQ.Create("<form method=\"post\"></form>").Attr("action", u);
                            return button.Type(ButtonType.Submit).WrapAll(form);
                        }
                    }
                
            
Extension method for a button

Usage

                
                    @Html.WB().Button().Text("Show Profile").Style(ButtonStyle.Primary).WrapInForm(x => x.Action("Profile"))
                
            
The use of the method.

Result

                
                    <form method="post" action="/Home/Profile">
                        <button class="btn btn-primary" type="submit">Show Profile</button>
                    </form>
                
            
A generated HTML code

Inheritance

The next method of extending a functionality of the controls is creating a class, which inherits by a class of the control. In such a case, a pre-configurated login button is created. The login button has got a declared url address, style, text and vertical margins.

                
                    public class LoginButton<TModel> : LinkButton<TModel>
                    {
                        protected internal LoginButton(IMvcService<TModel> mvcService) : base(mvcService)
                        {
                            Href(MvcService.UrlHelper.Action("Login", "Account"));
                            Style(ButtonStyle.Primary);
                            Text("Login");
                            MY(2);
                        }
                    }

                    public static class LoginButtonExtensions
                    {
                        public static LoginButton<TModel> LoginButton<TModel>(this IWB<TModel> wb)
                        {
                            return new LoginButton<TModel>(wb.MvcService);
                        }
                    }
                
            
Dedicated login button

Usage

                @Html.WB().LoginButton()
            
The use of a LoginButton control

Result

                <a class="btn btn-primary my-2" role="button" href="/Account/Login">Login</a>
            
A generated HTML code

Aggregate Controls

It is also possible to create a control that consists of a few elements. In this case, we create a control which receives a list and displays it as a table.

                
                    public class UserList<TModel> : Table<TModel>
                    {
                        public UserList(IMvcService<TModel> mvcService, IEnumerable<string> list) : base(mvcService)
                        {
                            if (list == null)
                            {
                                throw new ArgumentNullException(nameof(list));
                            }

                            Bordered().Small().Striped();

                            foreach (var text in list)
                            {
                                var row = Row();
                                var cell = Cell();

                                cell.Text(text);
                                row.Html(cell);

                                Append(row);
                            }
                        }
                    }

                    public static class UserListExtensions
                    {
                        public static UserList<TModel> UserList<TModel>(this IWB<TModel> wb, IEnumerable<string> list)
                        {
                            return new UserList<TModel>(wb.MvcService, list);
                        }
                    }
                
            
Custom list control.

Usage

                        @(Html.WB().UserList((IEnumerable<string>)ViewBag.Users))
                    
The use of a UserList control.

Result

UserInfo Component Result A part of the view.

Summary

We can choose the most appropriate form to extend the capabilities of the ready-made controls.

Back