Dynamic html control creation using mvc 4 HtmlHelper

Dynamic html control creation using MVC 4 using HtmlHelper

---

Introduction

Here we learn how to create dynamic or custom html control using asp.net mvc 4 using HtmlHelper.

Description

In this blog we learn how to create custom html control using htmlHelper in  Asp.net mvc application. We create Script tag , Text box , button control . You can also customize other html control using htmlHelper like Radio Button ,CheckBox ,Image and many more.

Solution

Step 1 :  Create your Asp.net MVC 4 application first using Visual Studio 2012 or Above .

Step 2 :  Create one folder in your application called "Helper" we will all customize .cs file in this folder. We called this custom changes as helper of application.

Step 3 :  Add one class file in to you application name as "ContentFactory.cs" or as per your acquirement.

Step 4 :  Now open that class file and make that class public and static for entire website after that there is no need to create object of that class file, we can directly access all function and property of this class.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace WebApplication1

{

    public static class ContentFactory

    {

        

    }

}

Step 5 :  Add below code to that file for customization of html tags.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace WebApplication1

{

    public static class ContentFactory

    {

        #region [Methods]

        /// <summary>

        /// 

        /// </summary>

        /// <param name="htmlHelper"></param>

        /// <param name="filePath"></param>

        /// <returns></returns>

        public static MvcHtmlString Script(this HtmlHelper htmlHelper, string filePath)

        {

            TagBuilder tagBuilder = new TagBuilder("script");

            tagBuilder.MergeAttribute("src", UrlHelper.GenerateContentUrl(filePath, htmlHelper.ViewContext.HttpContext));

            tagBuilder.MergeAttribute("type", "text/javascript");

            return new MvcHtmlString(tagBuilder.ToString());

        }

        /// <summary>

        /// 

        /// </summary>

        /// <param name="htmlHelper"></param>

        /// <param name="name"></param>

        /// <param name="value"></param>

        /// <returns></returns>

        public static MvcHtmlString CustomTextBox(this HtmlHelper htmlHelper, string name, object value = null)

        {

            TagBuilder tagBuilder = new TagBuilder("input");

            tagBuilder.MergeAttribute("name", name);

            tagBuilder.MergeAttribute("id", name);

            tagBuilder.MergeAttribute("type", "text");

            tagBuilder.MergeAttribute("value", Convert.ToString(value));

            return new MvcHtmlString(tagBuilder.ToString());

        }

        /// <summary>

        /// 

        /// </summary>

        /// <param name="htmlHelper"></param>

        /// <param name="name"></param>

        /// <param name="value"></param>

        /// <param name="buttonType"></param>

        /// <returns></returns>

        public static MvcHtmlString CustomButton(this HtmlHelper htmlHelper, string name, string value, ButtonType buttonType = ButtonType.submit)

        {

            TagBuilder tagBuilder = new TagBuilder("input");

            tagBuilder.MergeAttribute("name", name);

            tagBuilder.MergeAttribute("id", name);

            tagBuilder.MergeAttribute("type", buttonType.ToString());

            tagBuilder.MergeAttribute("value", value);

            return new MvcHtmlString(tagBuilder.ToString());

        }

        #endregion

    }

    #region [Enum]

    public enum ButtonType

    {

        submit,

        button

    }

    #endregion

    

}

Step 6 :  Now access all custom control in you html page using @Html .

@Html.Script("~/Scripts/bootstrap.js")

@Html.CustomTextBox("txt1", "10")


@Html.CustomButton("btnClick", "Click here!", ButtonType.button)