在javascript函数中插入剃刀语法答案

【问题标题】：Inserting razor syntax inside javascript function在javascript函数中插入剃刀语法
【发布时间】：2018-07-27 14:38:15
【问题描述】：

我试图在这样的 div 内循环数据集合，但收到了错误，显示未终止的字符串文字。以引号 (") 开头的字符串必须在行尾之前终止。我该如何解决这个问题？

 <a href="@(eventItem.Url)"   class="media-box__cover">
    @if (listingImageUrl == "") {
        if (currentCount % 2 == 0) {
         <div class="media-box__cover-image" style="background-color: #ffd205;"></div>
        }else {
         <div class="media-box__cover-image" style="background-color: #0d9430;"></div>
     }
    } else {
      <div class="media-box__cover-image" style="background-image: url('@(listingImageUrl)');"></div>
    }
</a>

进入这个，

for (i = 0; i < json["data"].length ; i++) {
  if(typeof(json["data"][i]) == 'object' && json["data"][i] != null){

    htmlRetStr = "<div class='block'><div class='media-boxes'>";
    htmlRetStr += "<div class='media-box'>";
    htmlRetStr += "<a href=\""+ json["data"][i]["eventUrl"] +"\" class='media-box__cover'>";
    htmlRetStr += "@if (json["data"][i]["eventUrl"] == '') { "; //error here
    htmlRetStr += "if (currentCount % 2 == 0) {";
    htmlRetStr += "<div class='media-box__cover-image' style='background-color: #ffd205;'></div>";
    htmlRetStr += "}else{";
    htmlRetStr += "<div class='media-box__cover-image' style='background-color: #0d9430;'></div> }";
    htmlRetStr += " } else {";
    htmlRetStr += "<div class='media-box__cover-image' style='background-image: url(\""+ json["data"][i]["listingImage"] +"\");'></div>} </a>";
    htmlRetStr += "<div class='media-box__main'><div class='media-box__main-inner'><div class='media-box__header'>";
    htmlRetStr += "<h3 class='media-box__heading'><a href=\""+ json["data"][i]["eventUrl"] +"\" class='media-box__heading-link'>" + json["data"][i]["heading"] + "</a></h3>";
    htmlRetStr += "<div class='media-box__meta'>Posted on: " + json["data"][i]["articleDate"] +" "+ json["data"][i]["articleMonth"] +" "+ json["data"][i]["articleYear"] + "</div></div>";
    htmlRetStr += "<p>"+ json["data"][i]["subHeading"] +"&hellip;</p>";
    htmlRetStr += "</div></div></div></div></div>";

 $("#news").append(htmlRetStr);
}

【问题讨论】：

这组代码无法实现您想要实现的目标。您不能在 JSON 响应中使用 razor 语法。使用 JavaScript 构建动态 HTML。请问，这里的 currentCount 是什么？这是在哪里声明和初始化的？
currentCount 是统计图片是否属于哪个条件。如果我删除代码的@if 部分，它将返回预期的输出。该错误仅在我插入@if razor 语法时发生。
请问您为什么在这里使用 Razor 语法。您一直在努力实现的预期结果是什么？
我试图实现的是让 JavaScript 呈现与 html 块相同的 html（代码的第一部分）。很抱歉造成混乱
看看我的回答，看看这是否满足你的需要。

标签： javascript asp.net razor

【解决方案1】：

不确定这是否会有所帮助，但希望这是您正在寻找的。您可能需要从最后检查一件事，即关于 currentCount。这是来自 JSON 还是来自其他任何地方。

for (i = 0; i < json["data"].length; i++) {
  if (typeof(json["data"][i]) == 'object' && json["data"][i] != null) {

    htmlRetStr = "<div class='block'><div class='media-boxes'>";
    htmlRetStr += "<div class='media-box'>";
    htmlRetStr += "<a href=\"" + json["data"][i]["eventUrl"] + "\" class='media-box__cover'>";

    if (json["data"][i]["eventUrl"] == '') {
      if (currentCount % 2 == 0) {
        htmlRetStr += "<div class='media-box__cover-image' style='background-color: #ffd205;'></div>";
      } else {
        htmlRetStr += "<div class='media-box__cover-image' style='background-color: #0d9430;'></div>";
      }
    } else {
      htmlRetStr += "<div class='media-box__cover-image' style='background-image: url(\"" + json["data"][i]["listingImage"] + "\");'></div>} </a>";
    }

    htmlRetStr += "<div class='media-box__main'><div class='media-box__main-inner'><div class='media-box__header'>";
    htmlRetStr += "<h3 class='media-box__heading'><a href=\"" + json["data"][i]["eventUrl"] + "\" class='media-box__heading-link'>" + json["data"][i]["heading"] + "</a></h3>";
    htmlRetStr += "<div class='media-box__meta'>Posted on: " + json["data"][i]["articleDate"] + " " + json["data"][i]["articleMonth"] + " " + json["data"][i]["articleYear"] + "</div></div>";
    htmlRetStr += "<p>" + json["data"][i]["subHeading"] + "&hellip;</p>";
    htmlRetStr += "</div></div></div></div></div>";

    $("#news").append(htmlRetStr);

  }
}

【讨论】：