ASP.Net 2.0 AJAX Extension 1.0 Application

Pre-Request:

To have AJAX Extensions 1.0 form http://ajax.asp.net .

Go To http://ajax.asp.net/downloads/default.aspx?tabid=47 .

You can download "ASPAJAXExtSetup.exe" which is of 1.36 MB in size.

Go to Visual studio 2005 >> New Web site

You will notice in the Templates list new template added by the name "ASP.NET AJAX-Enabled Web Site" & select location where you want to create this web site.

We need to have database and table in the database. To have this in my project follow the steps as shown below:

App_Data >> Right Click >> Add New Item

Enter Database name as "Products.mdf".

Right Click >> Tables >> Add New Tables

Create table with the following fields:

ProductId  int  Unchecked
ProductTitle  varchar(50) Unchecked
ProductDescription varchar(1000) Unchecked
ProductPrice  int  Unchecked
AvailQuantity  int  Unchecked
IsActive  char(10) Unchecked

Add few products in the table.

Rigth click on Project >> Add New Dataset with name Products.xsd, this get added by default under folder called as "App_Code"

Choose data base >> connection string >> Click on query builder

Assign table to by adding new exesting table name in the query builder and generate query.

Right Click to the project >> Add new Masterpage to the project.

Right Click to the project >> Add Default.aspx page to the project, while adding default.aspx page do not forget to enable "select master page" selecte the page from the specifiedicaon.

On default page very first step you should have script manager tag as shown below

STEP I:

<asp:scriptmanager id="scrManager" runat="server">

</asp:scriptmanager>

 This is basically responsible for the client side javascript handling for example it

  is possible to add script reference dynamically as below:

<asp:scriptmanager id="SMgr" runat="server">

  <Scripts>

    <asp:ScriptReference Path="./Script.js" />

  </Scripts>

</asp:scriptmanager>

but in our case, I do not want to add any reference so just keep <asp:ScriptManager runat="server" id="scrId"/> tag.

STEP II:

Now go to Toolbox and add UpdatePanel to the page whose tag look like this:

<asp:UpdatePanel runat="server" id="updatePanelView">

Add <ContentTemplate> tag to the updatePanel control.

STEP III:

In this update panel drag and drop GridView under <ContentTemplate>, put GridView control.

As soon as you placed GridView on the page you will find that "Grid View Task" is available to you to select DataSource.

Once you have setup the data source in the "Grid View Task" panel you will find "Enable Paging", "Enable Sorting" & "Enable Editing" which you need to make enable, so that this functionality will be available to the page.

OR you can select by following method:

Right Click GridView and select DataSourceId from the property >> Select New Data Source >> Click on Object
automatically "ObjectDataSource1" Id will get assigned click on ok >> Choose your business Adapter: "ProductsTableAdapter.ProductsTableAdapter" >> Click Next >> Click on Next

So far GridView Code will look something like this:

<!-- Code goes for Product List GridView!-->

    <div class="control">

        <asp:UpdatePanel runat="server" id="updatePanelView">

            <contenttemplate>

        <asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1"

          DataKeyNames="ProductId" AllowSorting="True" AllowPaging="True">

        <Columns>

            <asp:CommandField ShowEditButton="True"></asp:CommandField>

            <asp:BoundField ReadOnly="True" DataField="ProductId" InsertVisible="False" SortExpression="ProductId"  

              HeaderText="ProductId"></asp:BoundField>

            <asp:BoundField DataField="ProductName" SortExpression="ProductName"  

              HeaderText="ProductName"></asp:BoundField>

            <asp:BoundField DataField="ProductDescription" SortExpression="ProductDescription"  

              HeaderText="ProductDescription"></asp:BoundField>

            <asp:BoundField DataField="ProductQuantity" SortExpression="ProductQuantity"  

              HeaderText="ProductQuantity"></asp:BoundField>

            <asp:BoundField DataField="ProductPrice" SortExpression="ProductPrice"  

              HeaderText="ProductPrice"></asp:BoundField>

            <asp:CheckBoxField DataField="IsActive" SortExpression="IsActive" HeaderText="IsActive">
            </asp:CheckBoxField>

        </Columns>

        </asp:GridView>&nbsp;

        </contenttemplate>

        </asp:UpdatePanel>
    </div>

Now next step to have Grid details to provide UI for adding new product to the system:

Entire Code look like this:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <asp:ScriptManager id="scrManager" runat="server">

    </asp:ScriptManager>

    <!-- Code goes for Product List GridView!-->

    <div class="control">

        <asp:UpdatePanel runat="server" id="updatePanelView">

            <contenttemplate>

            <asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" 

              DataKeyNames="ProductId" AllowSorting="True" AllowPaging="True">

            <Columns>

                <asp:CommandField ShowEditButton="True"></asp:CommandField>

                <asp:BoundField ReadOnly="True" DataField="ProductId" InsertVisible="False" SortExpression="ProductId"

                  HeaderText="ProductId"></asp:BoundField>

                <asp:BoundField DataField="ProductName" SortExpression="ProductName"

                  HeaderText="ProductName"></asp:BoundField>

                <asp:BoundField DataField="ProductDescription" SortExpression="ProductDescription"

                  HeaderText="ProductDescription"></asp:BoundField>

                <asp:BoundField DataField="ProductQuantity" SortExpression="ProductQuantity"

                  HeaderText="ProductQuantity"></asp:BoundField>

                <asp:BoundField DataField="ProductPrice" SortExpression="ProductPrice"

                  HeaderText="ProductPrice"></asp:BoundField>

                <asp:CheckBoxField DataField="IsActive" SortExpression="IsActive" HeaderText="IsActive">
                </asp:CheckBoxField>

            </Columns>

            </asp:GridView>&nbsp;

            </contenttemplate>

        </asp:UpdatePanel>

    </div>

    <!-- New code for inserting producct !-->

    <div class="control">

        <span class="Header">New Product to the list:</span>

        <asp:UpdatePanel runat="server" id="updatepanelDetail" UpdateMode="Conditional">

            <contenttemplate>

            <asp:DetailsView id="DetailsView1" runat="server" DataSourceID="ObjectDataSource1" 
              DataKeyNames="ProductId" Height="50px" Width="212px" 

              AutoGenerateRows="False" DefaultMode="Insert">

                <Fields>

                    <asp:BoundField DataField="ProductId" HeaderText="ProductId" InsertVisible="False"

                      ReadOnly="True" SortExpression="ProductId" />

                    <asp:BoundField DataField="ProductName" HeaderText="ProductName"

                      SortExpression="ProductName" />

                    <asp:BoundField DataField="ProductDescription" HeaderText="ProductDescription"

                      SortExpression="ProductDescription" />

                    <asp:BoundField DataField="ProductQuantity" HeaderText="ProductQuantity" SortExpression="ProductQuantity"

                      ControlStyle-Width="10" />

                    <asp:BoundField DataField="ProductPrice" HeaderText="ProductPrice"

                      SortExpression="ProductPrice" ControlStyle-Width="20" />

                    <asp:CheckBoxField DataField="IsActive" HeaderText="IsActive" SortExpression="IsActive" />

                    <asp:CommandField ShowInsertButton="True" />

                </Fields>

            </asp:DetailsView>

            <asp:ObjectDataSource id="ObjectDataSource1" runat="server" InsertMethod="Insert"

              TypeName="ProductsTableAdapters.ProductsTableAdapter" DeleteMethod="Delete"

              SelectMethod="GetProductList" OldValuesParameterFormatString="original_{0}"      

              UpdateMethod="Update"><DeleteParameters>

            <asp:Parameter Type="Int32" Name="Original_ProductId"></asp:Parameter>

            </DeleteParameters>

            <UpdateParameters>

                <asp:Parameter Type="String" Name="ProductName"></asp:Parameter>

                <asp:Parameter Type="String" Name="ProductDescription"></asp:Parameter>

                <asp:Parameter Type="Int32" Name="ProductQuantity"></asp:Parameter>

                <asp:Parameter Type="Int32" Name="ProductPrice"></asp:Parameter>

                <asp:Parameter Type="Boolean" Name="IsActive"></asp:Parameter>

                <asp:Parameter Type="Int32" Name="Original_ProductId"></asp:Parameter>

            </UpdateParmeters>

            <InsertParameters>

                <asp:Parameter Type="String" Name="ProductName"></asp:Parameter>

                <asp:Parameter Type="String" Name="ProductDescription"></asp:Parameter>

                <asp:Parameter Type="Int32" Name="ProductQuantity"></asp:Parameter>

                <asp:Parameter Type="Int32" Name="ProductPrice"></asp:Parameter>

                <asp:Parameter Type="Boolean" Name="IsActive"></asp:Parameter>

             </InsertParameters>

           </asp:ObjectDataSource>

        </contenttemplate>

        </asp:UpdatePanel>

    </div>

</asp:Content>

You can download the code, it is tested on two seperate machines.