Question

我有一个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错误。我怎么能阻止这个？

Answer 1

在代码中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));

Answer 2

最终，我决定尝试下面这样做，它起作用了：

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

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

2 个答案: