Microsoft se tourne vers l’Open Source

Si vous avez un peu suivi les annonces et évolutions d’ASP.NET, vous devez savoir que Microsoft avait publié le code d’ASP.NET MVC. Par la suite jQuery était embarqué par défaut dans les templates de projets ASP.NET à partir de 2008. Depuis lors ont été ajoutés : Modernizr, Knockout, jQuery Mobile, JSON.NET, et jQuery UI.

Microsoft a commencé à utiliser un style de développement ouvert avec le SDK Windows Azure l’an dernier. Ce style ayant bien fonctionné, c’est maintenant l’occasion de l’adopter pour des plateformes plus populaires comme ASP.NET. Cela va permettre à Microsoft d’interagir avec la communauté des développeurs et de répondre bien plus rapidement aux demandes et de corriger les bugs relevés.

Qu’on se le tienne pour dit : l’éditeur accélère clairement le virage open source amorcé ces dernières années pour ses outils de développements et travaille en étroite collaboration avec la communauté. Aujourd’hui tout développeur ASP.NET pourra pleinement s’impliquer dans un process d’amélioration, et ce directement :

• Vous avez trouvé un bug ? Envoyez un test unitaire ou un correctif !
• Vous pensez que la couverture de code n’est pas suffisante ? Soumettez un test unitaire !
• Vous avez une idée fonctionnalité ? Impliquez-vous plus profondément avec les développeurs et aidez !

[Plus]

Là où cela se complique, c’est lorsqu’on souhaite que ce pop-up s’affiche automatiquement au chargement de la page si les données n’ont pas encore été saisies par l’utilisateur. Utilisant un Visual WebPart j’ai ceci dans mon markup (de manière simplifiée) :

<script type="text/javascript">
    function OpenMonPopUp(_url) {
        var options = {
        url: _url,
        width: 800,
        height: 600
        };
        SP.UI.ModalDialog.showModalDialog(options);
    }
</script>

...
<a id="lnkEdit" runat="server">Edit Fund</a>
...

Dans le code-behind de mon WebPart, si les données ne sont pas saisies (le booléen MaCcondition) alors je fais appel à RegisterStartupscript pour appeller simplement ma méthode javascript OpenFund qui fonctionne très bien :

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string url = SPContext.Current.Web.Url + "/_layouts/MonWebParts/MonApplicationPage.aspx";
        lnkEdit.HRef = string.Format("javascript:OpenMonPopUp('{0}')", url);

        if (MaCondition)
        {
            string monScript = string.Format("OpenMonPopUp('{0}');", url));
            ScriptManager.RegisterStartupScript(this, this.GetType(), "keyOpenMonPopUp", monScript , true);
        }
    }
}

Et là c’est le drame, lors du chargement de la page contenant le WebPart j’obtiens cette erreur javascript lors de l’appel à SP.UI.ModalDialog.showModalDialog :

object doesn’t support this property or method

Le problème ne provient pas de ma méthode OpenMonPopUp ni d’un oubli de référence au script SharePoint SP.js. Alors quoi ? En fait, le problème est simple : mon appel à SP.UI.ModalDialog.showModalDialog et donc à la librairie SP.js via RegisterStartupScript se fait AVANT le chargement de la dite librairie. La solution est tout aussi simple : utiliser la méthode javascript ExecuteOrDelayUntilScriptLoaded afin d’attendre le chargement de la librairie. Ce qui donne au final :

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string url = SPContext.Current.Web.Url + "/_layouts/MonWebParts/MonApplicationPage.aspx";
        lnkEdit.HRef = string.Format("javascript:OpenMonPopUp('{0}')", url);

        if (MaCondition)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("ExecuteOrDelayUntilScriptLoaded(function () {");
            sb.Append(string.Format("OpenMonPopUp('{0}');", url));
            sb.Append("}, \"sp.js\");");           
            
            ScriptManager.RegisterStartupScript(this, this.GetType(), "keyOpenMonPopUp", sb.ToString(), true);
        }
    }
}

Hope this help !

• La bonne vieille méthode : AjaxControl Toolkit + un Web Service .asmx
• Du javascript avec utilisation de l’API Cliente SharePoint
• Un peu de jQuery UI + un Web Service.asmx
• etc…

Mais j’ai voulu m’amuser un peu en utilisant les Web Services RESTful offerts depuis la version 2010 de SharePoint. Et plus précisément faire appel à http://ServeurMoss/_vti_bin/listdata.svc. Pour l’autocompletion jQuery UI suffit amplement.

Voici ce que cela donne :

<div id="NewUsers">
    <p><b>Add new user :</b></p>
    <input type='hidden' id="txtUserSelectedValue"/>
    <input type="text" id="txtUser" class="autosuggestUser" />
    <button id="btn_addUser" type="button" class="fg-button ui-state-default ui-corner-all">Add</button>
</div>

Et au niveau de jQuery :

$("#txtUser").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://ServeurMoss/_vti_bin/ListData.svc/UserInformationList?$filter=(ContentType eq 'Person') and (substringof('" + $("#txtUser").val() + "',Name))",
            dataType: "json",
            type: "GET",
            contentType: "application/json",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d.results, function (item) {
                    return {
                        label: item.Name + ' (' + item.Account + ')',
                        id: item.Id
                    }
                }));
            },
            error: function (XMLHttpRequest, callStatus, errorThrown) {
                alert(callStatus);
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        $("#txtUserSelectedValue").val(ui.item.id);
    }
});

Voici le résultat obtenu :

Lors de la sélection d’un user dans la liste, son ID est stocké dans le hidden field. Rien d’extraordinaire, mais si ça peut vous faire gagner du temps… Hope this help !