Monday 2 December 2013

Creating AJAX enabled web forms

Creating AJAX enabled web forms

  1. AJAX is a platform-independent, ECMAScript-compliant technology for communicating between code running on the client and code running on the server.
  2. ASP.NET includes both a set of server controls for working with AJAX and a set of client-side JavaScript files called the Microsoft AJAX Library.
  3. The ScriptManager control is required on all pages that work with the AJAX Extensions for ASP.NET. It manages the JavaScript files sent to the client and the communication between the server and the client.
  4. The ScriptManagerProxy control is used on pages that work with a master page that already defines a ScriptManager control or with user controls that will be used on pages that include a ScriptManager control.
  5. The UpdatePanel control allows you to define an area within your page that can post back to the server and receive updates independent of the rest of the page.
  6. The UpdateProgress control is used to provide notice to the user that the page has initiated a callback to the server.

Uses and Benefits of ASP.NET AJAX


  1. Partial-page updates 
  2. Client-side processing 
  3. Desktop-like UI 
  4. Progress indication improved performance and higher scale

Building an AJAX enabled webpage:

Enabling Partial page updates:



  1. Open Visual Studio and create a new ASP.NET website.
  2. Add SQL Server database to the App_Data folder of the site or you can add northwnd.mdf database file.
  3. Add a table to the above added database. For Eg. Create a table “Employees” with columns “EmployeeID” and “EmployeeName” and add entries to these columns.
  4. Open Default.aspx in Source view. Add a ScriptManager control to the body of the page from the AJAX Extensions tab of the Toolbox. 
  5. Add text to the page to serve as a title followed by a horizontal line. Your markup inside the BodyContent control might look as follows.
  6. Add an AJAX UpdatePanel control to the page from the AJAX Extensions tab of the Toolbox.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <h2>Employees</h2>
    <hr />
</asp:Content> 
  1. Switch to Design view and add a GridView control inside the UpdatePanel and bind the GridView to the database table.
  2. Again, open the GridView Tasks window by using the smart tag. Select the Enable Paging check box.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
        </Triggers>
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
                AllowPaging="True">
                <Columns>
                    <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" SortExpression="Employee ID" />
                    <asp:BoundField DataField="EmployeeName" HeaderText="Employee Name" SortExpression="Employee Name" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT * FROM [Employee]"></asp:SqlDataSource>
                   </ContentTemplate>
    </asp:UpdatePanel>

9. Run the application and view the Default.aspx page in a browser. Click the data page numbers to move between data pages. Notice that only the grid is being updated and not the entire page; this is because the UpdatePanel control wraps requests for data and replaces the markup for the grid rather than refreshing the entire page.
10. Next, add a section at the top of the form (outside of the UpdatePanel) that allows the user to enter a new employee and have it added to the database. Your markup code might look as follows.

<div style="margin: 20px 0px 20px 40px">
                    Employee Name
                    <br />
                    <asp:TextBox ID="TextBoxName" runat="server" Width="200"></asp:TextBox>
                    <br />
                    <asp:Button ID="ButtonSave" runat="server" Text="Add" Style="margin-top: 15px" OnClick="ButtonSave_Click" />
 </div>

11. Next, add a Click event to the ButtonSave button defined in step 11 (onclick="ButtonSave_ Click"). This Click event will  add employee name  to theEmployees table in the database. At the end of this event, rebind the GridView control. The following code shows an example.

protected void ButtonSave_Click(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection(conStr);
            string qry = "Insert into Employee(EmployeeName) Values('" +TextBoxName.Text + "')";
            SqlCommand cmd = new SqlCommand(qry, con);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            GridView1.DataBind();
        }
12. Run the application and enter a row in the table. Notice that the entire page refreshes. Add behavior to the page so that the Add button triggers a partial-page update to the GridView control. To do so, add a trigger to the UpdatePanel control and connect the trigger to the ButtonEnter control. The following markup shows an example.

<Triggers>
            <asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
</Triggers>

13. Run the application again and notice that now only GridView updates when a new row is added.




Adding a Progress Indicator: 

1. Open Default.aspx in Source view. Add an UpdateProgress control to the UpdatePanel. Add the control to the bottom of the panel just inside the ContentTemplate element.
2. Add text inside the ProgressTemplate elements of the UpdateProgress control to notify the user that processing is happening on the server. The following shows a sample markup.

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div style="margin-top: 20px; font-size: larger; color: Green">
            Processing, please wait ...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

3. The processing happens pretty fast. Therefore, add a line of code to the end of the ButtonSave_Click event to pause the server-side processing. You can simply put the thread to sleep for a few seconds. The following code shows an example.


System.Threading.Thread.Sleep(2000);

4. Run the application and notice that the notification is shown to the user when you enter a new record in the GridView control.

Monday 28 October 2013

Adding user control and defining it's functionality in C#.Net

Advantages of using a User control:

  1. User controls provide an easy way to combine several controls into a single unit of functionality that can be dragged onto multiple webpages in the same site.
  2. User controls in ASP.NET are created as ASCX files. An ASCX file is similar to the webpage’s ASPX file and can have its own code-behind page.
  3. It helps you define a consistent user interface.  

You can add user control to your website and define it's events by following the below steps:

  • Creating the website and the user control:

  1. Open Visual studio and create a website.
  2. Right click the solution explorer and add New item dialog box and select Web User control.
  3. This adds a file with the .ascx extension to your application. The user control has both a Design view and a Source view, similar to that of an ASPX page.
  4. You can add controls on to the user control in a similar manner as you do for any web page (You can add text boxes, buttons etc).
  5. You may now need to define user control events. For example: You have a "Save" button on the design and you want to save the content of the text box when user click on that button.
  6. To do so, you can add a button click event and an event handler to the user control. You can use this event to raise the event to the host of the user control. Following code shows how to add an event and event handler to a user control file:
public event EventHandler SaveButtonClick;

protected void ButtonSave_Click(object sender, EventArgs e)
{
  if (SaveButtonClick != null)
  {
    SaveButtonClick(this, new EventArgs());
  }
}

  • Hosting the user control on the webpage:

  1. Open the .aspx file in the design view on which you want to add the user control.
  2. Drag and drop the user control (.ascx file). This will add the user control on to the webpage.
  3. You may now need to trap the event fired by the user control when the user click on the "Save" button. 
  4. In C#, you need to first add a method to the page. This method should have the same signature as the event exposed by the user control. You then need to associate the event from the user control to the newly defined method. You can do this inside the page’s Init method. The following code shows an example.
protected void AddressUserControl1_SaveButtonClick(object sender, EventArgs e)
{
}
protected void Page_Init(object sender, EventArgs e)
{
    AddressUserControl1.SaveButtonClick +=
  this.AddressUserControl1_SaveButtonClick;
}

Monday 23 September 2013

Very true....

If five seconds of smile can make your photograph beautiful, just imagine how beautiful your life will be if you keep smiling always.... :):)