در این مقاله می خواهیم نحوه انجام محاسبات درGridView با استفاده از جاوا اسکریپت شرح دهیم:

توسعه دهنده های زیادی در روش اجرای یک محاسبه ساده در GridView دیده می شود.می خواهیم برای انجام محاسبات جمع که مقدار را در کنترل Textbox تایپ کنیم و نتیجه را در قسمت انتهای کنترل GridView نمایش دهیم که با استفاده از روش های سمت سرور به راحتی انجام می شود.

پیاده سازی یک محاسبه سمت سرور در GridView به شکل زیر تنظیم می شود:

روش های سمت سرور

1.	<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"   
2.	                             ShowFooter="true">   
3.	  <Columns>   
4.	     <asp:BoundField DataField="ItemDescription" HeaderText="Item"/>   
5.	     <asp:TemplateField HeaderText="Amount">   
6.	       <ItemTemplate>   
7.	         <asp:TextBox ID="TextBox1" runat="server"    
8.	            AutoPostBack="True"   
9.	                       ontextchanged="TextBox1_TextChanged">     
10.	         </asp:TextBox>   
11.	       </ItemTemplate>   
12.	     </asp:TemplateField>   
13.	  </Columns>   
14.	</asp:GridView>  

در اینجا مجموعه ای  از داده های بانک اطلاعاتی را با استفاده از ADO.Net  نمایش می دهیم:

1.	private string GetConnectionString(){   
2.	        //Where MYDBConnection is the connetion string that was set up from the web config file   
3.	        return System.Configuration.ConfigurationManager.ConnectionStrings["MyDBConnection"].ConnectionString;   
4.	}   
5.	// Method for Binding the GridView Control   
6.	private void BindGridView(){   
7.	    using (SqlConnection connection = new SqlConnection(GetConnectionString())) {   
8.	                string sql = "SELECT * FROM YourTable";   
9.	                using (SqlCommand cmd = new SqlCommand(sql, connection)) {   
10.	                    connection.Open();   
11.	            using(var adapter = new SqlDataAdapter(cmd)){;   
12.	                    adapter.Fill(dt);   
13.	                    if (dt.Rows.Count > 0){   
14.	                        GridView1.DataSource = dt;   
15.	                        GridView1.DataBind();   
16.	                    }   
17.	           }   
18.	                }   
19.	    }   
20.	}   
21.	//Bind GridView on initial postabck   
22.	protected void Page_Load(object sender, EventArgs e){   
23.	        if (!Page.IsPostBack)   
24.	            BindGridView();    
25.	}  

 در این رویداد محاسبه مجموع در Textbox  انجام میشود:

1.	//Calculate the Totals in the TextBox rows   
2.	protected void TextBox1_TextChanged(object sender, EventArgs e){   
3.	        double total = 0;   
4.	        foreach (GridViewRow gvr in GridView1.Rows)   
5.	        {   
6.	            TextBox tb = (TextBox)gvr.Cells[1].FindControl("TextBox1");   
7.	            double sum;   
8.	            if(double.TryParse(tb.Text.Trim(),out sum))   
9.	            {   
10.	                total += sum;   
11.	            }   
12.	        }   
13.	        //Display  the Totals in the Footer row   
14.	        GridView1.FooterRow.Cells[1].Text = total.ToString();   
15.	}  

محاسبه مجموع اعداد به راحتی انجام می شود . اکنون پیاده سازی محاسبه در سمت سرویس گیرنده را توضیح خواهیم داد.

حال یک فرم ساده در صفحه ایجاد می کنیم  :

   
1.	<asp:gridview ID="GridView1"  runat="server"  ShowFooter="true" AutoGenerateColumns="false">   
2.	        <Columns>   
3.	        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />   
4.	        <asp:BoundField DataField="Description" HeaderText="Item Description" />   
5.	        <asp:TemplateField HeaderText="Item Price">   
6.	            <ItemTemplate>   
7.	                <asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label>   
8.	            </ItemTemplate>   
9.	            <FooterTemplate>   
10.	                <b>Total Qty:</b>   
11.	            </FooterTemplate>   
12.	        </asp:TemplateField>   
13.	        <asp:TemplateField HeaderText="Quantity">   
14.	            <ItemTemplate>   
15.	                <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>   
16.	            </ItemTemplate>   
17.	            <FooterTemplate>   
18.	                <asp:Label ID="LBLQtyTotal" runat="server" Font-Bold="true" ForeColor="Blue" Text="0" ></asp:Label>        
19.	                <b>Total Amount:</b>   
20.	            </FooterTemplate>   
21.	        </asp:TemplateField>   
22.	        <asp:TemplateField HeaderText="Sub-Total">   
23.	            <ItemTemplate>   
24.	                <asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>   
25.	            </ItemTemplate>   
26.	            <FooterTemplate>   
27.	                <asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>   
28.	            </FooterTemplate>   
29.	        </asp:TemplateField>   
30.	        </Columns>   
31.	    </asp:gridview>  

در کد بالا فقط شامل یک GridView استاندارد با BoundFields  و TemplateFields  نوشته شده است .

در قالب کد زیر فقط داده های اولیه را در GridView  تکمیل کرده ایم که می توانید مشاهده نمایید :

1.	public partial class GridCalculation : System.Web.UI.Page   
2.	    {   
3.	        private void BindDummyDataToGrid() {   
4.	   
5.	            DataTable dt = new DataTable();   
6.	            DataRow dr = null;   
7.	   
8.	            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));   
9.	            dt.Columns.Add(new DataColumn("Description", typeof(string)));   
10.	            dt.Columns.Add(new DataColumn("Price", typeof(string)));   
11.	   
12.	            dr = dt.NewRow();   
13.	            dr["RowNumber"] = 1;   
14.	            dr["Description"] = "Nike";   
15.	            dr["Price"] = "1000";   
16.	            dt.Rows.Add(dr);   
17.	   
18.	            dr = dt.NewRow();   
19.	            dr["RowNumber"] = 2;   
20.	            dr["Description"] = "Converse";   
21.	            dr["Price"] = "800";   
22.	            dt.Rows.Add(dr);   
23.	   
24.	            dr = dt.NewRow();   
25.	            dr["RowNumber"] = 3;   
26.	            dr["Description"] = "Adidas";   
27.	            dr["Price"] = "500";   
28.	            dt.Rows.Add(dr);   
29.	   
30.	            dr = dt.NewRow();   
31.	            dr["RowNumber"] = 4;   
32.	            dr["Description"] = "Reebok";   
33.	            dr["Price"] = "750";   
34.	            dt.Rows.Add(dr);   
35.	            dr = dt.NewRow();   
36.	            dr["RowNumber"] = 5;   
37.	            dr["Description"] = "Vans";   
38.	            dr["Price"] = "1100";   
39.	            dt.Rows.Add(dr);   
40.	            dr = dt.NewRow();   
41.	            dr["RowNumber"] = 6;   
42.	            dr["Description"] = "Fila";   
43.	            dr["Price"] = "200";   
44.	            dt.Rows.Add(dr);   
45.	           //Bind the GridView   
46.	            GridView1.DataSource = dt;   
47.	            GridView1.DataBind();   
48.	        }   
49.	        protected void Page_Load(object sender, EventArgs e) {   
50.	            if (!IsPostBack) {   
51.	                BindDummyDataToGrid();   
52.	            }   
53.	        }   
54.	    }  

وقتی که شما صفحه را اجرا میکنید به صورت زیر نمایش داده  می شود:

در اجرای سمت سرویس گیرنده روش های مختلفی است که نیاز به مقابله با عناصر DOM برای استخراج مقادیر موجود در کنترل و نیاز به دستورات جاوا اسکریپت است که در مقایسه با C# با سمت سرور اجرای آن کمی پیچیده است .

اجرای محاسبه سمت سرویس گیرنده  که شامل فراخوانی های زیر است:

1. شماره معتبرسازی

2. فرمت بندی مقادیر ، جدا به صورت  فرمت پول

3. محاسبه برای مقدار کل و جمع اعداد

در کد جاوا اسکریپت در صفحه وب فرم داخل  قسمت <head> دستور زیر نوشته می شود:

1.	<script type="text/javascript">   
2.	         
3.	        function CalculateTotals() {   
4.	            var gv = document.getElementById("<%= GridView1.ClientID %>");   
5.	            var tb = gv.getElementsByTagName("input");   
6.	            var lb = gv.getElementsByTagName("span");   
7.	   
8.	            var sub = 0;   
9.	            var total = 0;   
10.	            var indexQ = 1;   
11.	            var indexP = 0;   
12.	            var price = 0;   
13.	   
14.	            for (var i = 0; i < tb.length; i++) {   
15.	                if (tb[i].type == "text") {   
16.	                    ValidateNumber(tb[i]);   
17.	   
18.	                    price = lb[indexP].innerHTML.replace("$", "").replace(",", "");   
19.	                    sub = parseFloat(price) * parseFloat(tb[i].value);   
20.	                    if (isNaN(sub)) {   
21.	                        lb[i + indexQ].innerHTML = "0.00";   
22.	                        sub = 0;   
23.	                    }   
24.	                    else {   
25.	                        lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ;   
26.	                    }   
27.	                      
28.	                    indexQ++;   
29.	                    indexP = indexP + 2;   
30.	   
31.	                    total += parseFloat(sub);   
32.	                }   
33.	            }   
34.	   
35.	            lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", ".");   
36.	        }   
37.	   
38.	        function ValidateNumber(o) {   
39.	            if (o.value.length > 0) {   
40.	                o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers   
41.	            }   
42.	        }   
43.	        function isThousands(position) {   
44.	            if (Math.floor(position / 3) * 3 == position) return true;   
45.	            return false;   
46.	        };   
47.	   
48.	        function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {   
49.	            var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));   
50.	            theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);   
51.	            theNumber = "" + Math.floor(theNumber);   
52.	            var theOutput = theCurrency;   
53.	            for (x = 0; x < theNumber.length; x++) {   
54.	                theOutput += theNumber.substring(x, x + 1);   
55.	                if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {   
56.	                    theOutput += theThousands;   
57.	                };   
58.	            };   
59.	            theOutput += theDecimal + theDecimalDigits;   
60.	            return theOutput;   
61.	        }    
62.	    </script>  

در کد بالا می خواهیم تابع جاوا اسکریپت را بررسی کنیم. در رویداد تابع FormatToMoney() مقادیر عددی را به فرمت پول وبا عبور مقدار عددی و هزار و دهدهی به صورت جداگانه ارسال میکند. در رویداد تابع Thousand() نتایج اعداد را به صورت بولین برمی گرداند. در رویداد تابع FormatToMoney() در صورت تشخیص این مقدار ارسال شده برابر هزار باشد.

در رویداد تابع ValidateNumber() اگر مقدار ارسال شده معتبر بود تایید میشود.

و در نهایت رویداد تابع CalculateTotals() یه تابع اصلی است که هر فیلدها از GridView استخراج میکند، ارزش ها رو محاسبه میکند و مقدار محاسبه شده را در فیلدهای  GridView برمیگرداند که در این قسمت مقدارکل و جمع اعداد میباشد.

در حال حاضر رویداد تابع Calculate Totals() بر روی "  ”OnKeyUp یا "OnKeyPress" شبیه کد زیر میباشد:

1.	<ItemTemplate>   
2.	     <asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>   
3.	</ItemTemplate>  

بعد از اجرا کردن صفحه خروجی شما به شکل زیر می باشد:

مقادیر را در Textbox  وارد میکنیم: