johnllao

July 28, 2008

Using JQuery to call Web Service and Page methods

Filed under: Uncategorized — johnllao @ 12:14 pm

The following example shows how to make sa simple call to a web service method or a page method using JQuery.

.aspx code:

<%@ Page Language="C#" CodeBehind="JQuery1.aspx.cs" Inherits="Demo.JQuery.UI.WebApp.JQuery1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="_default" runat="server">
    <asp:ScriptManager ID="_ScriptManager" runat="server"  />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    JQuery<br />
    <input type="button" id="btnGetDate" value="Get Date" onclick="btnGetDate_Click()" />
    <input type="button" id="btnGetWelcome" value="Get Welcome" onclick="btnGetWelcome_Click()" />
    <input type="button" id="btnGetMachineName" value="Get Machine Name" onclick="btnGetMachineName_Click()" />
    </form>
    <script language="javascript" type="text/javascript">
    //<!--
        function btnGetDate_Click()
        {
            $.ajax({
                 type: 'POST'
                ,url: 'appservice.asmx/GetServerDateAndTime'
                ,contentType: 'application/json; charset=utf-8'
                ,dataType: "json"
                ,data: '{}'
                ,success: function(data, status) {
                    alert(data);
                }
                ,error: function(xmlHttpRequest, status, err) {
                    alert('Sorry! Error happens.');
                }
            }
            );
        }

        function btnGetWelcome_Click()
        {
            $.ajax({
                 type: 'POST'
                ,url: 'appservice.asmx/GetWelcomeMessage'
                ,contentType: 'application/json; charset=utf-8'
                ,dataType: "json"
                ,data: '{name:"John"}'
                ,success: function(data, status) {
                    alert(data);
                }
                ,error: function(xmlHttpRequest, status, err) {
                    alert('Sorry! Error happens.');
                }
            }
            );
        }

        function btnGetMachineName_Click()
        {
            $.ajax({
                 type: 'POST'
                ,url: 'jquery1.aspx/GetServerMachineName'
                ,contentType: 'application/json; charset=utf-8'
                ,dataType: "json"
                ,data: '{}'
                ,success: function(data, status) {
                    alert(data);
                }
                ,error: function(xmlHttpRequest, status, err) {
                    alert('Sorry! Error happens.');
                }
            }
            );
        }
    //-->
    </script>
</body>
</html>

.aspx.cs code

namespace Demo.JQuery.UI.WebApp
{
    /// <summary>
    /// First sample
    /// </summary>
    public partial class JQuery1 : System.Web.UI.Page
    {
        /// <summary>
        /// Returns the server date and time
        /// </summary>
        /// <returns></returns>
        [WebMethod()]
        public static string GetServerMachineName()
        {
            return HttpContext.Current.Server.MachineName;
        }
    }
}

Web Service code

namespace Demo.JQuery.UI.WebApp
{
    /// <summary>
    /// Summary description for AppService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService()]
    [ToolboxItem(false)]
    public class AppService : System.Web.Services.WebService
    {
        /// <summary>
        /// Returns the server date and time
        /// </summary>
        /// <returns></returns>
        [WebMethod()]
        public string GetServerDateAndTime()
        {
            return DateTime.Now.ToString("dd-MMM-yyyy hh:mm:ss");
        }

        /// <summary>
        /// Returns the server date and time
        /// </summary>
        /// <returns></returns>
        [WebMethod()]
        public string GetWelcomeMessage(string name)
        {
            return string.Format("Welcome {0}!!!", name);
        }
    }
}

July 16, 2008

Best way of setting the DisplayLayout properties of the UltraWebGrid

Filed under: Uncategorized — johnllao @ 10:08 am

Best way of setting the DisplayLayout properties of the UltraWebGrid is to set it from the InitializeLayout event. Please see code.

/// <summary>
/// Initialize grid layout
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void _Grid_InitializeLayout(object sender, Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)
{
    // General settings
    grid.EnableViewState = true;
    grid.Browser = BrowserLevel.Xml;
    e.Layout.AutoGenerateColumns = false;
    e.Layout.CellPaddingDefault = 3;
    e.Layout.CompactRendering = false;
    e.Layout.ReadOnly = ReadOnly.LevelTwo;
    e.Layout.FrameStyle.Height = Unit.Percentage(98);

    // Add new box settings
    e.Layout.AllowAddNewDefault = AllowAddNew.Yes;
    e.Layout.AddNewBox.Hidden = false;
    e.Layout.AddNewBox.Location = BoxLocation.Bottom;

    // Paging properties settings
    e.Layout.Pager.AllowCustomPaging = false;
    e.Layout.Pager.AllowPaging = false;

    // Band settings
    e.Layout.Bands[0].AllowAdd = AllowAddNew.Yes;
    e.Layout.Bands[0].AllowColSizing = AllowSizing.Free;
    e.Layout.Bands[0].AllowDelete = AllowDelete.Yes;
    e.Layout.Bands[0].AllowRowNumbering = RowNumbering.None;
    e.Layout.Bands[0].AllowSorting = AllowSorting.Yes;
    e.Layout.Bands[0].AllowUpdate = AllowUpdate.Yes;
    e.Layout.Bands[0].BorderCollapse = BorderCollapse.Separate;
    e.Layout.Bands[0].CellClickAction = CellClickAction.RowSelect;
    e.Layout.Bands[0].DataKeyField = "RecordID";
    e.Layout.Bands[0].HeaderClickAction = HeaderClickAction.SortSingle;
    e.Layout.Bands[0].RowSelectors = RowSelectors.Yes;
    e.Layout.Bands[0].SelectTypeCell = SelectType.Extended;
    e.Layout.Bands[0].SelectTypeCol = SelectType.Extended;
    e.Layout.Bands[0].SelectTypeRow = SelectType.Single;
    e.Layout.Bands[0].Expandable = Expandable.No;

}

FindControl in the RowEditTemplate of Infragistics UltraWebGrid

Filed under: Uncategorized — johnllao @ 10:03 am

Simple way to get the instance of a control from a RowEditTemplate.

TextBox txtEmail = grid.Bands[0].RowEditItem.FindControl(“txtEmail”) as TextBox;

July 8, 2008

HTML Message Pattern

Filed under: Uncategorized — johnllao @ 11:54 pm

Wonderful article about an AJAX Pattern.

http://msdn.microsoft.com/en-us/magazine/cc699560.aspx

Blog at WordPress.com.