我们如何使用Jquery和ASP.NET MVC 4复杂模型数据设置HTML元素的值

How do we set the value of an HTML element using Jquery and ASP.NET MVC 4 complex model data

本文关键字：设置 数据 模型 HTML 元素 复杂 Jquery 何使用 ASP MVC NET      更新时间：2024-01-02

在我的一个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

第一个：警报显示

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并在其上添加该逻辑，以防您尝试不同的方法

相关文章：