Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Creando un control personalizado con ASP.NET MVC
Actualizado el 23 Febrero, 2016 y leído 3,317 veces
Calificación: 8.80 / 10

Creando un control personalizado con ASP.NET MVC

Anexsoft

Vamos a crear 2 Helpers bastantes básicos que agreguen la clase form-control de Bootstrap 3 a nuestros input por defecto. La finalidad de esta entrada no es crear un super control que resuelva la teoría de la relatividad, si no, entender como se crean estos.

 

Creando nuestro Helper

En primer lugar creamos una carpeta llamada Helpers en nuestro proyecto y agregamos la siguiente clase estática.

namespace CustomHtmlHelper.Helpers
{
    public static class HtmlExtensions
    {
        #region Bootstrap
        public static MvcHtmlString BootstrapTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string inputGroup = null)
        {
            var metada = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);

            var htmlInput = "<input id=\"{0}\" type=\"text\" class=\"form-control\" name=\"{0}\" value=\"{1}\" />";
            htmlInput = string.Format(htmlInput, metada.PropertyName, metada.SimpleDisplayText);

            return MvcHtmlString.Create(htmlInput);
        }

        public static MvcHtmlString BootstrapTextBox<TModel>(this HtmlHelper<TModel> htmlHelper, string name, string value)
        {
            var htmlInput = "<input id=\"{0}\" type=\"text\" class=\"form-control\" name=\"{0}\" value=\"{1}\" />";
            htmlInput = string.Format(htmlInput, name, value);

            return MvcHtmlString.Create(htmlInput);
        }
        
        public static MvcHtmlString Chosen<TModel>(this HtmlHelper<TModel> htmlHelper, string name, Dictionary<string, string> data, string placeholder = null, string selectedValue = null)
        {
            var htmlInput = "<select id=\"{0}\" class=\"form-control\" name=\"{0}\" placeholder=\"{1}\">[options]</select>";
            htmlInput = string.Format(htmlInput, name, placeholder);

            var options = new StringBuilder();

            foreach (var d in data)
            {
                var selected = "";
                if (d.Key == selectedValue)
                    selected = "selected";

                options.Append(string.Format("<option value=\"{0}\" {1}>{2}</option>", d.Key, selected, d.Value));
            }

            htmlInput = htmlInput.Replace("[options]", options.ToString());

            var scriptHtml = "<script>$(document).ready(function(){ $('#" + name + "').chosen(); })</script>";

            return MvcHtmlString.Create(htmlInput + scriptHtml);
        }
        #endregion
    }
}
  1. BootstrapTextBoxFor: permite trabajar con las propiedades de un modelo específico. De esta manera, si nuestro modelo tiene un valor seteado, nuestro helper lo reconocerá automaticamente.
  2. BootstrapTextBox: permite trabajar sin especificar un modelo.
  3. Chosen: el tercero nos sirve para trabajar con el plugin jQuery Chosen. Todo esta explicado en el video adjunto.

 

NOTA: al final lo que retorna cada método es el MvcHtmlString que lo que hace es renderizar el texto a HTML.

 

Como se darán cuenta, son métodos de extensión porque vamos a extender las funcionalidades a  la clase HtmlHelper. Por eso vemos un this HtmlHelper al inicio de los parámetros del método.

this HtmlHelper<TModel> htmlHelper

De esta manera es como se extienden las funcionalidades de las clases en C#. Por ejemplo, si queremos extender una funcionalidad a la clase "string", pasamos el siguiente parámetro.

this string my_string

Espero que haya quedado claro, igual más adelante escribire un post de extensiones con C#.

 

Reconociendo la nueva extensión en nuestra vista

Para lograr esto lo que tenemos que hacer es modificar el Web.config ubicado en la carpeta views y agregar nuestro Namespace de nuestras extensiones.

<namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Optimization"/>
    <add namespace="System.Web.Routing" />
    <add namespace="CustomHtmlHelper.Helpers" />
</namespaces>

Desconozco el motivo porque no lo reconoce al instante, lo que hacemos a continuación es cerrar el Visual Studio y volverlo a abrir.

 

Llamando a los controles

<div class="form-group">
    <label>Nombre</label>
    @Html.BootstrapTextBoxFor(x => x.Nombre)
</div>

<div class="form-group">
    <label>Apellido</label>
    @Html.BootstrapTextBox("Apellido", "Rodríguez Patiño")
</div>

<div class="form-group">
    <label>País</label>
    @Html.Chosen("pais", paises, "Seleccione un país")
</div>

 

Con esto hemos creado nuestros controles personalizados. Bajo el mismo concepto de extensión podríamos crear funcionalidades adicionales para enriquecer el Entity Framework junto a LinQ.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.