Здраво на сите.

Пред скоро еден месец, имав една фина конверзација на http://forums.asp.net со еден член на форумот околу барање кое членот го беше поставил, за пресметка на сума од текстуални полиња во GridView контрола. Главната цел на самото барање беше тоа што лицето сакаше да овозможи корисникот да ги внесува вредностите во тесктуални полиња, притоа автоматски да се пресметува сума во дополнително текст поле во или надвор од самата GridView контрола, и се разбира, целата пресметка да иде на клиент страна со користење на JavaScript.

На крајот од разговорот, дојдовме до две решенија, иако имаше и трето, можеби најдобро, но заради поедноставување на кодот и да не се збуни соговорникот повеќе, останавме на второто решение.

Првото решение го направивме со користење на чист JavaScript код, но бидејќи мислев дека не е баш робустен, и со цел да се направи да биде по цврст, дојде до потреба да се напишат повеќе функции кои ќе се справат со можните сценарија. Поради тоа, едноставно предложив да користиме JQuery, при што решението ни дојде многу по добро, по рбосутно и со помалку код.

Во овој блог ќе ги прикажам двете решенија и ќе се обидам накратко со чекор по чекор објаснување да покажам што направивме.

Важно: Кодот го креирав со користење на VWD.NET 2008, MS SQL 2005 (Northwind база), JQuery library v1.4.2.min.js од Microsoft AJAX CDN (иако последната верзија со JQuery е подеднакво компатибилна)

РЕШЕНИЕ 1 (JavaScript)

1. Креирајте едноставна ASPX страна и додадете GridView.

2. Наполнете го GridView-то со податоци од базата со користење на некоја од Data Source контролите или преку код, како ви е полесно.

3. Следно, креираме костумизиран ItemTemplate во TemplateField на GridView-то и додаваме TextBox контрола.

<asp:TemplateField>
    <ItemTemplate>
     <asp:TextBox ID="TextBox1" onchange="calculate()" runat="server" Text="0"></asp:TextBox>
    </ItemTemplate>
</asp:TemplateField>

Ова е како дете (child) елемент на GridView <Columns> … </Colulmns> елементот.

Овде, можеме автоматски да залепиме податоци од data source командата за select коишто ќе бидат прикажани во текстуалното поле.

Пример:

<asp:TextBox ID="TextBox1" onchange="calculate()" runat="server" Text='<%# Bind("UnitPrice", "{0:N}") %>'></asp:TextBox>

На овој начин UnitPrice доаѓа од табела во базата на податоци којашто ја користиме за да го наполниме GridView-то.

Ако забележувате, текстуалното поле има атрибут onchange, којшто претставува еден настан. Така што, ако вредноста на текстуалното поле е променета, ќе се случи овој настан и calculate() функцијата ќе биде извршена.

4. Штом GridView-то е подготвено, ќе додадеме дополнително текстуално поле во коешто ќе го чуваме резултатот од пресметката – вкупно.

Total :-<asp:TextBox ID="total" runat="server" Text="0"></asp:TextBox>

5. Следен чекор е самиот JavaScript код.

JavaScript кодот ќе го прави следново:

- ќе прави loop низ сите текстуални полиња во GridView-то и ќе ја пресметува сумата (иако не најдобро, сепак наједноставно решение)
- ќе го запише резултатот во текстуалното поле за пресметка на вкупно сума
- ќе го форматира резултатот како float број со две децимални места

        function calculate() {
            var txtTotal = 0.00; //place where we will keep the total
            var passed = false; //bool val to check whether all textboxes are passed
            var id = 2; //current id

            while (passed == false) {
                var newId = "";
                if (id.toString().length == 1) {
                    //if the length of the id is 1 add '0' at beginning
                    //resultset: '1' => '01', '2'=>'02','3'=>'03'... etc
                    newId = "0" + id.toString();
                }
                else {
                    newId = id.toString(); //else just asign it to newId
                }

                var getElement = document.getElementById("GridView1_ctl" + newId + "_TextBox1");

                id = id + 1; //increment id
                if (getElement == null) {
                    passed = true;
                }
                else {
                    var currentVal = getElement.value.replace(",", ".");
                    txtTotal = MathRound(parseFloat(txtTotal) + parseFloat(currentVal));
                }
            }
            document.getElementById("<%= total.ClientID %>").value = txtTotal.toFixed(2);
        }

и имаме MathRound функција која го прави заокружувањето на две децимални места

        function MathRound(number) {
            return Math.round(number * 100) / 100;
        }
 

Тука имаме неколку нешта за дискусија:

ПРОБЛЕМ

Главниот проблем со овој код и причината што не натера да го замениме JavaScript кодот со JQuery е тоа што во различни верзии на .NET Framework, текстуалните полиња сместени во GridView колоната добиваат различно Client ID, што е многу важно за да можеме без проблем да ги манипулираме вредностите на текстуалните полиња со JavaScript. Дополнително, ако користиме MasterPage, Client Id-то ќе содржи и ID од ContentPlaceHolder-от како дел од ID-то коешто е автоматски генерирано од самата контрола. Оттука, го сменивме целото решение со JQuery, коешто дојде многу по кратко и по ефикасно.

РЕШЕНИЕ 2 (JQuery)

Еве го ASPX и JQuery кодот.

ASPX

    <asp:TemplateField>     
        <ItemTemplate>      
            <asp:TextBox ID="TextBox1" class="calculate" onchange="calculate()" runat="server" Text="0"></asp:TextBox>     
        </ItemTemplate>
    </asp:TemplateField>

Кодот е сличен како претходно. Само што сега додадов class=”calculate” на текстуалното поле со цел полесно да се изврши манипулација со JQuery на сите текстуални полиња со class=”calculate” (сите текстуални полиња ќе имаат класа calculate, без разлика на бројот на текстуални полиња во GridView-то).

JQuery

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function calculate() {
            var txtTotal = 0.00;
            //var passed = false;
            //var id = 0;

            $(".calculate").each(function (index, value) {
                var val = value.value;
                val = val.replace(",", ".");
                txtTotal = MathRound(parseFloat(txtTotal) + parseFloat(val));
            });

            document.getElementById("<%=total.ClientID %>").value = txtTotal.toFixed(2);            
        }

        function MathRound(number) {
            return Math.round(number * 100) / 100;
        }
    </script>

Со користење на JQuery each функцијата, можеме лесно да поминеме низ сите html објекти коишто содржат класа со име calculate, во нашиот случај се текстуалните полиња.

 

Воглавно, тоа е тоа.

Се надевам овој блог Ви беше интересен и корисен.

Превземете го примерот на којшто работев јас, со вклучен C# код: ОВДЕ

Се Најдобро,
Hajan

REFERENCE: http://weblogs.asp.net/hajan/archive/2010/08/27/calculating-gridview-total-using-javascript-jquery.aspx