MVC视图中的字符文字太多

Question

问题背景：

我将一个ViewBag对象传递给我的MVC视图，该对象包含一个项目列表。然后通过使用For循环将这些项添加到名为“AddRows”的Javascript方法中，该方法创建并向视图中的表添加新的HTML行。

问题：

此代码以前有效，但我遇到了一个问题，我收到以下错误：

代码：

 @foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{

        var cartItemId = '@cartItem.CartItemId';
        var cartImage = '@cartItem.CartItemImage';
        var cartItemName = '@cartItem.CartItemName';
        var cartBrand = '@cartItem.CartItemBrand';
        var cartItemPrice = '@cartItem.CartItemPrice';
        var cartItemCartItemQty = '@cartItem.CartItemQty';

        AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
}


 <script type="text/javascript">

    var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {

        var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
        var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
        var selectors = '<input id="demo1" class="touchSpin" type="text" value="' + productQty + '" name="demo1">';


        var $html = $('<tr class="item">' +
            '<td class="prodId" style="display:none;">' + productId + '</td>' +
            '<td class="prodImage hidden-xs">' + image + '</td>' +
            '<td class="prodName">' + productName + '</td>' +
            '<td class="prodBrand">' + productBrand + '</td>' +
            '<td class="prodPrice"> £' + productPrice + '</td>' +
            '<td class="prodQty TableCell">' + selectors + '</td>' +
            '<td>' + button + '</td>' +
            '</tr>');

        $html.find("input[name='demo1']").TouchSpin({
            min: 1,
            max: 100,
            step: 1,
        });

        $('#Table1 > tbody:last').append($html);



    };
</script>

到目前为止我尝试了什么：

1. 尝试将列表中项目的每个属性的单引号从单引号更改为双引号。这将对字符串文字问题进行排序，但随后会创建一个错误，指出无法找到AddRows methed。

Answer 1

而不是

@foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{

    var cartItemId = '@cartItem.CartItemId';
    var cartImage = '@cartItem.CartItemImage';
    var cartItemName = '@cartItem.CartItemName';
    var cartBrand = '@cartItem.CartItemBrand';
    var cartItemPrice = '@cartItem.CartItemPrice';
    var cartItemCartItemQty = '@cartItem.CartItemQty';

    AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
}

使用此

@foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
<text>
    var cartItemId = '@cartItem.CartItemId';
    var cartImage = '@cartItem.CartItemImage';
    var cartItemName = '@cartItem.CartItemName';
    var cartBrand = '@cartItem.CartItemBrand';
    var cartItemPrice = '@cartItem.CartItemPrice';
    var cartItemCartItemQty = '@cartItem.CartItemQty';

    AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
</text>
}

<text>元素告诉Razor代码不应被视为C＃

Answer 2

在脚本中重新定位此js变量声明块并强制 Razor 将其作为带有<text>标记的文本进行插入。像这样：

<script type="text/javascript">

@foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
     <text>
        var cartItemId = '@cartItem.CartItemId';
        var cartImage = '@cartItem.CartItemImage';
        var cartItemName = '@cartItem.CartItemName';
        var cartBrand = '@cartItem.CartItemBrand';
        var cartItemPrice = '@cartItem.CartItemPrice';
        var cartItemCartItemQty = '@cartItem.CartItemQty';

        AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
    </text>
}



    var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {

        var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
        var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
        var selectors = '<input id="demo1" class="touchSpin" type="text" value="' + productQty + '" name="demo1">';


        var $html = $('<tr class="item">' +
            '<td class="prodId" style="display:none;">' + productId + '</td>' +
            '<td class="prodImage hidden-xs">' + image + '</td>' +
            '<td class="prodName">' + productName + '</td>' +
            '<td class="prodBrand">' + productBrand + '</td>' +
            '<td class="prodPrice"> £' + productPrice + '</td>' +
            '<td class="prodQty TableCell">' + selectors + '</td>' +
            '<td>' + button + '</td>' +
            '</tr>');

        $html.find("input[name='demo1']").TouchSpin({
            min: 1,
            max: 100,
            step: 1,
        });

        $('#Table1 > tbody:last').append($html);



    };
</script>