Category Archives: Ajax

AutoCompleteExtender

AutoCompleteExtender control pulls words that start with the prefix typed into the textbox and display in a popup panel. It comes under AJAX control toolkit.

To implement the same we need to call webservice (WebMethod) thru Ajax & First thing you have to do is to add the ScriptService reference to the webserive as follows. 

[System.Web.Script.Services.ScriptService]:

 

 [WebService(Namespace = “http://tempuri.org/”)]

 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

 [System.Web.Script.Services.ScriptService]

 public class SampleWebService : System.Web.Services.WebService

 {

      [WebMethod]

      public string[] GetName(string prefix)

      {

            List<string> names = null;

            string query = string.Empty;

            SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings[“ConnectionString”]);

             query = “SELECT Name FROM Student WHERE Name = ” + prefix + “%”;

            SqlCommand com = new SqlCommand(query);

            con.Open();

            SqlDataReader dr = com.ExecuteReader();

            if (dr.HasRows)

            {

                names = new List<string>();

                while (dr.Read())

                {

                    names.Add(dr.GetString(1));

                }

            }

           

            return names.ToArray();

        }

    }

 Now at the design level, apart from specifying ScriptManager, we need to provide a <Services> tag as shown below and use Ajax AutocompleteExtender with ServicePath & ServiceMethod:

 <body>

    <form id=”form1″ runat=”server”>

        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

            <services>

                <asp:ServiceReference Path=”AutoComplete.asmx” />

            </services>

        </asp:ScriptManager>

        <div>

            <asp:TextBox ID=”txtCountry” runat=”server”></asp:TextBox>

<ajaxToolkit:AutoCompleteExtender runat=”server” ID=”autoComplete1″ TargetControlID=”txtCountry”

ServicePath=”AutoComplete.asmx” ServiceMethod=”GetCountriesList” MinimumPrefixLength=”1″

            EnableCaching=”true” />

        </div>

    </form>

</body>

 

Leave a comment

Filed under Ajax

UpdatePanel

UpdatePanel

The UpdatePanel control is a server control which used to achieve asynchronously postback of limited to regions of the page.
This process is coordinated by the ScriptManager server control.

By default, any postback control inside an UpdatePanel control causes an asynchronous postback and refreshes the panel’s content. However, you can also configure other controls on the page to refresh an UpdatePanel control. You do this by defining a trigger for the UpdatePanel control.
eg:
<form runat=”server”>
    <div>
    <asp:Button
                Text=”Refresh Panel”
                runat=”server” />
    <asp:ScriptManager
                       runat=”server” />
    <asp:UpdatePanel
                     UpdateMode=”Conditional”
                     runat=”server”>
                     <Triggers>
                       <asp:AsyncPostBackTrigger ControlID=”Button1″ />
                     </Triggers>
                     <ContentTemplate>
                     <fieldset>
                     <legend>UpdatePanel content</legend>
                     <%=DateTime.Now.ToString() %>
                     </fieldset>
                     </ContentTemplate>
    </asp:UpdatePanel>

A trigger’s control event is optional. If you do not specify an event, the trigger event is the default event of the control.

UpdateMode (Always, Conditional)
If the UpdateMode property is set to Always, the UpdatePanel control’s content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside other UpdatePanel controls, and postbacks from controls that are not inside UpdatePanel controls.

If the UpdateMode property is set to Conditional, the UpdatePanel control’s content is updated when one of the following is true:

  • When the postback is caused by a trigger for that UpdatePanel control.
  • When you explicitly call the UpdatePanel control’s Update() method.
  • When the UpdatePanel control is nested inside another UpdatePanel control and the parent panel is updated. 

To use an UpdatePanel control in a master page, you must decide how to include the ScriptManager control. If you include the ScriptManager control on the master page, it can act as the ScriptManager control for all content pages.

UpdatePanel controls can be nested. If the parent panel is refreshed, all nested panels are refreshed also.

Leave a comment

Filed under Ajax