Razor代码在JavaScript字符串中创建新行

Razor code creates new line inside of JavaScript string

本文关键字：创建 新行 字符串 JavaScript 代码 Razor      更新时间：2024-01-13

我有一个JavaScript变量，它应该包含点击按钮时生成的Razor代码：

$("#addNewCatBtn").click(function(e){
        e.preventDefault();
    counter++;
    var html = '<label class="col-md-2 control-label">İçerik Kategorisi</label><div class="col-md-3">'+
    '@{ List<SelectListItem> modCatList = new List<SelectListItem>(); if (Model.CategoryList != null && Model.CategoryList.Count > 0) { foreach (var cat in Model.CategoryList) { modCatList.Add(new SelectListItem { Text = cat.CategoryName, Value = cat.ModCategoryId.ToString(), Selected = false }); } } else { modCatList.Add(new SelectListItem { Text = "Kategori Yok", Value = "0", Selected = true }); } } @Html.DropDownList("ModCategoryId_"+Html.Raw("counter"), modCatList, new { @class = "select2-select-00 col-md-12 full-width-fix required", @data_rule_required = "true", @data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY }) </div> '
    +'<label class="col-md-2 control-label">Süreç Kategorisi</label> <div class="col-md-3"> '+ 
    '@{ List<SelectListItem> flowCatList = new List<SelectListItem>(); if (Model.FlowCatList != null && Model.FlowCatList.Count > 0) { foreach (var cat in Model.FlowCatList) { flowCatList.Add(new SelectListItem { Text = cat.CategoryName, Value = cat.FlowCategoryId.ToString(), Selected = false }); } } else { flowCatList.Add(new SelectListItem { Text = "Kategori Yok", Value = "0", Selected = true }); } } @Html.DropDownList("FlowCatId_" +Html.Raw("counter"), flowCatList, new { @class = "select2-select-00 col-md-12 full-width-fix required", @data_rule_required = "true", @data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY, @multiple = "multiple", @size = "5" }) </div>';    
        $("#modFlowCatGroupDiv").html();
    });

当它生成列表元素时，选项出现在新行中，并导致JavaScript给出Unterminated string constant错误。我该怎么阻止？

在代码中，modCatList和flowCatList应该在JS之外构造。

如果我没记错的话，Html.DropDownList返回一个MvcHtmlString，所以你可以在你的JS中添加以下内容：

var html = '<label class="col-md-2 control-label">İçerik Kategorisi</label><div class="col-md-3">'+
'@Html.DropDownList("ModCategoryId_"+Html.Raw("counter"), modCatList, new { @class = "select2-select-00 col-md-12 full-width-fix required", @data_rule_required = "true", @data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY }).ToHtmlString().Replace(Environment.NewLine, "") </div> '
+'<label class="col-md-2 control-label">Süreç Kategorisi</label> <div class="col-md-3"> '+ 
'@Html.DropDownList("FlowCatId_" +Html.Raw("counter"), flowCatList, new { @class = "select2-select-00 col-md-12 full-width-fix required", @data_rule_required = "true", @data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY, @multiple = "multiple", @size = "5" }).ToHtmlString().Replace(Environment.NewLine, "") </div>';

您可能需要取消显示渲染的代码，因此，

$("#modFlowCatGroupDiv").html(unescape(html));

最终，我决定像下面这样尝试，结果成功了：

var str =
        '<div class="form-group"><label class="col-md-2 control-label">İçerik Kategorisi</label>' +
        '<div class="col-md-3">' +
        '<select class="select2-select-00 col-md-12 full-width-fix required select2-offscreen"'
        + ' data-msg-required="Moderasyon Kategorisi boş olamaz!" data-rule-required="true" data-val="true" data-val-number="The field ModCategoryId must be a number."'
        + ' data-val-required="The ModCategoryId field is required." id="ModCategoryId_' + counter + '" name="ModCategoryId_' + counter + '" tabindex="-1">' +
        @{foreach(var item in modCatList)
          {
            @:'<option value="@item.Value">@item.Text</option>' +
          }
        }
        '</select>'
    + '</div>'
        + '<label class="col-md-2 control-label">Süreç Kategorisi</label> '
        +'<div class="col-md-3">' +
        '<select class="select2-select-00 col-md-12 full-width-fix required select2-offscreen" data-msg-required="Moderasyon Kategorisi boş olamaz!"'
        + ' data-rule-required="true" id="FlowCatId_' + counter + '"name="FlowCatId_' + counter + '" tabindex="-1">' +
        @{
            foreach (var item in flowCatList)
            {
                @:'<option value="@item.Value">@item.Text</option>' +
            }
        }
        '</select>'
    + '</div>' + '<div class="col-md-2"></div></div>';
        $("#modFlowCatGroupDiv").append(str);
相关文章：