ASP.NET MVC 3: Evento CatDotNet

El próximo sábado 2 de Julio se realizará el evento inaugural de CatDotNet en el cual participaré conjuntamente con los siguientes ponentes:

  • José Miguel Torres que nos hablará de la gestión de dependencias con NuGet
  • Álex Casquete con las mejoras de productividad con Entity Framework 4.1
  • Marc Rubiño con Javascript y Ajax para desarrolladores de ASP.NET

Mi presentación tratará de algunas de las novedades de ASP.NET MVC 3, entre ellas:

  • Soporte a HTML5
  • Data Scaffolding
  • IDependencyResolver con Unity
  • Testing

Os podéis registrar en el siguiente enlance:  
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032489264&Culture=es-ES

Read More

ASP.NET MVC: Componente Autocomplete de jQuery

En el artículo de hoy vamos a ver qué fácil es alimentar mediante Ajax y objetos JSON componentes jQuery desde ASP.NET MVC.

Para empezar, vamos a usar la CDN de google para importar las librerías que necesitamos: jQuery y jQuery UI más los ficheros de estilos para jQuery UI:

http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css

Seguidamente definimos en nuestra vista un label y una caja de texto:

<label for="txtTitulos">Titulos: </label><input type="text" id="txtTitulos" />

El código cliente para enlazar la extensión de jQuery a la caja de texto es la siguiente:

<script type="text/javascript">
    $(document).ready(function () {
        $("#txtTitulos").autocomplete({
            minLength: 3,
            source: getData
        });
    });

    function getData(request, response) {
        $.ajax({
            url: '/Home/GetData',
            type: 'GET',
            dataType: 'json',
            data: { words: request.term },
            success: function (data) {
                response(data);
            }
        });
    }
</script>

Como podemos ver, inicializamos la opción source con nuestro propio callback getData. En que realizamos la consulta a la action GetData del controller Home. Para más opciones y eventos del componente autocomplete mirad la documentación en la página de jQuery UI.

Finalmente nuestra action GetData queda de la siguiente manera:

public ActionResult GetData(string words)
{
    var mySource = GetData();

    var result = from s in mySource
                    where s.Title.Text.Contains(words)
                    select s.Title.Text;

    return Json(result, JsonRequestBehavior.AllowGet);
}

Si os fijáis en el segundo parámetro de Json, indicamos que admitimos peticiones de tipo GET. Esto se debe indicar para evitar problemas de seguridad. Para más información consultad este post de Phil Haack.

Los datos de ejemplo los he sacado del rss de la página de ASP.NET. Os dejo el código para que no es creáis que miento:

private IEnumerable<SyndicationItem> GetData()
{
    string feed = "http://www.asp.net/rss/news";

    var req = WebRequest.Create(feed);

    using (var reader = XmlReader.Create(req.GetResponse().GetResponseStream()))
    {
        var rssData = SyndicationFeed.Load(reader);
        return rssData.Items;
    }
}

Read More

ASP.NET MVC: Múltiples botones en el mismo formulario

Seguramente os habréis encontrando en ocasiones en que, dentro de un mismo formulario, necesitamos alojar varios botones de acción sobre el mismo.

Existen varias opciones de conseguir este objetivo, pero mí preferida, como amante de client scripting, es con jQuery.

A continuación mostramos la vista con un formulario definido y dos botones de submit:

<% using (Html.BeginForm()) { %>
    <div>
        <%= Html.LabelFor(m=> m.Name) %>
        <%= Html.TextBoxFor(m => m.Name) %>
    </div>
    <div>
        <%= Html.LabelFor(m => m.Description)%>
        <%= Html.TextBoxFor(m => m.Description) %>
    </div>

    <input id="btnSave" type="submit" value="Guardar" />
    <input id="btnGetNextRow" type="submit" value="Siguiente registro" />
<% } %>

Por el momento, nada nuevo. A continuación vemos como enlazamos el evento click a los botones:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnSave").click(function () {
            var form = $(this).parent("form");
            form.attr('action', '<%= Url.RouteUrl(new { Controller = "Home", Action = "Save" }) %>');
            form.attr('method', 'post');
        });

        $("#btnGetNextRow").click(function () {
            var form = $(this).parent("form");
            form.attr('action', '<%= Url.RouteUrl(new { Controller = "Home", Action = "GetNextRow" }) %>');
            form.attr('method', 'get');
        });
    });
</script>

Obtenemos una referencia al formulario con la instrucción: $(this).parent(“form”) y a continuación cambiamos los atributos action y method del formulario. De esta forma, hacemos submit a la acción que nos interesa en cada momento utilizando GET o POST según convenga.

Read More