我们如何使用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并在其上添加该逻辑，以防万一您愿意尝试其他方法