2012-09-22 8 views
0

MVC 응용 프로그램을 개발하고 면도기 구문을 사용하고 있습니다.MVC 뷰에서 div를 숨기는 방법은 무엇입니까?

이 응용 프로그램에서는 주석 기능을 제공하고 있습니다.

DB에서 주석/레코드를로드하는 부분보기를 추가했습니다.

아래 그림에서 직원 색인보기에 대한 실행 시간이라는 주석 상자가 있습니다.

이제 사용자가 삭제 버튼을 클릭 할 때 div를 제거하고 싶습니다.

이미지를 확인하시기 바랍니다

하지만 지금은 작동하지 않습니다 ... ...

enter image description here

내 응용 프로그램에서 코드 아래가 ...

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script> 

@model IEnumerable<CRMEntities.Comment> 

    <div class="ParentBlock"> 



    @foreach (var item in Model) 
    { 
     <div class="OwnerClass" id="OwnerName" data-comment-id="@item.Id"> 


     <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" class="deleteComment">Delete</button></span> 

      <span class="EmpName"> @Html.ActionLink("Delete", "Delete", "Comment", new { id = item.Id }, new { @style = "color:#1A6690;" })</span> 


     <p class="CommentP"> 
      @Html.DisplayFor(ModelItem => item.CommentText) 
     </p> 


     </div> 


    } 


    <p class="p12"> 

     </p> 



</div> 

     <p id="ClassPara" class="ShowComments" onclick="chkToggle()">Show All Comments</p> 

} 



    @Html.TextArea("Comment", "", 5, 80, "asdsd") 


    <input type="button" value="Add Comment" id="AddCommentButton"/>       
    <input type="button" value="Clear" onclick="clearText()"/>      

    <br /> 



</body> 
</html> 





<script src="../../Scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".deleteComment").click(function() { 
      alert("asd"); 
      var commentBlock = $(this).parent('.OwnerClass'); 
      commentBlock.hide('slow') 

    }); 
    }); 



</script> 

업데이트 스크립트 ....

$(document).ready(function() { 
    $(".deleteComment").click(function() { 

     var commentBlock = $(this).parent('.OwnerClass'); 

     $.ajax({ 
      type: 'post', 
      url: '/Comment/DeleteComment', 
      dataType: 'json', 
      data: 
      { 

      //////////////////////////////////////// 
      //What should I write here ? How can I get comment ID here ? 
      //////////////////////////////////////// 
      }, 
      success: function (data) { 

       var commentBlock = $(this).closest('div'); 
      commentBlock.hide('slow'); 

      } 

     }); 

}); 
}); 
+0

버튼 내부 스팬; ' – nrodic

답변

1

이 시도 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".deleteComment").click(function() { 
      alert("asd"); 
      var commentBlock = $(this).closest('div'); 
      commentBlock.hide('slow'); 
    }); 
    }); 
</script> 

을 또한, 당신은 사용할 수 있습니다 : 당신이`VAR commentBlock = $ (이) .closest ('OwnerClass를.')로 설정해야하므로

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".deleteComment").click(function() { 
       alert("asd"); 
       var commentBlock = $(this).closest('div'); 
       commentBlock.html(''); 
     }); 
     }); 
    </script> 
+0

고맙습니다 kapil .... 그 작업 지금 ... 그 div 지금 제거 할 수 있습니다 ...하지만 DB에서이 제거하려면 노력하고 있지만 abt 그것을 혼란스러워 ... 여기 내 질문을 업데이트 할 수 있습니다? – user1668543

+0

@ user1668543 : 버튼 클릭시 ajax 기능 만 사용하십시오. div 요소를 숨기면 $ .ajax {... url : 'Controller/Action/Id'...}를 호출 한 다음 db에서 삭제할 수 있습니다. –

+0

사실 나는 그것을 먼저 지우고, 레코드가 삭제 된 경우에만 그 주석을 숨기고 싶습니다. 제발 내 업데이트 된 코드를 확인하십시오 ... DB에 코멘트 ID를 보내는 방법을 ABT에 혼란 스럽나요? – user1668543

관련 문제