Javascript MVC视图中的字符文本太多

问题背景：

 @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>

我将一个包含项目列表的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>

这段代码以前运行过，但我遇到了一个问题，我遇到了以下错误：

代码：

 @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>

@foreach（列表）ViewBag.Data中的var cartItem）
{
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、CartItemQTY）；
}
var AddRows=函数（productId、productImage、productName、productBrand、productPrice、productQty）{
var按钮=“”；
var图像=“”；
变量选择器=“”；
var$html=$（“”+
''+productId+''的+
''+图像+''+
“+productName+”+
''+产品品牌+''+
“£”+产品价格+”+
''+选择器+''+
''+按钮+''+
'');
$html.find（“输入[name='demo1']”）。触针({
民:1,，
最高：100，
步骤：1，
});
$（'#Table1>tbody:last'）.append（$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>

尝试将列表中项的每个属性周围的单引号从单引号更改为双引号。这将对字符串文字问题进行排序，但随后会创建一个错误，说明找不到AddRows方法

而不是

@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（列表）ViewBag.Data中的var cartItem）
{
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、CartItemQTY）；
}

用这个

@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>
}

@foreach（列表）ViewBag.Data中的var cartItem）
{
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、CartItemQTY）；
}

---

元素告诉Razor，代码不应被视为C#

将此js变量声明块重新定位到脚本中，并强制Razor将其作为带有

标记的文本进行互写。像这样：

<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>

@foreach（列表）ViewBag.Data中的var cartItem）
{
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、CartItemQTY）；
}
var AddRows=函数（productId、productImage、productName、productBrand、productPrice、productQty）{
var按钮=“”；
var图像=“”；
变量选择器=“”；
var$html=$（“”+
''+productId+''的+
''+图像+''+
“+productName+”+
''+产品品牌+''+
“£”+产品价格+”+
''+选择器+''+
''+按钮+''+
'');
$html.find（“输入[name='demo1']”）。触针({
民:1,，
最高：100，
步骤：1，
});
$（'#Table1>tbody:last'）.append（$html）；
};

非常感谢！我意识到我最初在标签中有for循环，但后来把它去掉了！再次感谢你帮我解决这个问题。