martes, 27 de octubre de 2015

Consumiendo WebService ASMX

Aunque ASMX ya es antiguo aún se lo sigue usando.

Este es un pequeño ejemplo de consumo desde un proyecto ASPX en VS2013 Express y uso del Web Service http://www.dneonline.com/calculator.asmx

Se debe dar clic derecho sobre Refences o sobre el proyecto:


Con esto se muestra la siguiente pantalla:
Podemos poner el link del WS en el primer recuadro, sin embargo si vamos a consumir desde un framework 2.0 debemos dar clic en el botón Advanced... que está al final de la imagen, con esto se muestra una nueva ventana.

Y nuevamente clic en el botón Add Web Reference... que se encuentra al final de la ventana.


En esta pantalla ponemos el link del WS. El We reference name se lo puede cambiar (yo lo deje igual) y dar clic en Add Reference.

Prácticamente esto es todo. 

Ahora hacer la referencia y uso:

En el aspx agregue:

    <div>
        <asp:TextBox ID="txt_1" runat="server"></asp:TextBox>
        <asp:TextBox ID="txt_2" runat="server"></asp:TextBox>
        <asp:Button ID="btn_webService" runat="server" Text="Web Service" OnClick="btn_webService_Click" />
        <asp:Label ID="lbl_respuesta" runat="server"></asp:Label>
    </div>

y el el código del botón (es mejor no poner código en el botón!):


        protected void btn_webService_Click(object sender, EventArgs e)
        {
//esta es una instancia de la referencia del WS y Calculator lo puedes encontrar en el WSDL description <wsdl:service name="Calculator"> o si en VS poner ver todos lo archivos vas a ver que bajo la rerefencia esta el .disco y .wsdl
            var cliente = new com.dneonline.www.Calculator();

            this.lbl_respuesta.Text = cliente.Add(Convert.ToInt16(this.txt_1.Text), Convert.ToInt16(this.txt_2.Text)).ToString();

        }




Hice uso del método Add, al que le paso el valor de los textbox y lo muestro en el label.

Diego.


lunes, 19 de octubre de 2015

Carrusel de imágenes dinámico en ASPX – UserControl

Una opción es escribir por medio de una función el código html tal como necesite el javascript que vayamos a utilizar, la otra es crear un control de usuario que nos evite esto.
En el ejemplo se lee varias IDs desde un WebService y estos se envían a un manejador ashx el cual nos retorna las imágenes (context.Response.ContentType = "image/jpeg";) correspondientes a cada ID.


Vamos a usar el carrusel de http://sorgalla.com/projects/jcarousel/

Control de Usuario

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        ResponseWS __list = WS.ObtenerLista();
        this.rpt_carrusel.DataSource = __list.Items;
        this.rpt_carrusel.DataBind();
    }
}

En el ASPX

<div id ="Div1">
     <asp:Repeater ID ="ggggggrpt_carrusel" runat ="server">                                
        <HeaderTemplate>                                     
            <ul id ="mycarousel" class ="jcarousel-skin-tango">                         
         </HeaderTemplate>                                                
         <ItemTemplate>                                                      
            <li>
                <a href ="<%# "detalle.aspx?id="+Eval("Id") %>" title ="">
                    <asp:Image ID ="imglst" runat ="server" ImageUrl ='<%#"../imagen.ashx?id="+Eval("Id")%>' Width ="140" Height ="140" />  
                </a>
             </li>                                                   
          </ItemTemplate>                                                  
          <FooterTemplate>
            </ul>
          </FooterTemplate>
     </asp:Repeater>
</div>

Uso del Control de Usuario

En el aspx ponemos a partir de la segunda linea
<%@ Register src="~/ucontrol/WebUserControl.ascx" TagName="WebUserControl" TagPrefix="ucPersonal" %>
Donde src es la ruta donde se contruyo el control de usuario, luego en el html:

<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
    <link href="Css/skinC.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#mycarousel').jcarousel({
                scroll: 3
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="padding-left:100px" >
            <ucPersonal:WebUserControl ID="WebUserControl" runat="server" />
        </div> 
    </form>
</body>

El css que se lo modificó un poco a partir del original

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius:10px;    -webkit-border-radius:10px;   border-radius: 10px;    background:
  1. F0F6F9;    border: 1px solid  #346F97;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
        direction:rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
    /*width:245px;*/
    width: 69%;    padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
    /*width:75px;
    height: 245px;*/
    padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
   /* width:  245px;     height: 75px;*/
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
    width75px;    height: 245px;
}
.jcarousel-skin-tango .jcarousel-item {
    /*width:75px;
    height: 75px;*/
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
        margin-left:0;    margin-right:10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
        margin-left:10px;    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom:10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;    color #000;
}
/**  *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;    top: 43px;
    /*right:-5px;
    width: 32px;
    height: 32px;*/
    right: -32px;    width: 38px;    height: 75px;    cursor: pointer;    background: transparent url(../img/carrusel/derecha.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;     right: auto;    background-image: url(../img/carrusel/izquierda.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    /*background-position:-32px 0;*/
   background-position:-1px 0; }
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    /*background-position:-64px 0;*/
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    /*background-position: -96px 0;*/
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;    top: 43px;
    /*left: 5px;
    width: 32px;
    height: 32px;*/
    left: -32px;    width: 38px;    height: 75px;        cursor: pointer;    background: transparent url(../img/carrusel/izquierda.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;    right: 5px;    background-image:url(../img/carrusel/derecha.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    /*background-position:-32px 0;*/
    background-position:-1 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    /*background-position:-64px 0;*/
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    /*background-position:-96px 0;*/
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;    bottom: 5px;    left: 43px;    width: 32px;    height: 32px;    cursor: pointer;    background: transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position:0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position:0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;    background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;    top: 5px;    left: 43px;    width: 32px;    height: 32px;    cursor: pointer;    background: transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position:0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {    
cursor: default;    background-position: 0 -96px;
}
El resultado:

Carrusel
Diego

Crear HTML Helper - MVC4

Recordando que un Html Helper se traduce en código html cuando se muestra en una página podemos crear un control personalizado dándolo la funcionalidad que necesitamos con ayuda de javascript por ejemplo e incluso css.

Para esto debemos crear una página estática y dentro de esta los métodos que necesitemos, luego de esto se debe modificar el archivo Views>Shared>Web.config para agregar el Namespace de la nueva clase para poder hacer uso del Helper desde las Vistas.

El nuevo Helper:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web;
using System.Web.Mvc;
 
namespace MvcInventarioEquipos.App_Code
{
    public static class HtmlExtensions
    {
 
        /// <summary>
        /// Caja de texto con formateo del texto
        /// </summary>
        /// <typeparam name="TModel"></typeparam>
        /// <typeparam name="TProperty"></typeparam>
        /// <param name="htmlHelper"></param>
        /// <param name="expression"></param>
        /// <param name="transformacion">U (upper), L (lower), C (capitalize)</param>
        /// <returns></returns>
        public static MvcHtmlString nDeveloperTextBox<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string transformacion)
        {
            var body = expression.Body;
            string nombreElemento = string.Empty;
            string opcionStyle = string.Empty;
            string opcionJS = string.Empty;
 
            if ((body as MemberExpression) != null)
            {
                nombreElemento = (body as MemberExpression).Member.Name;
            }
 
            var valorMetaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
            string valorInput = valorMetaData.SimpleDisplayText;
 
            switch (transformacion.ToUpper())
            {
                case "U":
                    opcionJS = "this.value.toUpperCase();";
                    opcionStyle = "uppercase";
                    break;
                case "L":
                    opcionJS = "this.value.toLowerCase();";
                    opcionStyle = "lowercase";
                    break;
                case "C":
                    opcionJS = "this.value.charAt(0).toUpperCase() + this.value.substring(1).toLowerCase();";
                    opcionStyle = "none";
                    break;
                default:
                    opcionJS = "null";
                    opcionStyle = "none";
                    break;
            }
 
            string html = string.Format("<input class=\"text-box single-line\" id=\"{0}\" name=\"{0}\" type=\"text\" value=\"{1}\" style=\"text-transform:{2};\" onblur=\"javascript:this.value={3}\"/>", nombreElemento, valorInput, opcionStyle, opcionJS);
            return MvcHtmlString.Create(html);
        }
 
    }
 
}

Web.config:


  <system.web.webPages.razor>
    <host factoryType
="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType
="System.Web.Mvc.WebViewPage">
      <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
="MvcInventarioEquipos.App_Code"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Uso del Helper:

Al escribir @Html. podemos ver que el nuevo helper esta en la lista junto a los demás.

1h
Además podemos ver que este muestra la descripción que le dimos en el summary y en el param de nuestro Helper.
2h


Esta línea de código crea un input que transforma a mayúsculas lo que el usuario ingrese:

@Html.nDeveloperTextBox(model => model.Etiqueta, "U")


WebService - Parámetros extras SpecifiedFields (fix)

Cuando se consume un servicio web, existen dos maneras de referenciarlo, una es añadiendo un Web Reference y la otra es añadiendo un Service Reference, esta ultima opción esta presente desde VS2008.

Una de las diferencias entre las dos formas de referenciar es la aparición de campos/miembros extras con la estructura de nombre: NombreCampoSpecified del tipo booleano.




Algo de código:

Al revisar los archivos reference que se generan al crear la referencia podemos notar lo siguiente:
·         Web Reference



1 SF
Se genera un miembro extra con la palabra Specified al final.




Código fuente del cliente: 

2s




·         Service Reference

3s

Aqui no exiete el problema.



Código fuente del cliente:
4s



Dos maneras prácticas de evitar esto cuando se trabaja con Web Reference son:


  1. Cuando no se tiene control del Servicio Web.

Para que el dato se pase al servidor, en el cliente se debe asignar el valor true a la variable extra:
5s




 2.   Cuando si se tiene control del Servicio Web.-
Se puede aplicar lo anterior del lado del cliente o se debe modificar el esquema en el servidor donde este  definido el campo del que se genera la variable extra:
Se debe cambiar el valor de IsRequired a true.



6s













Con esto al volver a generar ya no aparecera la variable extra en el cliente:
7s



Diego.











Corregir Datepicker en MVC4

Al crear un proyecto MVC4 se generan la estructura general de este, uno de los archivos creados es
1
_Layout.cshtml que se encuentra dentro de Views > Shared.


Al final de este archivo se encuentran líneas que interactúan con BundleConfig.cs

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

en estas líneas no están definidas un par que son necesarias, la que llama a jQuery UI y la que carga los estilos. 

Modificando debería quedar así:
@Scripts.Render("~/bundles/jquery")
@*Fix datapicker issue*@
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css""~/Content/css")
@*Fix datapicker issue*@
@RenderSection("scripts", required: false)


Diego.