ARTICLE

ASP.Net 2.0 AJAX Extension 1.0 Application

Posted by Munir Shaikh in Articles | ASP.NET using VB.NET on August 13, 2007

Tags: AJAX Extension1.0, Application in ASP.Net 2.0, AJAX, ASP.NET

This article will explain you in dept of creating Asp.Net Ajax-Enabled Application. I have explained with the help of product management example, where you can add new product, edit, update & cancel the product related activity.

Tweet
32213
2

Download Files:

AjaxAspNetExtension.zip

Reader Level: Beginner

Pre-Request:

To have AJAX Extensions 1.0 from 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.

Right 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 existing 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" select the page from the specified icon.

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">

<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:

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

<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" DataKeyNames="ProductId" AllowSorting="True" AllowPaging="True">

<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> 

</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="vb" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" Title="Untitled Page" %>

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

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

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

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

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

<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> 

</contenttemplate>

</asp:UpdatePanel>

</div>

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

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

<asp:DetailsView id="DetailsView1" runat="server"DataSourceID="ObjectDataSource1" DataKeyNames="ProductId" Height="50px" Width="212px" AutoGenerateRows="False" DefaultMode="Insert">

<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">

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

</DeleteParameters>

<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>

<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 separate machines.

NOTE: THIS ARTICLE IS CONVERTED FROM C# TO VB.NET USING A CONVERSION TOOL. ORIGINAL ARTICLE CAN BE FOUND ON C# Corner (http://www.c-sharpcorner.com/).

ASP.Net 2.0 AJAX Extension 1.0 Application

Tags: AJAX Extension1.0, Application in ASP.Net 2.0, AJAX, ASP.NET
Automate Send & Receive in Outlook

Tags: automate, outlook, receive, send

post comment

Hi if you are tlking about displaying Excel in data grid here is small sample below.

using System.IO;
using System.Data.OleDb;

string filepath = File1.PostedFile.FileName;
char [] delimeter = {'\\'};
string [] split = (filepath).Split(delimeter);
string file = split[split.Length-1];
string path = Server.MapPath("/excelreading/");

if (File.Exists(path+file))
{ //File exist in the server we might use it}
else
{
//File does not exist we have to upload it
File1.PostedFile.SaveAs(path+file);
}
DataGrid1.DataSource = getDataFromXLS(path+file);
DataGrid1.DataBind();

private DataTable getDataFromXLS(string strFilePath)
{
string strConnectionString =string.Empty;
strConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+strFilePath+"; Jet OLEDB:Engine Type=5;Extended Properties=Excel 8.0;";
OleDbConnection cnCSV =new OleDbConnection (strConnectionString);
cnCSV.Open();
OleDbCommand cmdSelect = new OleDbCommand (@"SELECT * FROM [Sheet1$]", cnCSV);
OleDbDataAdapter daCSV = new OleDbDataAdapter();
daCSV.SelectCommand = cmdSelect;
DataTable dtCSV = new DataTable ();
daCSV.Fill(dtCSV);
cnCSV.Close();
daCSV = null;
return dtCSV;
}

Regards,
>>Munnamax