AJAXコールバック内でアンカータグを奇妙に解析する

Question

私はAJAXを以下のように私のサービスに呼び出しています。私は応答コールをHTMLを成功コールバックに挿入して表に表示しています。すべて正常に動作し、問題はありません。以下にコードが追加されました。私は再利用するために必要なので、

<td> 
    <span class="glyphicon glyphicon-ok-sign" style="color:#007A24"></span> 
    <a style="color:#007A24" id="row1" href="/Integration/Details">#1</a> 
</td> 
<td>Success</td> 

次のようにブラウザによって解析され<tr>用インナーHTMLは、しかし、私はAJAXコールするための一般的な方法を書くことにした

$.ajax({ 
     type: 'GET', 
     url: 'http://localhost:56083/Service1.svc/Web/GetAll', 
     dataType: 'json', 
     processData: 'false', 
     contentType: "application/javascript", 
     success: function (data) { 
      console.log(data); 
      $('#log-Details').data("respData", data); 
      cache[cacheValue] = data; 
      console.log(cache[cacheValue]); 
      $.each(data, function (key, value) { 
       var IntId = value.IntegrationId; 
       var Status = value.Status; 
       changeStatusCSS(Status); 
       $('<tr><td>' + icon + '<a style="' + cssClass + '" id="row' + IntId + '" href="@Url.Action("Details", "Integration")">#' + IntId + '</a></td><td>' 
        + Status + '</td>').appendTo('#log-Details'); 

      }); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); 
     } 
    }) 

AJAXコールAJAXコールフォーマットが頻繁に使用されます。だから私は以下のコードを変更し、成功のコールバックのための別のメソッドを追加しました。

function getPagedResult(url) { 
    $.ajax({ 
     url: url, 
     type: "GET", 
     datatype: "json", 
     contentType: "application/json", 
     success: function(response){ 
      OnSuccess(response); 
     }, 
     failure: function (response) { 
      console.log(response); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown); 
     } 
    }); 
} 

function OnSuccess(data) { 
    $.each(data, function (key, value) { 
     var IntId = value.IntegrationId; 
     var Status = value.Status; 
     changeStatusCSS(Status); 
     $('<tr><td>' + icon + '<a style="' + cssClass + '" id="row' + IntId + '" href="@Url.Action("Details", "Integration")">#' + IntId + '</a></td><td>' 
         + Status + '</td>').appendTo('#log-Details'); 

    }); 
} 

私がしたのは、以前のコードセクションからコピーしてこのメ​​ソッドに貼り付けるだけなので、両方の成功コールバックに違いはありません。しかし、今回は、アンカータグのクリック時にエラーが発生する不明な理由により、ブラウザがinnerHTMLを以下のように解析します。形成されたURLは、行動の変化の背後にある理由を理解するのに苦労。「のhttp .../Integration/@Url.Action（」のようなものだ。

<td> 
    <span class="glyphicon glyphicon glyphicon-refresh" style="color:#337ab7"></span> 
    <a style="color:#337ab7" id="row5" href="@Url.Action(" details ",=" " "integration ")"="">#5</a> 
</td> 
<td>InProgress</td> 

Answer 1

動的にJavaScriptを使用して要素を追加する場合、@Url.Action("Details", "Integration")それはサーバーサイド言語なのでお勧めしません。

クライアント側で

、"/Integration/Details"は旅行の一番である。

使用

'" href="/Integration/Details">#' 

を

の代わりに、あなたはそれが正しく機能をエスケープされていないことであると言って何を意味

'" href="@Url.Action("Details", "Integration")">#'