JavaScript에서 HTML 구문을 사용하는 방법은 무엇입니까?

Question

MVC 응용 프로그램을 개발하고 면도기 구문을 사용하고 있습니다.

JavaScript에서 cshtml 파일의 HTML 코드를 사용하고 싶지만 JavaScript의 이중 인용 부호를 면도기 구문으로 사용하는 방법에 대해 혼란스러워합니다. 그게 문제 야?

<span class="EmpName"> @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })</span> 

@Html.DisplayFor(ModelItem => item.CommentDateTime) 

<span class="EmpName"><button type="button" id = "@item.Id" class="deleteComment">Delete</button></span> 

그리고 자바 스크립트 코드 아래에 쓴이 오른쪽이다 :

이 코드의 라인은?

success: function (data) { 
    $("p.p12").append 
      ("<div style=\"background-color:#FAFAFA\";>Recently Added... <br /><a href=\"../../Employee/Details/" + data.OwnerID + "\">" + data.OwnerName + "</a>" 
      + data.cmtDateTime + "<button type=\"button\" id = \" + data.Id + "\class=\"deleteComment\">Delete</button></span><br />" + data.msg + "</div>");      
} 

Answer 1

와 내가 JScript의 코드 아래에 쓴이 맞나요?

아니요, 올바르게 보이지 않습니다. 생성 된 HTML이 손상되었습니다. 구문과 속성 사이의 공백과 따옴표가 중요하다는 점에주의해야합니다. 또한 URL 도우미를 사용하는 대신 URL을 하드 코딩하는 것처럼 보입니다.

$('p.p12').append(
    '<div style="background-color:#FAFAFA;">Recently Added... <br /><a href="@Url.Action("Details", "Employee", new { id = "__id__" })'.replace('__id__', data.OwnerID) + '">' + data.OwnerName + '</a>' + data.cmtDateTime + '<span><button type="button" id=' + data.Id + ' class="deleteComment">Delete</button></span><br />' + data.msg + '</div>' 
); 

또는 나는 당신에게 이럴 더 정확한 방법입니다 here을 제안 : 다음과 같이하십시오.

또는 컨트롤러 동작에서 JSON을 반환하는 대신 AJAX 호출을 사용하고 있으므로 올바른 HTML 도우미를 사용하여 마크 업을 올바르게 빌드하는 ParialView를 반환하십시오. 이처럼

: 당신의 강력한 형식의 내부에 다음

[HttpPost] 
public ActionResult SomeAction(SomeViewModel args) 
{ 
    MyViewModel model = ... 
    return PartislView("_SomePartial", model); 
} 

및 부분 (_SomePartial.cshtml) 문자열의 회씩 연결과 스파게티 코드를 혼합 자바 스크립트와 HTML없이 마크 업을 구축 : 남아

@model MyViewModel 

<div style="background-color:#FAFAFA;"> 
    Recently Added... 
    <br /> 
    @Html.ActionLink(Model.OwnerName, "Details", "Employee", new { id = Model.OwnerID }, null) 
    @HtmlDisplayFor(x => x.cmtDateTime) 
    <span> 
     <button type="button" id="@Model.Id" class="deleteComment">Delete</button> 
    </span> 
    <br /> 
    @HtmlDisplayFor(x => x.msg) 
</div> 

이제 모든 귀하의 AJAX 성공 콜백에서 해당 DOM 섹션을 새로 고치는 것입니다 :

success: function(html) { 
    $('p.p12').append(html); 
}