تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

سلام دوستان

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

@using (Html.BeginForm("AddGroup", "Admin", FormMethod.Post, new { id = "myForm" }))

                    {

    <section id="content">

        <div class="container">

            <div class="row">

                    <div class="col-lg-12">

                            <table class="table-full table-total">

                                <tr>

                                    <th>

                                        @Html.DisplayName("قیمت واحد")

                                    </th>

                                    <th>

                                        @Html.DisplayName("تعداد")

                                    </th>

                                    <th>

                                        @Html.DisplayName("قیمت نهایی")

                                    </th>

                                </tr>

                                @foreach (var item in Model)

                                    {

                                    <tr>       

                                        <td>

                                            @item.Product.Price.ToString().Trim('0').Trim('.')  .ToPrice() تومان

                                        </td>

                                        <td>

                                            @Html.TextAreaFor(modelItem => item.Count, new { @class = "txtCountProduct", style = "width: 40px; ", productid = item.Product.Id })

                                        </td>

                                        <td id="total_sum_value">

                                            @((@item.Count * @item.Product.Price).ToString().Trim('0').Trim('.'  ).ToPrice()) تومان

                                        </td>

                                    </tr>

                                       }

                            </table>

                        </div>

                        </div>

    </div>

    </section>

}

اینم از کد ajax برای گرفتن تعداد:

 @section Scripts{

        <script src="~/Scripts/AutoNumeric/jquery-price.js"></script>

        <script>

            $(function () {

                $(".txtCountProduct").price();

                $(".deleteProduct").click(function () {

                    var id = $(this).attr("productid");

                    var img = $(this);

                    $.ajax({

                        url: "/Home/RemoveCart",

                        data: { Id: id },

                        type: "Post",

                        dataType: "Json",

                        success: function (result) {

                            if (result.Success) {

                                img.parent().parent().hide();

                                $("#CartItems").html(result.Html);

                            }

                            eval(result.Script);

                        },

                        error: function () {

                            alert("خطا!");

                        }

                    });

                });

                $(".txtCountProduct").change(function () {

                    var count = $(this).val();

                    var id = $(this).attr("productid");

                    $.ajax({

                        url: "/Home/AddToCart",

                        data: { Id: id, Count: count,t:1 },

                        type: "Post",

                        dataType: "Json",

                        success: function (result) {

                            if (result.Success) {

                                $("#CartItems").html(result.Html);

                               

                            }

                            eval(result.Script);

                        },

                        error: function () {

                            alert("خطا!");

                        }

                    });

                });

            });





        </script>

    }

با استفاده از Angular :
https://jsfiddle.net/MoienTajik/jvpujfzm/

ممنون
من برنامه رو طبق کدهای شما تغییر دادم و تا زمانیکه یه کالا هست درست کار میکنه اما اگر چندتا کالا باشه تعداد کالاها به تعداد کالای اول تغییر پیدا میکنه
ممنون میشم راهنمایی کنید
کدی که تغییر دادم اینجوریه:

 @Html.TextBoxFor(modelItem => item.Count, new { @class = "txtCountProduct", ng_model = "txtcount", data_ng_init = "txtcount=" + item.Count, style = "width: 40px;", productid = item.Product.Id })

                                        </td>

                                        <td id="total_sum_value">

                                            {{txtcount * @item.Product.Price}}

                                        </td>

ضمیمه 144114

خب شما باید txtcount رو به ازای هر کالا عوض کنید تا در صفحه هر کدوم unique باشن که باهم قاطی نشن ، با یه for میتونید اینکار رو مدیریت کنید ، به txtcount به تعداد کالا ها یک عدد اضافه کنید.

ممنون
اما من متوجه نمیشم باید چیکار کنم؟اخه تو ویو چطور میتونم این کاری که شما میگین کنترل کنم؟

 @{int i = 1;}

                                @foreach (var item in Model)

                                {

                                   

                                    <tr>

                                       

                                        <td>

                                            @item.Product.Price.ToString().Trim('0').Trim('.')  .ToPrice() تومان

                                        </td>

                                        <td>

                                            @Html.TextBoxFor(modelItem => item.Count, new { @class = "txtCountProduct", ng_model = "txtCount"+i, data_ng_init = "txtCount"+i+"="+item.Count, style = "width: 40px;", productid = item.Product.Id })

                                        </td>

                                        <td id="total_sum_value">

                                            {{txtCount@(i) * @item.Product.Price}}

                                             

                                        </td>

                                    </tr>

                                    i++;

                                }

منظورتون اینجوریه؟داره درست چواب میده ولی واقعیتش منطق کار خودمو نمیفهمم.درسته؟

حالا اگر من بخام جمع کل ستون
<td id="total_sum_value">

{{txtCount@(i) * @item.Product.Price}}



</td>
رو به روش angular بدست بیارم باید چیکار کنم؟ممنون میشم راهنمایی کنید

نقل قول:

---

نوشته شده توسط sara_t

ممنون
اما من متوجه نمیشم باید چیکار کنم؟اخه تو ویو چطور میتونم این کاری که شما میگین کنترل کنم؟

 @{int i = 1;}

                                @foreach (var item in Model)

                                {

                                   

                                    <tr>

                                       

                                        <td>

                                            @item.Product.Price.ToString().Trim('0').Trim('.')  .ToPrice() تومان

                                        </td>

                                        <td>

                                            @Html.TextBoxFor(modelItem => item.Count, new { @class = "txtCountProduct", ng_model = "txtCount"+i, data_ng_init = "txtCount"+i+"="+item.Count, style = "width: 40px;", productid = item.Product.Id })

                                        </td>

                                        <td id="total_sum_value">

                                            {{txtCount@(i) * @item.Product.Price}}

                                             

                                        </td>

                                    </tr>

                                    i++;

                                }

منظورتون اینجوریه؟داره درست چواب میده ولی واقعیتش منطق کار خودمو نمیفهمم.درسته؟

---

بله درسته ، دلیلش هم اینه که هر input باید در صفحه unique باشه تا بشه روش محاسبه کرد ، اگر 2 input با name مشابه وجود داشته باشه تشخیص نمیده که برای کدوم محاسبه انجام بشه ، شما با قرار دادن for میاید و هر input رو بهش 1 عدد اضافه میکنید تا مشابه در صفحه نداشته باشه .

نقل قول:

---

حالا اگر من بخام جمع کل ستون
<td id="total_sum_value">

{{txtCount@(i) * @item.Product.Price}}



</td>
رو به روش angular بدست بیارم باید چیکار کنم؟ممنون میشم راهنمایی کنید

---

یک مثال شبیه چیزی که میخواستید نوشتم براتون :
http://uplod.ir/97rukckbuifh/ShopTest.zip.htm

واقعا عالی بود ممنونم

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

<td>

                                                                                       <img src="~/Content/img/delete.png" alt="حذف محصول" style="cursor:pointer;" class="deleteProduct" productid="@item.Product.Id" type="deletepr" />

                                            </td>

کد HTML:

---

  $(".deleteProduct").click(function () {
             
                var id = $(this).attr("productid");
                var img = $(this);
                $.ajax({
                    url: "/Home/RemoveCart",
                    data: { Id: id },
                    type: "Post",
                    dataType: "Json",
                    success: function (result) {
                        if (result.Success) {
                            img.parent().parent().hide();                           
                            $("#CartItems").html(result.Html);
                            location.reload();
                           
                        }
                       
                        eval(result.Script);
                    },
                    error: function () {
                        alert("خطا!");
                    }
                });
            });

---

الان برای درست کار کردن برنامه یه reload اضافه کردم که فکر کنم کار جالبی نباشه.یعنی هر بار یه کالا حذف میشه صفحه رو رفرش میکنم تا مجموع درست بشه

میتونید در رویداد onclick برای دکمه حذف یک function بنویسید شبیه مثالی که فرستادم براتون ; وقتی روی دکمه حذف کلیک شد ، دوباره مجموع رو حساب کنه ( دریافت مجموع فعلی و کم کردن قیمت کالای کلیک شده برای حذف ازش ) و html مجموع رو با jquery تغییر بده .

 <script>

        $(document).ready(function(){

        $("#myTable").on('click','.deleteProduct',function  (){

         var currentRow=$(this).closest("tr");

         var col4=currentRow.find("td:eq(4)").html(); 

         var lresult= $("#lastResult").text();

         lresult=lresult-col4;

         $("#lastResult").text(lresult)

    });

    });

    </script>

اینجوری مشکل رو حل کردم ممنون

فقط یه سوال
من برای هر فرخوانی هی هر بار یه اسکریپت مینویسم.از اونجایی که تازه کارم این روشم درسته؟
من کد کامل اسکریپتهام رو میذارم.بنظرتون شلوغ و بد نیس؟راهی برای درست شدن داره؟منظورم از لحاظ درست نوشتن و سرعت کار هست

@section Scripts

{

    <script src="~/Scripts/angular.js">

    </script>

    <script src="~/Scripts/AutoNumeric/jquery-price.js"></script>

    <script>

        $(function () {

            $(".txtCountProduct").price();

            $(".deleteProduct").click(function () {

                var id = $(this).attr("productid");

                var img = $(this);

              

                $.ajax({

                    url: "/Home/RemoveCart",

                    data: { Id: id },

                    type: "Post",

                    dataType: "Json",

                    success: function (result) {

                        if (result.Success) {

                            img.parent().parent().hide();

                            $("#CartItems").html(result.Html);

                           // location.reload();

                           

                        }

                        eval(result.Script);

                    },

                    error: function () {

                        alert("خطا!");

                    }

                });

            });

            $(".txtCountProduct").change(function () {

                var count = $(this).val();

                var id = $(this).attr("productid");

                $.ajax({

                    url: "/Home/AddToCart",

                    data: { Id: id, Count: count,t:1},

                    type: "Post",

                    dataType: "Json",

                    success: function (result) {

                        if (result.Success) {

                            $("#CartItems").html(result.Html);

                        }

                        eval(result.Script);

                    },

                    error: function () {

                        alert("خطا!");

                    }

                });

            });

        });

      

    </script>

    <script>

        $(document).ready(function() {

            function checkSum() {

                var sum = 0;

                var lastItemId = @Model.Count;

                for (var i = 1; i <= lastItemId; i++) {



                    sum +=  Number($("#lastPrice" + i).text());

                }



                $("#lastResult").text(sum);

            }

            checkSum();

            $("input[type='number']").click(function() {

                checkSum();

            });

            $("input[type='number']").keyup(function() {

                checkSum();

            });

        });

        var app = angular.module("shopApp", []);

        app.controller("HomeController", function($scope) {

        });

    </script>

    <script>

        $(document).ready(function(){

        $("#myTable").on('click','.deleteProduct',function  (){

         var currentRow=$(this).closest("tr");

         var col4=currentRow.find("td:eq(4)").html(); 

         var lresult= $("#lastResult").text();

         lresult=lresult-col4;

         $("#lastResult").text(lresult)

    });

    });

    </script>

}

درست هست اشکال نداره ، میتونید برای مرتب شدن بیشتر کدتون ، کدهارو داخل یه فایل js دیگه بریزید و جدا فراخانی کنید .
برای سرعت هم minify و bundling یادتون نره .