hicham's profilehicham Boutaleb <C'est ...PhotosBlogNetwork Tools Help

Blog


    September 25

    Building a Company Contact Web Part Using ASP.NET Ajax and JSON

    First we have to create a custom SharePoint list that contains a default title, company name, contact person, city, and country fields(set
    the column types of all columns to a single line of text) ,as it shows the figure below:

    Sans titre

    The idea behind the company contact web part is that if you type in the name of the company
    and click the AutoFill button, the web part will call a web service that retrieves the rest of the form
    information for you from the ContactInfo SharePoint list. The web service will return the data in
    JSON format, so the client-side application needs to be able to deal with that.
    In the next step, you will create the server side of the company contact application. Add a new
    web service to the AskMe2 project; make sure the Place Code in Separate File check box is not
    checked, and name the web service ContactService.asmx.

    The ContactService web service returns a JSON message containing all contact information.
    The ContactService web service will return a JSON message that looks like this:
    {“ContactPerson”:”[value]”, “City”:”[value]”, “Country”:”[value]”}

    The following listing shows the complete implementation of the ContactService web service. Make sure
    to add a reference to the Microsoft.SharePoint assembly.

    <%@ WebService Language=”C#” Class=”LoisAndClark.CompanyContact.ContactService”%>
    using System;
    using System.Web;
    using System.Collections;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    using Microsoft.SharePoint;
    using System.Web.Script.Services;
    namespace hichamveo{
    [WebService(Namespace = “http://tempuri.org/”)]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]
    public class ContactService : System.Web.Services.WebService
    {
    public ContactService()
    {
    }
    [WebMethod]
    public string GetContactInfo(string strCompanyName)
    {
    string strResponse = “\”ContactPerson\”:\”{0}\”, \”City\”:\”{1}\”, \”Country\”:\”{2}\””;
    string strUrl = “site's url”;

    try
           {
               using(SPSite objSites=new SPSite(strUrl))
               {
                   using(SPWeb objSite=objSites.OpenWeb())
                   {
                       SPList objContactList = objSite.Lists["ContactInfo"];
                       foreach(SPListItem objListItem in objContactList.Items)
                       {
                           string strName = objListItem["CompanyName"].ToString();
                           if(strName==strCompanyName)
                           {
                               string strContact=objListItem["ContactPerson"].ToString();
                               string strCity = objListItem["City"].ToString();
                               string strCountry = objListItem["Country"].ToString();

                               strResponse = "{" + string.Format(strResponse, strContact, strCity, strCountry) + "}";
                               break;
                           }
                       }
                   }
               }

               return strResponse;
           }
           catch(Exception)
           {
               throw;
           }
       }

    Note1 The GetContactInfo() method returns a JSON message.

    Note2 Attention to naming namespace, it should not be like "aaaa.bbbb" because when calling the web service, the javascript class proxy takes the form namespace.classeName.methodeName for calling the the web service's method.
    So if you name your namespace "aaaa.bbbb ", the call will take the form:
    "aaaa.bbbb.classename.methodename" which will generate an error

    Now,we will add a single registration of a ScriptManager object to the master page
    of a SharePoint site.

    The following procedure shows how to use SharePoint Designer to add a single
    ScriptManager registration to the default master page of a SharePoint site.

    1. Open a browser and navigate to the SharePoint site that you want to add Ajax-enabled web
    parts to.
    2. Choose File ->Edit with Microsoft Office SharePoint Designer. This opens the SharePoint
    site in SharePoint Designer.
    3. Expand the _catalogs folder.
    4. Expand the masterpage gallery.
    5. Double-click default.master. This opens default.master in SharePoint Designer.
    6. Switch to Code view.
    7. Locate the registration for the web part manager. This looks like the following code fragment:
    <WebPartPages:SPWebPartManager id=”m” runat=”Server” />
    8. Add the following registration for a ScriptManager object to this page, right after the registration
    for the web part manager:
    <asp:ScriptManager ID=”theScriptManager” runat=”Server”/>
    9. Save the page and close SharePoint Designer.

    The complete code for the CompanyContactClient web part :

    using System;
    using System.Runtime.InteropServices;
    using System.Web.UI;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Serialization;

    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebControls;
    using Microsoft.SharePoint.WebPartPages;

    namespace AjaxClient
    {
        [Guid("7b7b741e-3f5a-4df9-bf28-5b0ee77234d6")]
        public class AjaxClient : System.Web.UI.WebControls.WebParts.WebPart
        {
            public AjaxClient()
            {
                PreRender += new EventHandler(PerformanceCounterWebPart_PreRender);
            }

            void PerformanceCounterWebPart_PreRender(object sender,EventArgs e)
            {

                if(!Page.ClientScript.IsClientScriptBlockRegistered("JSON"))
                {
                    Page.ClientScript.RegisterClientScriptInclude("JSON", "/wpresources/json.js");
                }

                if (!Page.ClientScript.IsClientScriptBlockRegistered("AJAX"))
                {
                    Page.ClientScript.RegisterClientScriptInclude("AJAX", "/wpresources/ajax2.js");
                }
            }
            protected override void CreateChildControls()
            {
                try
                {
                    string strPath = "http://web service's url/ContactService.asmx";//web service's url
                    ServiceReference objReference = new ServiceReference();
                    objReference.Path = strPath;

                    Control ctlManager=Page.Master.FindControl("theScriptManager");
                    ScriptManager objManager = ctlManager as ScriptManager;
                    objManager.Services.Add(objReference);

                    ScriptReference objScript=new ScriptReference("/wpresources/ajax2.js");
                    objManager.Scripts.Add(objScript);

                    string strCompanyName = "Name: <input id=\"CompanyName\" type=\"text\" />";
                    Controls.Add(new LiteralControl(strCompanyName));

                    string strAutoFill = "<input id=\"AutoFill\" type=\"button\" value=\"AutoFill...\" onclick=\"AutoFillRequest();\" /><br/>";
                    Controls.Add(new LiteralControl(strAutoFill));

                    string strContactPerson = "Contact: <input id=\"ContactPerson\" type=\"text\" /><br/>";
                    Controls.Add(new LiteralControl(strContactPerson));

                    string strCity = "City: <input id=\"City\" type=\"text\" /><br/>";
                    Controls.Add(new LiteralControl(strCity));

                    string strCountry = "Country: <input id=\"Country\" type=\"text\" /><br/>";
                    Controls.Add(new LiteralControl(strCountry));
                }

                catch(Exception ErrorWebPart)
                { Controls.Add(new LiteralControl(ErrorWebPart.Message)); }

            }
        }
    }

    The final part of the company contact ASP.NET Ajax solution is the content of the ajax.js
    JavaScript library. It contains a function called AutoFillRequest() that calls the ContactService web
    service. A callback function called OnAutoFillResponse() converts the web service response to a
    JavaScript object and uses the object to set the values of the contact person, city, and country fields.
    The content of the ajax.js JavaScript library looks like :

    function AutoFillRequest()
    {
        var objCompanyName=document.getElementById("CompanyName");
        hichamveo.ContactService.GetContactInfo(objCompanyName.value,OnAutoFillResponse);
    }

    function OnAutoFillResponse(strResult)
    {
        var objContact=eval('(' + strResult + ')');
        var objContactPerson = document.getElementById("ContactPerson");
        objContactPerson.value =objContact.ContactPerson;
        var objCity = document.getElementById("City");
        objCity.value = objContact.City;
        var objCountry = document.getElementById("Country");
        objCountry.value = objContact.Country;
    }

    The company contact web part:

    Sans titre  

    Sans titre

    Comments

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    Trackbacks

    The trackback URL for this entry is:
    http://hichamboutaleb.spaces.live.com/blog/cns!B117187DC598CA5A!177.trak
    Weblogs that reference this entry
    • None