C#

Tip Of The Day - Remove GridView Row Highlighting on Edit Mode

Vincent Maverick Durano — Tue, 26 Apr 2011 06:17:20 GMT

Typically we will attach the mouseover and mouseout client-side events on the gridview rows to highlight rows on mouseover, but there are cases that we don't want to make the row highlighted when we are on edit mode. To do this we can check the GridView EditIndex to determine if the row is on edit mode and then do the validation there. Here's a sample code block below of what I am talking about:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
            if (e.Row.RowType == DataControlRowType.DataRow) {
                string onmouseoverStyle = "this.style.backgroundColor='blue';this.style.color ='white';";
                string onmouseoutStyle = "this.style.backgroundColor='white';this.style.color ='black';";

                if (GridView1.EditIndex != -1) {
                    e.Row.Attributes.Remove("onmouseover");
                }
                else {
                    e.Row.Attributes.Add("onmouseover", onmouseoverStyle);
                    e.Row.Attributes.Add("onmouseout", onmouseoutStyle);
                }
            }
}

As you can see the code above is very straight forward. What it does is it checks if the gridview is on edit mode and when it's on edit mode we removed the onmouseover attribute and when it's not we attach the onmouseover attribute again and apply the desired styles. That's simple!

I hope someone find this post useful!

Technorati Tags: ASP.NET,GridView,TipsTricks

Entity Framework - Editing, Updating and Deleting Data in the Form

Vincent Maverick Durano — Mon, 04 Apr 2011 12:00:25 GMT

Previously we've talked about how to fetch the data from the database and populate the form with EF. In this example I'm going to demonstrate how to do Edit,Update and Delete operations in the form with Entity Framework. And oh since this is a continuation of my previous example I would suggest you to refer that first before you go any further.

STEP 1: Setting up the UI

Since this is a continuation of my previous example then I'm jus going to use the same layout and extend it a bit by adding some buttons on the form and a label control for displaying some message. Aside from that I have also moved the form fields inside a Panel control for validation purposes and removed the ReadOnly attribute for each TextBox. Here's the updated mark-up below:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:DropDownList ID="ddlUser" runat="server" AppendDataBoundItems="true" 
        AutoPostBack="true" onselectedindexchanged="ddlUser_SelectedIndexChanged">
        <asp:ListItem Value="0">--Select--</asp:ListItem>
    </asp:DropDownList>
    <asp:Panel ID="pnlUserDetail" runat="server" Enabled="false">
        <br />First Name:
        <br /><asp:TextBox ID="tbFirstName" runat="server" />
        <br />Last Name: 
        <br /><asp:TextBox ID="tbLastName" runat="server" />
        <br />Contact Number: 
        <br /><asp:TextBox ID="tbContactNumber" runat="server" />
        <br />
        <br />
    </asp:Panel>
    <asp:Label ID="lblMessage" runat="server" ForeColor="Green" />
    <br />
    <asp:Button ID="btnEdit" runat="server" Text="Edit" onclick="btnEdit_Click" />
    <asp:Button ID="btnUpdate" runat="server" Text="Update" Visible="false" onclick="btnUpdate_Click" />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" Visible="false" onclick="btnCancel_Click" />
    <asp:Button ID="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click" />
</asp:Content>

STEP 2: Editing and Updating the Form

Add the following method below in the UserManager class:

       public void UpdateUser(UserDetail userDetail) {
            var user = (from o in dre.SysUsers
                        where o.SysUserID == userDetail.SysUserID
                        select o).First();
            user.FirstName = userDetail.FirstName;
            user.LastName = userDetail.LastName;
            user.ContactNumber = userDetail.ContactNumber;

            dre.SaveChanges();
        }

The UpdateUser() is a method that handles the updating of data. This method take the UserDetail as the parameter. If you can still remember in my previous example particularly in STEP 2, the UserDatail is a class that holds some properties such as the SysUserID, FirstName, LastName and ContactNumber.

The first line within the method is we queried the SysUser object based on the userID using LINQ syntax and assigned the result into a variable user. The FirstOrDefault function is an eager function which returns the first element of a sequence that satisfies a specified condition. Once the LINQ FirstOrDefault function is invoked then EF will autmatically issue a parameterize SQL query to the database in which the SQL Server can understand and then bring back the result to the Entity Model.

After querying the data we then assign a new value to each field and then call SaveChanges() method to update the database with the changes.

Now let's go to the code behind part of the webform and perform the update by calling the method UpdateUser() from the UserManager class. Here are the code blocks below:

       private void ToggleButton(bool isEdit){
            if (isEdit) {
                btnEdit.Visible = false;
                btnDelete.Visible = false;
                btnUpdate.Visible = true;
                btnCancel.Visible = true;
            }
            else {
                btnEdit.Visible = true;
                btnDelete.Visible = true;
                btnUpdate.Visible = false;
                btnCancel.Visible = false;
            }

            pnlUserDetail.Enabled = isEdit;
        }

        private void UpdateUserDetail(UserDetail userDetail) {
            UserManager userMgr = new UserManager();
            userMgr.UpdateUser(userDetail);
        }

        protected void btnEdit_Click(object sender, EventArgs e) {
            if (ddlUser.SelectedItem.Value != "0") {
                ToggleButton(true);
                lblMessage.Text = string.Empty;
            }
            else {
                lblMessage.Text = "Please select name from the list first.";
                lblMessage.ForeColor = System.Drawing.Color.Red;
            }
        }

        protected void btnUpdate_Click(object sender, EventArgs e) {

            UserDetail userDetail = new UserDetail();
            userDetail.SysUserID = Convert.ToInt32(ddlUser.SelectedItem.Value);
            userDetail.FirstName = tbFirstName.Text.TrimEnd();
            userDetail.LastName = tbLastName.Text.TrimEnd();
            userDetail.ContactNumber = tbContactNumber.Text.TrimEnd();

            UpdateUserDetail(userDetail);
            lblMessage.Text = "Update Successful!";
            ToggleButton(false);
        }

        protected void btnCancel_Click(object sender, EventArgs e) {
            ToggleButton(false);
        }

The ToggleButton() method is a method that returns a boolean type which is responsible for toggling the visibility of each buttons in the form during Edit,Update,cancel and Delete mode.

The UpdateUserDetail() is a method that takes UserDetail as the parameter. This method is the one who calls the UpdateUser() method from the UserManager class.

At btnUpdate_Click event we create an instance of the UserDetail class and assign the values from the form to the corresponsing fields. After that we call the method UpdateUserDetail() and pass the UserDetail object as the parameter.

Here's the output below when running it on the browser:

On initial load:

After selecting an item from the DropDownList

On Edit Mode (after clicking the edit button)

After Update

STEP 3: Deleting data from the Form

Now lets implement the deletion part of the program. In the UserManager class add this method below:

       public void DeleteUser(int userID) {
            var user = (from o in dre.SysUsers
                        where o.SysUserID == userID
                        select o).First();

            dre.DeleteObject(user);
            dre.SaveChanges();
        }

Just like the UpdateUser() method. We query the SysUser object based on the SysUserID and then assign the result in the variable user. After that we call the DeleteObject() to perform delete and then call the SaveChanges() method to reflect the changes to the database.

Here's the code in the code behind for the deletion:

        protected void btnDelete_Click(object sender, EventArgs e) {
            if (ddlUser.SelectedItem.Value != "0") {

                //Perform the Delete
                UserManager userMgr = new UserManager();
                userMgr.DeleteUser(Convert.ToInt32(ddlUser.SelectedItem.Value));

                //Re-bind the DropDownList
                ddlUser.Items.Clear();
                BindUserNames();

                //Clear the form fields
                tbFirstName.Text = string.Empty;
                tbLastName.Text = string.Empty;
                tbContactNumber.Text = string.Empty;

                lblMessage.Text = "Delete Successful!";

            }
            else {
                lblMessage.Text = "Please select name from the list first.";
                lblMessage.ForeColor = System.Drawing.Color.Red;
            }
        }

Since we don’t want users to delete the information right away, we need to prompt them a confirmation message if they wish to continue the deletion or not. To do this we could simply hook up the javascript confirm function in the delete button. Take a look at the highlighted code below:

<asp:Button ID="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click" OnClientClick="return confirm('The selected user information will be deleted. Do you wish to continue?');return false;" />

Here's the output below when running the page and perform the delete:

On Deletion:

After Deletion:

That's it! I hope someone find this post useful!

Technorati Tags: Entity Framework

Entity Framework - Fetching and Populating the Data in the Form

Vincent Maverick Durano — Mon, 04 Apr 2011 11:41:14 GMT

In Part 1 we've talked about how to insert data to the database with Entity Framework. In this part I'm going to demonstrate how to fetch the data from the database and populate the form fields with Entity Framework.

STEP 1: Setting up the Form

To get started let's go ahead and fire-up visual studio and add a new WebForm. For the simplicity of this demo I just set up the form like this:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:DropDownList ID="ddlUser" runat="server" AppendDataBoundItems="true">
        <asp:ListItem Value="0">--Select--</asp:ListItem>
    </asp:DropDownList>
    <br />First Name:
    <br /><asp:TextBox ID="tbFirstName" runat="server" />
    <br />Last Name: 
    <br /><asp:TextBox ID="tbLastName" runat="server" />
    <br />Contact Number: 
    <br /><asp:TextBox ID="tbContactNumber" runat="server" />
</asp:Content>

As you can see there's nothing fancy in the mark-up above. What we want to do here is we are going to populate the DropDownList "ddlUser" with the list of names from the database and then populate the remaining textbox with the details based on the selected name from the dropdownlist. And since we only want to display the information in the page so I set the ReadOnly attribute in the TextBox to true.

STEP 2: Creating the View Model

If you remember in Part 1 particularly in STEP 4, we had an Object Manager Class for each table which is responsible for handling any operations in the database and since we are going to fetch the list of names from the database then we will add a method in UserManager class.

As a recap, Entity Framework will generate the business objects and manage Data Access within the application. As a result, the class SysUser is automatically created by EF and it features all the fields in the database table as properties of the class.

I don't want to use this class for listing all names of the users. It would be wasteful as EF will bring back all information in the table inclusing the LastName, ContactNumber, SysUserLogIn and Password. All we need for populating the DropDownList is the SysUserID and FirstName. So I decided to create a separate class that just holds these properties:

namespace WebAppDemo.Model.ViewModel {
    public class UserName {
        public int SysUserID { get; set; }
        public string FirstName { get; set; }
    }
}

Also I created a separate class for listing the user detail information and create the necessary fields that I need to use like below:

namespace WebAppDemo.Model.ViewModel {
    public class UserDetail {
        public int SysUserID { get; set; }
        public string FirstName { get; set; }
        public string Lastname { get; set; }
        public string ContactNumber { get; set; }
    }
}

Both those classes above are stored under Model -> ViewModel folder within the application, as you can probably guess from the namespaces they have ;).

Now since we already have the fields we need for populating the DropDownList and the form then we can start adding new methods for fecthing the list of names and user details in the UserManager class. Here's the code block below:

using System.Collections.Generic;
using System.Linq;
using WebAppDemo.Model.DB;
using WebAppDemo.Model.ViewModel;

namespace WebAppDemo.Model {
    public class UserManager {

        private DeveloperReportEntities dre = new DeveloperReportEntities();

        public IEnumerable<UserName> GetUserFirstName() {
            var user = from o in dre.SysUsers
                       select new UserName {
                           SysUserID = o.SysUserID,
                           FirstName = o.FirstName
                       };
            return user.ToList();
        }

        public IEnumerable<UserDetail> GetUserDetail(int userID) {
            var user = from o in dre.SysUsers
               where o.SysUserID == userID
                       select new UserDetail {
                           SysUserID = o.SysUserID,
                           FirstName = o.FirstName,
                           LastName = o.LastName,
                           ContactNumber = o.ContactNumber
                       };
            return user.ToList();
        }

    }
}

The code above is the LINQ syntax for querying data. As you can see we query the SysUser object based on the parameter we passed on the GetUserFirstName() method. Once we invoke the LINQ ToList() function, this LINQ query will issue a parameterize SQL query to the database in which the SQL Server can understand and then bring back the results to the Entity Model.

The GetUserFirstName is a method that gets all the User FirstName along with the SysUserID. This method returns an IEnumrable of UserName class. The GetUserDetail() is a method that gets the user detail information based on the ID passed on to the query. This method returns a List of UserDetail class.

One of the cool things about EF is we don’t need to worry about how the query is being constructed because EF will take care of that for you including mapping of the data types from your table columns, mapping relationships between tables, etcetera and etcetera. Always keep in mind that EF is an ORM (Object Relational Mapper) and so we don’t need to deal directly with databases, tables and columns but instead we deal with the objects that is in the Entity and query the data against it using LINQ syntax.

STEP 3: Populating the DropDownList

Now lets proceed to the code behind file of the WebForm and populate the DropDownList. Here's the code block for binding the dropdownlist control in the webform. Typically we do this at Page_Load event within Not IsPostBack block like below:

using System;
using WebAppDemo.Model;

namespace WebAppDemo {
    public partial class WebForm2 : System.Web.UI.Page {

        private void BindUserNames() {
            UserManager userMgr = new UserManager();
            ddlUser.DataSource = userMgr.GetUserFirstName();
            ddlUser.DataTextField = "FirstName";
            ddlUser.DataValueField = "SysUserID";
            ddlUser.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack)
                BindUserNames();
        }
    }
}

running the code above will display something like this in the browser:

STEP 4: Populating the Form with the User Details

Now we already have the list of first names in the DropDownList, the next step is to populate the TextBox in the form with the other user information based on the selected item from the DropDownList. Here's the code block below:

       private void PopulateFormFieds(int userID) {
            UserManager userMgr = new UserManager();
            var result = userMgr.GetUserDetail(userID);
            if (result.Count > 0) {
                var user = result.First();
                tbFirstName.Text = user.FirstName;
                tbLastName.Text = user.LastName;
                tbContactNumber.Text = user.ContactNumber;
            }
            else {
                //NO RECORDS FOUND.
                tbFirstName.Text = string.Empty;
                tbLastName.Text = string.Empty;
                tbContactNumber.Text = string.Empty;
            }
            
        }


        protected void ddlUser_SelectedIndexChanged(object sender, EventArgs e) {
            PopulateFormFieds(Convert.ToInt32(ddlUser.SelectedItem.Value));
        }

As you can see the code above is very straight forward. The PopulateFormFieds() is aboviously a method for populating the TextBox with the user detail information. The first line in the method creates an instance of the UserManager class and call the method GetUserDetail and pass along the userID as the parameter. We then store the results in the result variable and check if the result count is greater than 0. If it is greater than 0 then that means there are data returned based on the query we issued and fill the TextBox with the corresponding field data.

Here's the output below after selecting an item from the DropDownList:

That's it! I hope someone find this post useful.

Technorati Tags: Entity Framework

Entity Framework - Inserting Data to Database

Vincent Maverick Durano — Mon, 04 Apr 2011 03:59:48 GMT

Few months ago I wrote a series of articles regarding how to Insert, Update, Fetch and Delete data in the form using LINQ to SQL. You can view the series of articles below:

In this article I'm going to demonstrate the basics on how to work with MS Entity Framework. Basically in this part I'm going to show you how to add data from the WebForm to the database using the MS Entity Framework.

As an overview, ADO.NET Entity Framework (EF) is an object-relational mapping (ORM) framework for the .NET Framework.EF enables developers to create data access applications by programming against a conceptual application model instead of programming directly against a relational storage schema. The goal is to decrease the amount of code and maintenance required for data-oriented applications. Entity Framework applications provide the following benefits:

    * Applications can work in terms of a more application-centric conceptual model, including types with inheritance, complex members, and relationships.
    * Applications are freed from hard-coded dependencies on a particular data engine or storage schema.
    * Mappings between the conceptual model and the storage-specific schema can change without changing the application code.
    * Developers can work with a consistent application object model that can be mapped to various storage schemas, possibly implemented in different database management systems.
    * Multiple conceptual models can be mapped to a single storage schema.
    * Language-integrated query (LINQ) support provides compile-time syntax validation for queries against a conceptual model.

You can refer the link below for more details about Entity Framework: http://msdn.microsoft.com/en-us/library/aa697427%28v=vs.80%29.aspx

STEP 1: Setting up the project

For this demo, I'm going to use Visual Studio 2010. Now lets go ahead and fire up Visual Studio and then select File -> New Project -> Visual C# -> Web - ASP.NET Web Application and then name the application the way you want and then click OK to generate the default files.

STEP 2: Adding the EDMX file

Now add a new folder under the root of the application and name it as "Model" and within that folder add another folder and name it as "DB". The application structure would look something like below:

After that right click on the "DB" folder and select Add -> New Item -> Data -> ADO.NET Entity Data Model. See below screenshot for more clearer view:

Noticed that I named the entity as "SampleModel" just for the purpose of this demo. You may want to name it to a more appropriate name based on your requirements but for this example let's just use "SampleModel". Now click Add to continue and on the next step select "Generate from database" and click Next. On the next step you can connect or browse to the database that you want to use in the application and test the connection string by clicking on the "Test Connection" button and if it succeeds then you can continue by clicking OK and then Next.

Note that in this example I created a simple database called "DeveloperReport.mdf" and added it into the application's App_Data folder and use it as our database for this demo. See the screen shot below:

On the next step we can add the table(s), views or stored procedures that we want to use in the application by selecting the checkbox. See below screenshot:

Noticed that I've only selected the "SysUser" table. This is because we are going to use this table for doing insert and we don't need anything else. Now click on Finish button to generate the entity model for you. See the screenshot below:

What happens there is that EF will automatically generates the Business object for you within the Entity Data Model(EDM) that we have just created and let you query against it.The EDM is the main gateway by which you retrieve objects from the database and resubmit changes.

STEP 3: Setting up the form

Since we already have our model in place then let's go ahead a set up our GUI. Let's add a new webform by right clicking on the project and select Add -> New Item -> Web -> Webform using Master Page and then click Add. For the simplicity of this demo I just set up the GUI like below:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebAppDemo.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h1>Add New</h1>
    <table>
        <tr>
            <td>First Name</td>
            <td><asp:TextBox ID="tbFirstName" runat="server" /></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><asp:TextBox ID="tbLastName" runat="server" /></td>
        </tr>
        <tr>
            <td>Contact Number</td>
            <td><asp:TextBox ID="tbContactNumber" runat="server" /></td>
        </tr>
        <tr>
            <td>Login ID</td>
            <td><asp:TextBox ID="tbLoginID" runat="server" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><asp:TextBox ID="tbPassword" runat="server" TextMode="Password" /></td>
        </tr>
    </table>
    <br />
    <asp:Label ID="lblMessage" runat="server" />
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Add" />
</asp:Content>

STEP 4: Creating the Object Manager class

The next step that we are going to do is create an object manager class that would handle the (CRUD operations) create,update,fetch and delete of a certain table. The purpose of this class is to separate the actual data opertions from our code behind and to have a central class for handling insert,update,fetch and delete operations. But please note that in this example I'm only doing the insert part in which a user can add new data from the GUI to the database. I'll talk about how to do the update,fetch and delete in EF in my next article. So this time we'll just focus on the insertion part first.

Now right click on the "Model" folder and add a new class by selecting Add -> Class and since we are going to manipulate the SysUser table then we will name the class as "UserManager". Here's the code block for the "UserManager.cs" class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using WebAppDemo.Model.DB;

namespace WebAppDemo.Model {
    public class UserManager {

        private DeveloperReportEntities dre = new DeveloperReportEntities();

        public void Add(string firstName, string LastName,string contactNumber, string loginID, string password) {
            SysUser user = new SysUser();
            user.FirstName = firstName;
            user.LastName = LastName;
            user.ContactNumber = contactNumber;
            user.SysUserLoginID = loginID;
            user.SysPassword = password;

            dre.AddToSysUsers(user);
            dre.SaveChanges();
        }
    }
}

STEP 5: Adding new data to database

Now switch to the WebForms code behind part and create a method that would call the object manager class to do insertion. Here's the code block below:

using System;
using WebAppDemo.Model;

namespace WebAppDemo {
    public partial class WebForm1 : System.Web.UI.Page {

        private void InsertUserInfo(string firstName, string LastName, string contactNumber, string loginID, string password) {
            UserManager userMgr = new UserManager();
            userMgr.Add(firstName, LastName, contactNumber, loginID, password);
        }

        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void btnAdd_Click(object sender, EventArgs e) {
            //You may validate the data first here
            //But assuming the data that was supplied are correct and valid
            InsertUserInfo(tbFirstName.Text,
                           tbLastName.Text,
                           tbContactNumber.Text,
                           tbLoginID.Text,
                           tbPassword.Text);

            lblMessage.Text = "Data Inserted!";

        }
    }
}

Note that I have never included some basic validations on the form such us data inputs, data formats and loginID and password

validation because I want to keep this demo as simple as possible. In real projects you should ensure that all data inputs are validated before sumbitting it to the database.

Here's the sample screen shot when viewing the page in the browser:

And here's the screenshot of the SysUser table after inserting the data from the WebForm:

That's it! I hope someone find this post useful!

Technorati Tags: Entity Framework,ASP.NET,C#

Displaying All Images from the Folder in the Page

Vincent Maverick Durano — Thu, 20 Jan 2011 15:13:59 GMT

In my previous post I have demonstrated how to upload an image to a folder and display the image after uploading here. In this post I will extend a little bit of what I have demonstrated on my previous post. Basically I'm going to demonstrate how to display all the uploaded images from the folder in the web page on click of the Button.

Here's the html mark up:

ASPX:

   1:  <asp:FileUpload ID="FileUpload1" runat="server" />

   2:  <asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click" />

   3:  <br />

   4:  <asp:Image ID="Image1" runat="server" />

   5:  <br />

   6:  <asp:Button ID="Button2" runat="server" Text="Load All Uploaded Images"

   7:          onclick="Button2_Click" />

   8:  <br />

   9:  <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

And here's the code snippet below:

CODE BEHIND:

   1:           private void LoadUploadedImages() {

   2:              int index =1;

   3:              DirectoryInfo di = new DirectoryInfo(Server.MapPath("~/ImageStorage"));

   4:              foreach (FileInfo fi in di.GetFiles()) {

   5:                  Image img = new Image();

   6:                  img.ID = "img" + index.ToString();

   7:                  img.Width = Unit.Pixel(100);

   8:                  img.Height = Unit.Pixel(100);

   9:                  img.ImageUrl = "~/ImageStorage/" + fi.Name;

  10:                  PlaceHolder1.Controls.Add(img);

11:

  12:                  Literal lit = new Literal();

  13:                  lit.Text = "<br/>";

  14:                  PlaceHolder1.Controls.Add(lit);

  15:                  index++;

  16:              }

  17:          }

18:

  19:          protected void Button2_Click(object sender, EventArgs e) {

  20:              LoadUploadedImages();

  21:          }

And here's the output below:

After Uploading:

After clicking the "Load All Uploaded Images" button:

That's simple! I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,Image Uploading

Uploading Image to a Folder and Display the Image after Upload

Vincent Maverick Durano — Thu, 20 Jan 2011 14:29:07 GMT

I wrote a series of blog posts awhile back before that demonstrates the following:

In this post I'm going to demonstrate how to upload image to a specified folder within the root of the web application and display the image right away in the Image control after uploading. To get started lets go ahead and fire up Visual Studio and create a new Website/Web Application project. After that create a folder under the root application for storing the uploaded images. The folder structure would look something like this below:

Solution
-Application Name
-AppCode
-AppData
-ImageStorage - //we will save the images in this folder
-Default.aspx
-web.config

Now lets design our WebForm. For the simplicity of this demo, I just set up the form like below:

ASPX:

   1:      <asp:FileUpload ID="FileUpload1" runat="server" />

   2:      <asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click"/>

   3:      <br />

   4:      <asp:Image ID="Image1" runat="server" />

And here's the code for uploading the image to a folder.

CODE BEHIND:

   1:  protected void Button1_Click(object sender, EventArgs e) {

   2:              StartUpLoad();

   3:          }

4:

   5:          private void StartUpLoad() {

   6:              //get the file name of the posted image

   7:              string imgName = FileUpload1.FileName;

   8:              //sets the image path

   9:              string imgPath = "ImageStorage/" + imgName;

  10:              //get the size in bytes that

11:

  12:              int imgSize = FileUpload1.PostedFile.ContentLength;

13:

  14:              //validates the posted file before saving

  15:              if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != "") {

  16:                  // 10240 KB means 10MB, You can change the value based on your requirement

  17:                  if (FileUpload1.PostedFile.ContentLength > 10240) {

  18:                      Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Alert", "alert('File is too big.')", true);

  19:                  }

  20:                  else {

  21:                      //then save it to the Folder

  22:                      FileUpload1.SaveAs(Server.MapPath(imgPath));

  23:                      Image1.ImageUrl = "~/" + imgPath;

  24:                      Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Alert", "alert('Image saved!')", true);

  25:                  }

26:

  27:              }

  28:          }

As you can see the code above is very straight forward and self explanatory. Here are the sample screen shots of the output:

On initial load:

Browsing an image:

After uploading:

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,Image Uploading

Highlight Row in GridView with Colored Columns

Vincent Maverick Durano — Thu, 13 Jan 2011 10:23:47 GMT

I wrote a blog post a while back before here that demonstrate how to highlight a GridView row on mouseover and as you can see its very easy to highlight rows in GridView. One of my colleague uses the same technique for implemeting gridview row highlighting but the problem is that if a Column has background color on it that cell will not be highlighted anymore. To make it more clear then let's build up a sample application.

ASPX:

   1:      <asp:GridView runat="server" id="GridView1" onrowcreated="GridView1_RowCreated"

   2:          onrowdatabound="GridView1_RowDataBound">

   3:      </asp:GridView>

CODE BEHIND:

   1:  private DataTable FillData() {

2:

   3:              DataTable dt = new DataTable();

   4:              DataRow dr = null;

5:

   6:              //Create DataTable columns

   7:              dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));

   8:              dt.Columns.Add(new DataColumn("Col1", typeof(string)));

   9:              dt.Columns.Add(new DataColumn("Col2", typeof(string)));

  10:              dt.Columns.Add(new DataColumn("Col3", typeof(string)));

11:

  12:              //Create Row for each columns

  13:              dr = dt.NewRow();

  14:              dr["RowNumber"] = 1;

  15:              dr["Col1"] = "A";

  16:              dr["Col2"] = "B";

  17:              dr["Col3"] = "C";

  18:              dt.Rows.Add(dr);

19:

  20:              dr = dt.NewRow();

  21:              dr["RowNumber"] = 2;

  22:              dr["Col1"] = "AA";

  23:              dr["Col2"] = "BB";

  24:              dr["Col3"] = "CC";

  25:              dt.Rows.Add(dr);

26:

  27:              dr = dt.NewRow();

  28:              dr["RowNumber"] = 3;

  29:              dr["Col1"] = "A";

  30:              dr["Col2"] = "B";

  31:              dr["Col3"] = "CC";

  32:              dt.Rows.Add(dr);

33:

  34:              dr = dt.NewRow();

  35:              dr["RowNumber"] = 4;

  36:              dr["Col1"] = "A";

  37:              dr["Col2"] = "B";

  38:              dr["Col3"] = "CC";

  39:              dt.Rows.Add(dr);

40:

  41:              dr = dt.NewRow();

  42:              dr["RowNumber"] = 5;

  43:              dr["Col1"] = "A";

  44:              dr["Col2"] = "B";

  45:              dr["Col3"] = "CC";

  46:              dt.Rows.Add(dr);

47:

  48:              return dt;

  49:  }

50:

  51:  protected void Page_Load(object sender, EventArgs e) {

  52:              if (!IsPostBack) {

  53:                  GridView1.DataSource = FillData();

  54:                  GridView1.DataBind();

  55:              }

  56:  }

As you can see there's nothing fancy in the code above. It just contain a method that fills a DataTable with a dummy data on it. Now here's the code for row highlighting:

   1:  protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {

   2:              //Set Background Color for Columns 1 and 3

   3:              e.Row.Cells[1].BackColor = System.Drawing.Color.Beige;

   4:              e.Row.Cells[3].BackColor = System.Drawing.Color.Red;

5:

   6:              //Attach onmouseover and onmouseout for row highlighting

   7:              e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Blue'");

   8:              e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");

   9:  }

Running the code above will show something like this in the browser:

On initial load:

On mouseover of GridView row:

Noticed that Col1 and Col3 are not highlighted. Why? the reason is that Col1 and Col3 cells has background color set on it and we only highlight the rows (TR) and not the columns (TD) that's why on mouseover only the rows will be highlighted. To fix the issue we will create a javascript method that would remove the background color of the columns when highlighting a row and on mouseout set back the original color that is set on Col1 and Col3. Here are the codes below:

JavaScript

   1:  <script type="text/javascript">

   2:      function HighLightRow(rowIndex, colIndex,colIndex2, flag) {

   3:          var gv = document.getElementById("<%= GridView1.ClientID %>");

   4:          var selRow = gv.rows[rowIndex];

   5:          if (rowIndex > 0) {

   6:              if (flag == "sel") {

   7:                  gv.rows[rowIndex].style.backgroundColor = 'Blue';

   8:                  gv.rows[rowIndex].style.color = "White";

   9:                  gv.rows[rowIndex].cells[colIndex].style.backgroundColor = '';

  10:                  gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = '';

  11:              }

  12:              else {

  13:                  gv.rows[rowIndex].style.backgroundColor = '';

  14:                  gv.rows[rowIndex].style.color = "Black";

  15:                  gv.rows[rowIndex].cells[colIndex].style.backgroundColor = 'Beige';

  16:                  gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = 'Red';

  17:              }

  18:          }

  19:     }

  20:  </script>

The HighLightRow method is a javascript function that accepts four (4) parameters which are the rowIndex,colIndex,colIndex2 and the flag. The rowIndex is the current row index of the selected row in GridView. The colIndex is the index of Col1 and colIndex2 is the index of col3. We are passing these index because these columns has background color on it and we need to toggle its backgroundcolor when highlighting the row in GridView. Finally the flag is something that would determine if its selected or not. Now here's the code for calling the JavaScript function above.

   1:   protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) {

2:

   3:              //Set Background Color for Columns 1 and 3

   4:              e.Row.Cells[1].BackColor = System.Drawing.Color.Beige;

   5:              e.Row.Cells[3].BackColor = System.Drawing.Color.Red;

6:

   7:              //Attach onmouseover and onmouseout for row highlighting

   8:              //and call the HighLightRow method with the required parameters

   9:              int index = e.Row.RowIndex + 1;

  10:              e.Row.Attributes.Add("onmouseover", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'sel')");

  11:              e.Row.Attributes.Add("onmouseout", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'dsel')");

12:

  13:  }

Running the code above will display something like this:

On initial load:

On mouseover of GridView row:

That's it! I hope someone find this post useful!

Inserting and Deleting Sub Rows in GridView

Vincent Maverick Durano — Tue, 04 Jan 2011 09:52:42 GMT

A user in the forums (http://forums.asp.net) is asking how to insert sub rows in GridView and also add delete functionality for the inserted sub rows. In this post I'm going to demonstrate how to this in ASP.NET WebForms. The basic idea to achieve this is we just need to insert row data in the DataSource that is being used in GridView since the GridView rows will be generated based on the DataSource data.

To make it more clear then let's build up a sample application. To start fire up Visual Studio and create a WebSite or Web Application project and then add a new WebForm. In the WebForm ASPX page add this GridView markup below:

   1:  <asp:gridview ID="GridView1" runat="server" AutoGenerateColumns="false" onrowdatabound="GridView1_RowDataBound">

   2:          <Columns>

   3:          <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

   4:          <asp:TemplateField HeaderText="Header 1">

   5:              <ItemTemplate>

   6:                  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

   7:              </ItemTemplate>

   8:          </asp:TemplateField>

   9:          <asp:TemplateField HeaderText="Header 2">

  10:              <ItemTemplate>

  11:                  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

  12:              </ItemTemplate>

  13:          </asp:TemplateField>

  14:          <asp:TemplateField HeaderText="Header 3">

  15:              <ItemTemplate>

  16:                   <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

  17:              </ItemTemplate>

  18:          </asp:TemplateField>

  19:          <asp:TemplateField HeaderText="Action">

  20:              <ItemTemplate>

  21:                  <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click" Text="Insert"></asp:LinkButton>

  22:              </ItemTemplate>

  23:          </asp:TemplateField>

  24:          </Columns>

  25:  </asp:gridview>

Then at the code behind source of ASPX page you can add this codes below:

   1:  private DataTable FillData() {

2:

   3:              DataTable dt = new DataTable();

   4:              DataRow dr = null;

5:

   6:              //Create DataTable columns

   7:              dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));

8:

   9:              //Create Row for each columns

  10:              dr = dt.NewRow();

  11:              dr["RowNumber"] = 1;

  12:              dt.Rows.Add(dr);

13:

  14:              dr = dt.NewRow();

  15:              dr["RowNumber"] = 2;

  16:              dt.Rows.Add(dr);

17:

  18:              dr = dt.NewRow();

  19:              dr["RowNumber"] = 3;

  20:              dt.Rows.Add(dr);

21:

  22:              dr = dt.NewRow();

  23:              dr["RowNumber"] = 4;

  24:              dt.Rows.Add(dr);

25:

  26:              dr = dt.NewRow();

  27:              dr["RowNumber"] = 5;

  28:              dt.Rows.Add(dr);

29:

  30:              //Store the DataTable in ViewState for future reference

  31:              ViewState["CurrentTable"] = dt;

32:

  33:              return dt;

34:

  35:          }

36:

  37:          private void BindGridView(DataTable dtSource) {

  38:              GridView1.DataSource = dtSource;

  39:              GridView1.DataBind();

  40:          }

41:

  42:          private DataRow InsertRow(DataTable dtSource, string value) {

  43:              DataRow dr = dtSource.NewRow();

  44:              dr["RowNumber"] = value;

  45:              return dr;

  46:          }

  47:          //private DataRow DeleteRow(DataTable dtSource,

48:

  49:          protected void Page_Load(object sender, EventArgs e) {

  50:              if (!IsPostBack) {

  51:                  BindGridView(FillData());

  52:              }

  53:          }

54:

  55:          protected void LinkButton1_Click(object sender, EventArgs e) {

  56:              LinkButton lb = (LinkButton)sender;

  57:              GridViewRow row = (GridViewRow)lb.NamingContainer;

  58:              DataTable dtCurrentData = (DataTable)ViewState["CurrentTable"];

  59:              if (lb.Text == "Insert") {

  60:                  //Insert new row below the selected row

  61:                  dtCurrentData.Rows.InsertAt(InsertRow(dtCurrentData, row.Cells[0].Text + "-sub"), row.RowIndex + 1);

62:

  63:              }

  64:              else {

  65:                  //Delete selected sub row

  66:                  dtCurrentData.Rows.RemoveAt(row.RowIndex);

  67:              }

68:

  69:              BindGridView(dtCurrentData);

  70:              ViewState["CurrentTable"] = dtCurrentData;

  71:          }

72:

  73:          protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {

  74:              if (e.Row.RowType == DataControlRowType.DataRow) {

  75:                  if (e.Row.Cells[0].Text.Contains("-sub")) {

  76:                      ((LinkButton)e.Row.FindControl("LinkButton1")).Text = "Delete";

  77:                  }

  78:              }

  79:          }

As you can see the code above is pretty straight forward and self explanatory but just to give you a short explanation the code above is composed of three (3) private methods which are the FillData(), BindGridView and InsertRow(). The FillData() method is a method that returns a DataTable and basically creates a dummy data in the DataTable to be used as the GridView DataSource. You can replace the code in that method if you want to use actual data from database but for the purpose of this example I just fill the DataTable with a dummy data on it. The BindGridVew is a method that handles the actual binding of GridVew. The InsertRow() is a method that returns a DataRow. This method handles the insertion of the sub row.

Now in the LinkButton OnClick event, we casted the sender to a LinkButton to determine the specific object that fires up the event and get the row values. We then reference the Data from ViewState to get the current data that is being used in the GridView. If the LinkButton text is "Insert" then we will insert new row to the DataSource ( in this case the DataTable) based on the rowIndex if not then Delete the sub row that was added.

Here are some screen shots of the output below:

On initial load:

After inserting a sub row:

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,GridView

Uploading and Importing CSV file to SQL Server in ASP.NET WebForms

Vincent Maverick Durano — Mon, 03 Jan 2011 09:03:55 GMT

Few weeks ago I was working with a small internal project that involves importing CSV file to Sql Server database and thought I'd share the simple implementation that I did on the project.

In this post I will demonstrate how to upload and import CSV file to SQL Server database. As some may have already know, importing CSV file to SQL Server is easy and simple but difficulties arise when the CSV file contains, many columns with different data types. Basically, the provider cannot differentiate data types between the columns or the rows, blindly it will consider them as a data type based on first few rows and leave all the data which does not match the data type. To overcome this problem, I used schema.ini file to define the data type of the CSV file and allow the provider to read that and recognize the exact data types of each column.

Now what is schema.ini?

Taken from the documentation: The Schema.ini is a information file, used to define the data structure and format of each column that contains data in the CSV file. If schema.ini file exists in the directory, Microsoft.Jet.OLEDB provider automatically reads it and recognizes the data type information of each column in the CSV file. Thus, the provider intelligently avoids the misinterpretation of data types before inserting the data into the database. For more information see: http://msdn.microsoft.com/en-us/library/ms709353%28VS.85%29.aspx

Points to remember before creating schema.ini:

1. The schema information file, must always named as 'schema.ini'.
2. The schema.ini file must be kept in the same directory where the CSV file exists.
3. The schema.ini file must be created before reading the CSV file.
4. The first line of the schema.ini, must the name of the CSV file, followed by the properties of the CSV file, and then the properties of the each column in the CSV file.

Here's an example of how the schema looked like:

[Employee.csv]
ColNameHeader=False
Format=CSVDelimited
DateTimeFormat=dd-MMM-yyyy
Col1=EmployeeID Long
Col2=EmployeeFirstName Text Width 100
Col3=EmployeeLastName Text Width 50
Col4=EmployeeEmailAddress Text Width 50

To get started lets's go a head and create a simple blank database. Just for the purpose of this demo I created a database called TestDB.

After creating the database then lets go a head and fire up Visual Studio and then create a new WebApplication project.

Under the root application create a folder called UploadedCSVFiles and then place the schema.ini on that folder. The uploaded CSV files will be stored in this folder after the user imports the file.

Now add a WebForm in the project and set up the HTML mark up and add one (1) FileUpload control one(1)Button and three (3) Label controls.

After that we can now proceed with the codes for uploading and importing the CSV file to SQL Server database. Here are the full code blocks below:

   1:  using System;

   2:  using System.Data;

   3:  using System.Data.SqlClient;

   4:  using System.Data.OleDb;

   5:  using System.IO;

   6:  using System.Text;

7:

   8:  namespace WebApplication1

   9:  {

  10:      public partial class CSVToSQLImporting : System.Web.UI.Page

  11:      {

  12:          private string GetConnectionString()

  13:          {

  14:              return System.Configuration.ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;

  15:          }

  16:          private void CreateDatabaseTable(DataTable dt, string tableName)

  17:          {

18:

  19:              string sqlQuery = string.Empty;

  20:              string sqlDBType = string.Empty;

  21:              string dataType = string.Empty;

  22:              int maxLength = 0;

  23:              StringBuilder sb = new StringBuilder();

24:

  25:              sb.AppendFormat(string.Format("CREATE TABLE {0} (", tableName));

26:

  27:              for (int i = 0; i < dt.Columns.Count; i++)

  28:              {

  29:                  dataType = dt.Columns[i].DataType.ToString();

  30:                  if (dataType == "System.Int32")

  31:                  {

  32:                      sqlDBType = "INT";

  33:                  }

  34:                  else if (dataType == "System.String")

  35:                  {

  36:                      sqlDBType = "NVARCHAR";

  37:                      maxLength = dt.Columns[i].MaxLength;

  38:                  }

39:

  40:                  if (maxLength > 0)

  41:                  {

  42:                      sb.AppendFormat(string.Format(" {0} {1} ({2}), ", dt.Columns[i].ColumnName, sqlDBType, maxLength));

  43:                  }

  44:                  else

  45:                  {

  46:                      sb.AppendFormat(string.Format(" {0} {1}, ", dt.Columns[i].ColumnName, sqlDBType));

  47:                  }

  48:              }

49:

  50:              sqlQuery = sb.ToString();

  51:              sqlQuery = sqlQuery.Trim().TrimEnd(',');

  52:              sqlQuery = sqlQuery + " )";

53:

  54:              using (SqlConnection sqlConn = new SqlConnection(GetConnectionString()))

  55:              {

  56:                  sqlConn.Open();

  57:                  SqlCommand sqlCmd = new SqlCommand(sqlQuery, sqlConn);

  58:                  sqlCmd.ExecuteNonQuery();

  59:                  sqlConn.Close();

  60:              }

61:

  62:          }

  63:          private void LoadDataToDatabase(string tableName, string fileFullPath, string delimeter)

  64:          {

  65:              string sqlQuery = string.Empty;

  66:              StringBuilder sb = new StringBuilder();

67:

  68:              sb.AppendFormat(string.Format("BULK INSERT {0} ", tableName));

  69:              sb.AppendFormat(string.Format(" FROM '{0}'", fileFullPath));

  70:              sb.AppendFormat(string.Format(" WITH ( FIELDTERMINATOR = '{0}' , ROWTERMINATOR = '\n' )", delimeter));

71:

  72:              sqlQuery = sb.ToString();

73:

  74:              using (SqlConnection sqlConn = new SqlConnection(GetConnectionString()))

  75:              {

  76:                  sqlConn.Open();

  77:                  SqlCommand sqlCmd = new SqlCommand(sqlQuery, sqlConn);

  78:                  sqlCmd.ExecuteNonQuery();

  79:                  sqlConn.Close();

  80:              }

  81:          }

  82:          protected void Page_Load(object sender, EventArgs e)

  83:          {

84:

  85:          }

  86:          protected void BTNImport_Click(object sender, EventArgs e)

  87:          {

  88:              if (FileUpload1.HasFile)

  89:              {

  90:                  FileInfo fileInfo = new FileInfo(FileUpload1.PostedFile.FileName);

  91:                  if (fileInfo.Name.Contains(".csv"))

  92:                  {

93:

  94:                      string fileName = fileInfo.Name.Replace(".csv", "").ToString();

  95:                      string csvFilePath = Server.MapPath("UploadedCSVFiles") + "\\" + fileInfo.Name;

96:

  97:                      //Save the CSV file in the Server inside 'MyCSVFolder'

  98:                      FileUpload1.SaveAs(csvFilePath);

99:

 100:                      //Fetch the location of CSV file

 101:                      string filePath = Server.MapPath("UploadedCSVFiles") + "\\";

 102:                      string strSql = "SELECT * FROM [" + fileInfo.Name + "]";

 103:                      string strCSVConnString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + filePath + ";" + "Extended Properties='text;HDR=YES;'";

 104:

 105:                      // load the data from CSV to DataTable

 106:

 107:                      OleDbDataAdapter adapter = new OleDbDataAdapter(strSql, strCSVConnString);

 108:                      DataTable dtCSV = new DataTable();

 109:                      DataTable dtSchema = new DataTable();

 110:

 111:                      adapter.FillSchema(dtCSV, SchemaType.Mapped);

 112:                      adapter.Fill(dtCSV);

 113:

 114:                      if (dtCSV.Rows.Count > 0)

 115:                      {

 116:                          CreateDatabaseTable(dtCSV, fileName);

 117:                          Label2.Text = string.Format("The table ({0}) has been successfully created to the database.", fileName);

 118:

 119:                          string fileFullPath = filePath + fileInfo.Name;

 120:                          LoadDataToDatabase(fileName, fileFullPath, ",");

 121:

 122:                          Label1.Text = string.Format("({0}) records has been loaded to the table {1}.", dtCSV.Rows.Count, fileName);

 123:                      }

 124:                      else

 125:                      {

 126:                          LBLError.Text = "File is empty.";

 127:                      }

 128:                  }

 129:                  else

 130:                  {

 131:                      LBLError.Text = "Unable to recognize file.";

 132:                  }

 133:

 134:              }

 135:          }

 136:      }

 137:  }

The code above consists of three (3) private methods which are the GetConnectionString(), CreateDatabaseTable() and LoadDataToDatabase(). The GetConnectionString() is a method that returns a string. This method basically gets the connection string that is configured in the web.config file. The CreateDatabaseTable() is method that accepts two (2) parameters which are the DataTable and the filename. As the method name already suggested, this method automatically create a Table to the database based on the source DataTable and the filename of the CSV file. The LoadDataToDatabase() is a method that accepts three (3) parameters which are the tableName, fileFullPath and delimeter value. This method is where the actual saving or importing of data from CSV to SQL server happend.

The codes at BTNImport_Click event handles the uploading of CSV file to the specified location and at the same time this is where the CreateDatabaseTable() and LoadDataToDatabase() are being called. If you notice I also added some basic trappings and validations within that event.

Now to test the importing utility then let's create a simple data in a CSV format. Just for the simplicity of this demo let's create a CSV file and name it as "Employee" and add some data on it. Here's an example below:

1,VMS,Durano,email1@email.com
2,Jennifer,Cortes,email2@email.com
3,Xhaiden,Durano,email3@email.com
4,Angel,Santos,emai4@email.com
5,Kier,Binks,emai5@email.com
6,Erika,Bird,emai6@email.com
7,Vianne,Durano,emai7@email.com
8,Lilibeth,Tree,emai8@email.com
9,Bon,Bolger,email9@email.com
10,Brian,Jones,email10@email.com

Now save the newly created CSV file in some location in your hard drive.

Okay let's run the application and browse the CSV file that we have just created. Take a look at the sample screen shots below:

After browsing the CSV file.

After clicking the Import Button

Now if we look at the database that we have created earlier you'll notice that the Employee table is created with the imported data on it. See below screen shot.

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,CSV,SQL,C#,ADO.NET

FAQ: GridView Calculation with JavaScript - Displaying Quantity Total

Vincent Maverick Durano — Thu, 09 Dec 2010 09:54:10 GMT

Previously we've talked about how calculate the sub-totals and grand total in GridView here, how to format the numbers into a currency format and how to validate the quantity to just accept whole numbers using JavaScript here. One of the users in the forum (http://forums.asp.net) is asking if how to modify the script to display the quantity total in the footer. In this post I'm going to show you how to it. Basically we just need to modify the javascript CalculateTotals function and add the codes there for calculating the quantity total and display it in the footer.

Here are the code blocks below:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
      
        function CalculateTotals() {
            var gv = document.getElementById("<%= GridView1.ClientID %>");
            var tb = gv.getElementsByTagName("input");
            var lb = gv.getElementsByTagName("span");

            var sub = 0;
            var total = 0;
            var indexQ = 1;
            var indexP = 0;
            var price = 0;
            var qty = 0;
            var totalQty = 0;

            for (var i = 0; i < tb.length; i++) {
                if (tb[i].type == "text") {
                    ValidateNumber(tb[i]);

                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
                    sub = parseFloat(price) * parseFloat(tb[i].value);
                    if (isNaN(sub)) {
                        lb[i + indexQ].innerHTML = "0.00";
                        sub = 0;
                    }
                    else {
                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ;
                    }
                   
                    indexQ++;
                    indexP = indexP + 2;

                    if (isNaN(tb[i].value) || tb[i].value == "") {
                        qty = 0;
                    }
                    else {
                        qty = tb[i].value;
                    }
 
                    totalQty += parseInt(qty);
                    total += parseFloat(sub);
                }
            }

            lb[lb.length - 2].innerHTML = totalQty;
            lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", ".");
        }

        function ValidateNumber(o) {
            if (o.value.length > 0) {
                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers
            }
        }
        function isThousands(position) {
            if (Math.floor(position / 3) * 3 == position) return true;
            return false;
        };

        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
            theNumber = "" + Math.floor(theNumber);
            var theOutput = theCurrency;
            for (x = 0; x < theNumber.length; x++) {
                theOutput += theNumber.substring(x, x + 1);
                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
                    theOutput += theThousands;
                };
            };
            theOutput += theDecimal + theDecimalDigits;
            return theOutput;
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:gridview ID="GridView1"  runat="server"  ShowFooter="true" AutoGenerateColumns="false">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
        <asp:BoundField DataField="Description" HeaderText="Item Description" />
        <asp:TemplateField HeaderText="Item Price">
            <ItemTemplate>
                <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <b>Total Qty:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLQtyTotal" runat="server" Font-Bold="true" ForeColor="Blue" Text="0" ></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>Total Amount:</b>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Sub-Total">
            <ItemTemplate>
                <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:gridview>
    </form>
</body>
</html>

Here's the output below when you run it on the page:

I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,JavaScript,GridView