cogimator.net

Une ligne à la fois...

JQuery.AutoComplete et ASP.NET MVC : Partie 5

Pour terminer cette série, voici un extrait de code permettant de créer simplement une zone de texte avec autocompletion.

En premier, le code de la méthode d’extension :

using System;
using System.Linq.Expressions;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Cogimator.Demos.Mvc
{
    /// <summary>
    /// Classes helper pour autocompletion
    /// </summary>
    public static class AutoCompleteExtensions
    {
        /// <summary>
        /// Genere un editeur avec autocompletion
        /// </summary>
        /// <typeparam name="TModel">Type de Model</typeparam>
        /// <typeparam name="TDisplayValue">Type de la propriété utilisée 
        /// pour affichage</typeparam>
        /// <param name="html">helper</param>
        /// <param name="displayExpression">Expression pour indiquer la 
        /// propriété à utiliser</param>
        /// <param name="action">Action du Controler courant renvoyant du 
        /// JSON</param>
        /// <returns>Chaine HTML</returns>
        public static string AutoCompleteFor<TModel, TDisplayValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TDisplayValue>> displayExpression, string action)
        {
            var res = html.EditorFor(displayExpression, null).ToHtmlString();

            var displayName = ModelMetadata.FromLambdaExpression(displayExpression, html.ViewData).PropertyName;

            res += string.Format(
                @"<script type=""text/javascript"">
                    $(document).ready(function() {{
                        $(""#{0}"")
                            .autocomplete({{
                                source: function (request, response) {{
                                    $.post(""{1}"",
                                        {{
                                            term: request.term
                                        }}, 
                                        function (result) {{
                                            response(result)
                                        }})
                                }},
                                minLength: 1,
                                select: function(event, ui) {{
                                    $('#{0}').val(ui.item.label);
                                    return false;
                                }}
                            }});
                    }});
                </script>",
                html.ViewData.TemplateInfo.GetFullHtmlFieldId(displayName),
                UrlHelper.GenerateUrl(null, action, null, null, html.RouteCollection, html.ViewContext.RequestContext, true));

            return res;
        }
    }
}

Un modèle simple :

namespace Cogimator.Demos.FrontEnd.Mvc.Models
{
    public class SimpleModel
    {
        public string Label { get; set; }
    }
}

Dans la partie configuration/pages/namespace des fichiers web.config situé dans le dossier racine et dans le dossier Views de votre application MVC, n’oubliez pas d’indiquer le namespace de vos méthodes d’extension et de vos modeles :

<add namespace="Cogimator.Demos.Mvc" />
<add namespace="Cogimator.Demos.FrontEnd.Mvc" />

Et la vue :

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SimpleModel>" %>
<asp:Content ContentPlaceHolderID="plhCenter" runat="server">
    <%using (var f = Html.BeginForm()) { %>
    <h2>Extension</h2>
    <p>Champ : <%=Html.AutoCompleteFor( x=> x.Label, "AutoComplete") %></p>
    <%} %> 
</asp:Content>

Ceci termine cette série sur JQuery.UI.AutoComplete et ASP.NET MVC.

JQuery.AutoComplete et ASP.NET MVC : Partie 4

Pour clore cette série, nous allons présenter les résultats avec des catégories. Comme précédemment, commençons par l’action de notre Controller :

public JsonResult AutoCompleteCategorized(string search){
    var data = GenerateData()
        .Where(x => x.Libelle.Contains(search))
        .Select(x => new
        {
            value = x.Id,
            label = x.Libelle,
            category = x.Category
        });
     return Json(data);
}

Suivie de la vue, dans laquelle on pourra noté que lors de l’appel de $().autocomplete(), le résultat est placé dans une variable, afin de pouvoir personnaliser plus facilement les fonctions de rendu.

<%using (var f = Html.BeginForm()) { %>
<p>Categorized</p>
<%=Html.TextBox("Libelle_Categorized")%>
<%=Html.TextBox("Id_Categorized")%>
<%} %>
<script type="text/javascript">
$(document).ready(function () {
    var ac_categorized = $('#Libelle_Categorized').autocomplete({
        minLength: 1,
        source: function (request, response) {
            $.post('<%=Url.Action("AutoCompleteCategorized") %>',
                {
                    search: request.term
                },
                function (result) {
                    response(result)
                })
        },
        select: function (event, ui) {
            $('#Libelle_Categorized').val(ui.item.label);
            $('#Id_Categorized').val(ui.item.value);
            return false;
        }
    });
    ac_categorized.data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
    };
    ac_categorized.data("autocomplete")._renderMenu = function (ul, items) {
        var self = this;
        var currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>"
                     + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    };
});
</script>

Et le résultat :

AutoComplete_5

Pour terminer cette série, nous verrons comment créer une méthode d’extension pour capitaliser les cas simples (libellé et identifiant).

JQuery.AutoComplete et ASP.NET MVC : Partie 3

Cette fois ci, nous allons personnaliser les objets retournés par notre Controller :

public JsonResult AutoCompleteCustomJson(string search, string prefixWith)
{
    var data = GenerateData()
        .Where(x => x.Libelle.Contains(search))
        .Select(x => new
        {
            Id = x.Id,
            Libelle = x.Libelle,
            Prefix = prefixWith
        });

    return Json(data);
}

Pour que ces modifications soient prises en compte dans notre vue, il faudra modifier la fonction dans “source”, et remplacer la fonction “_renderItem”.

La fonction “$.map” permet de transformer la liste d’objets JSON reçu dans une autre liste, dans le cas où l’on souhaiterait renommer encore une fois les propriétés des objets de notre liste.
La fonction “_renderItem” permet de contrôler le rendu de la liste d’auto complétion.

<%using (var f = Html.BeginForm()) { %>
    <%=Html.TextBox("Libelle_CustomJson")%>
    <%=Html.TextBox("PrefixWithJson")%>
    <%=Html.TextBox("Id_CustomJson")%>
<%} %>

<script type="text/javascript">
    $(document).ready(function () {
        $('#Libelle_CustomJson').autocomplete({
            minLength: 1,
            source: function (request, response) {
                $.post('<%=Url.Action("AutoCompleteCustomJson") %>',
                    {
                        search: request.term,
                        prefixWith: $("#PrefixWithJson").val()
                    }, 
                    function (result) {
                        response(result)
                    })
            },
            select: function (event, ui) {
                $('#Libelle_CustomJson').val(ui.item.Libelle);
                $('#Id_CustomJson').val(ui.item.Id);
                return false;
            }
        }).data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.Prefix 
                    + "<br>" + item.Libelle + "</a>")
            .appendTo(ul);
        };
     });
</script>

Le résultat :

AutoComplete_4