如何在MVC視圖中隱藏div？

我正在開發MVC應用程序並使用剃刀語法。如何在MVC視圖中隱藏div？

在這個應用程序中，我給評論設施。

我已經添加了一個局部視圖，它從數據庫中加載評論/記錄。

在下圖中，我們可以看到名爲run-time for employee index view的評論框。

現在我想在用戶點擊刪除按鈕時刪除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'); 

      } 

     }); 

}); 
});

此外

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

，你可以使用：10

來源

2012-09-22 user1668543

按鈕跨度裏面，所以你應該設置'VAR commentBlock = $（本）.closest（」 OwnerClass。）; ' – nrodic

試試這個

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

來源

2012-09-22 04:52:17

非常感謝kapil ....它的工作現在...我可以刪除該div現在...但我試圖從DB刪除這個，但我很困惑... ...可以更新我的問題嗎？ – user1668543

@ user1668543：只需在按鈕點擊中使用ajax功能。隱藏div元素後，您可以調用$ .ajax {... url：'Controller/Action/Id'...}然後從數據庫中刪除。 – 2012-09-22 05:02:57

其實我想先刪除它，如果記錄被刪除，那麼只有我想隱藏那條評論。請檢查我更新的代碼...我很困惑，如何發送評論ID到數據庫？ – user1668543

如何在MVC視圖中隱藏div？

回答

相關問題