Custom Controls - String

In this case, in order to create a base for the control we will use a ready-made code downloaded from an external source. We will create a field of a textbox type with some add-ons.

Stage 1: Preparing a Base

Step 1: Creating a Class

Each control, regardless of its intended purpose, needs to inherit from a 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 GroupTextBox<TModel> : MvcComponent<GroupTextBox<TModel>, TModel>
                    {
                    }
                
            
GroupTextBox<TModel> class.

Step 2: Creating a Constructor

Then we need to invoke a base constructor, which a HTML code will be conveyed to. This HTML code will be a base for the control. The base constructor takes also an object implementing an IMvcComponent interface so our constructor must also take it.

                
                    public class GroupTextBox<TModel> : MvcComponent<GroupTextBox<TModel>, TModel>
                    {
                        public UserInfo(IMvcService<TModel> mvcService, string html) : base(mvcService, html)
                        {
                        }
                    }
                
            
Constructor of a GroupTextBox<TModel> class.

Step 3: Implementation of the Constructor

Due to the fact that a central element of the control will be the input element generated on the basis of the model, we need to take an argument of the Expression<Func<TModel, TResult>> type and assign to the property intended for the future use.

In the constructor, we create the input element on the basis of an expression and we add it to the major element of the control. In addition, we create two properties that will contain add-ons to the input element.

                
                    protected Expression<Func<TModel, TResult>> Expression { get; set; }
                    protected WQ PrependAddons { get; set; }
                    protected WQ AppendAddons { get; set; }

                    public GroupTextBox(IMvcService<TModel> mvcService, Expression<Func<TModel, TResult>> expression, string html)
                            : base(mvcService, html)
                    {
                        Expression = expression;

                        var input = MvcService.HtmlHelper.TextBoxFor(expression).FlushToString();
                        Html(WQ.Create(input).Class("form-control"));

                        PrependAddons = "<div class=\"input-group-prepend\">";
                        Prepend(PrependAddons);
                        AppendAddons = "<div class=\"input-group-append\">";
                        Append(AppendAddons);
                    }
                
            
Implementation of the GroupTextBox<TModel> class constructor.

Stage 2: Implementation of the Methods

CreateSpan Method

A CreateSpan method will return the span element with an appropriate class, in which we will allocate some add-ons to the input element. We will add the span elements to the PrependAddons or AppendAddons element, depending od our wish whether to place them before or after the input element.

                
                    protected IWQuery CreateSpan()
                    {
                        return WQ.Create("<span class=\"input-group-text\"></span>");
                    }
                
            
Implementation of the CreateSpan method.

AddLabel Method

An AddLabel method adds a label, created on the basis of the model, before an input element.

                
                    public GroupTextBox<TModel, TResult> AddLabel()
                    {
                        var label = WQ.Create(MvcService.HtmlHelper.LabelFor(Expression).FlushToString()).Class("mb-0");
                        PrependAddons.Append(CreateSpan().Html(label));
                        return this;
                    }
                
            
Implementation of a AddLabel method.

AddAppendText and AddPrependText Methods

The AddAppendText and AddPrependText methods insert a random text before and after the input elements, respectively.

                
                    public GroupTextBox<TModel, TResult> AddPrependText(string text)
                    {
                        PrependAddons.Prepend(CreateSpan().Text(text));
                        return this;
                    }

                    public GroupTextBox<TModel, TResult> AddAppendText(string text)
                    {
                        AppendAddons.Append(CreateSpan().Text(text));
                        return this;
                    }
                
            
Implementation of the AddAppendText and AddPrependText methods.

Extensions Method

At the end, we need to create the extended method of the IWB interface, which returns a new control object and conveys to the object an instantion of the MvcService object and the main element of the control in form of the HTML code.

                
                    public static class GroupTextBoxExtensions
                    {
                        public static GroupTextBox<TModel, TResult> GroupTextBox<TModel, TResult>(
                            this IWB<TModel> wb, Expression<Func<TModel, TResult>> expression)
                        {
                            return new GroupTextBox<TModel, TResult>(wb.MvcService, expression, $"<div class=\"input-group\"></div>");
                        }
                    }
                
            
Extensions method

Usage

                        
                            @(Html.WB().GroupTextBox(x => x.Name)
                            .AddLabel()
                            .AddAppendText("Max: 20 Chars")
                            .AddAppendText("Min: 10 Chars"))
                        
                    
The use of the control.

Result

Group TextBox 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