我們如何使用Jquery和ASP.NET MVC 4復雜模型數據設置HTML元素的值

Question

在我的ASP.NET MVC 4視圖之一中，我正在使用模型的數據來設置不同HTML元素的值。 我可以在視圖中使用此模型來顯示諸如以下的值：

<div>@Model.Category.Name</div> etc...

但是div標簽<div id="DivTotalCost"></div>需要顯示所有類別中所有產品的總成本。 因此，在視圖末尾，我具有以下腳本代碼來設置此DivTotalCost標記的值。 但是以下代碼未設置此值。 我放置了一個警報語句來測試該值，並且警報顯示：

function(){
  return total;
}

視圖：

@model MyMVC_app.Models.ProductDetails

<div>@Model.Category.Name</div> etc...
<div id="DivTotalCost"></div>

@section scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    <script type="text/javascript">
        $(document).ready(function () {
            var TotalCost = function () {
                @if(Model.ProductCategoryList != null)
                {
                    var total = "";

                    foreach(var item in Model.ProductCategoryList)
                    {
                        foreach(var product in @item.products)
                        {
                            total += product.price;
                        }
                    }
                }
                return total;
            }
            alert(TotalCost);
            $('#DivTotalCost').text(TotalCost);
        });
    </script>
}

請幫忙。

謝謝..Nam

Answer 1

第一：警報顯示

function(){
  return total;
}

因為您要傳遞函數本身，沒有結果。 您的警報（和div文本分配）應使用函數結果，如下所示

alert(TotalCost());

現在，在函數內部您將razor和javascript混合在一起，兩者都是不同的東西，並且分別在不同的時間運行，因此您應該像這樣調整代碼（未經測試，但您可能會明白）

$(document).ready(function () {
var TotalCost = function () {
               @{
                var total = 0;
                if(Model.ProductCategoryList != null)
                {   
                    foreach(var item in Model.ProductCategoryList)
                    {
                        foreach(var product in @item.products)
                        {
                            total += product.price;
                        }
                    }
                }
              }//end of razor block
                return @total;
            }
        });

您還可以創建一個ViewModel並在其上添加該邏輯，以防萬一您願意嘗試其他方法