Fatal编程技术网
  • javascript/
  • Javascript 如何在MVC中隐藏新添加的视图div？

Javascript 如何在MVC中隐藏新添加的视图div？

javascript asp.net-mvc-3

Javascript 如何在MVC中隐藏新添加的视图div？,javascript,asp.net-mvc-3,Javascript,Asp.net Mvc 3,我正在开发MVC3应用程序并使用razor语法 在这个应用程序中，我提供了评论功能 我在每个Div中都添加了评论链接。当用户单击该注释链接时，它将加载包含一组用于添加注释的控件的局部视图 现在我的问题是删除新评论。 我有代码删除已经保存的评论..它的工作非常完美 现在的问题是，当用户输入新评论并尝试删除时，它不会被删除… 看看蓝色的广场 你可以通过这个图像理解 我的代码是 <script src="../../Scripts/jquery.validate.min.js" type="t

我正在开发MVC3应用程序并使用razor语法

在这个应用程序中，我提供了评论功能

我在每个Div中都添加了评论链接。当用户单击该注释链接时，它将加载包含一组用于添加注释的控件的局部视图

现在我的问题是删除新评论。

我有代码删除已经保存的评论..它的工作非常完美

现在的问题是，当用户输入新评论并尝试删除时，它不会被删除…

看看蓝色的广场

你可以通过这个图像理解

我的代码是

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

@model  IEnumerable<CRMEntities.Comment>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>



//Button which Saves currently added comment in DB as well display on screen...
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#AddCommentButton').click(function () 

        {     

       // alert("clicked");
            $.ajax({

                type: 'post',
                url: '/Comment/SaveComments',
                dataType: 'json',
                data:
                { 

                 'comments' : $('#Comment').val(), 
                 'EType' : @Html.Raw(Json.Encode(ViewBag.EType)), 
                  'EId' : @Html.Raw(Json.Encode(ViewBag.EId))

                },
                success: function (data) {

                    $("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 +'<button type="button" id=' + data.Id  + ' class="deleteComment">Delete</button></span><br />' + data.msg + '</div>')


                }

            });
        });
    });
</script>





<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".ShowComments").click(function () {
            $(".ParentBlock").slideToggle("slow");
     });
    });
</script>


</head>
<body>

@{



     <div class="ParentBlock">


    @foreach (var item in Model)
    {
        <div class="OwnerClass" id="OwnerName">


         <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>



        <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">
//   Working code - Deletes the comment from DB and removes hide the current Div
////////////////////////////////////////////////////////

    $(document).ready(function () {
        $(".deleteComment").click(function ()
         {
            alert("asd");

            var Id = $(this).attr("id");
           var self = this;

            var url1="@Html.Raw(Url.Action("DeleteComment", "Comment", new { id = "idValue" }))";
            url1=url1.replace("idValue",Id );
            alert(url1);

            $.ajax(
            {

                type: 'post',
                url: '/Comment/DeleteComment',
                dataType: 'json',
                data:
                { 

                 'EId' : Id

                },
                success: function (data) 
                {
                alert ("Hello");



                    $(self).closest("div").hide("slow");
                }

            });

        });
    });



</script>


@模型IEnumerable
//按钮，将当前添加的注释保存在数据库中，并显示在屏幕上。。。
$（文档）.ready（函数（）{
$（'#AddCommentButton'）。单击（函数（）
{     
//警报（“点击”）；
$.ajax({
键入：“post”，
url:“/Comment/SaveComments”，
数据类型：“json”，
数据：
{ 
'comments'：$（'#Comment'）.val（），
'EType'：@Html.Raw（Json.Encode（ViewBag.EType）），
'EId'：@Html.Raw（Json.Encode（ViewBag.EId））
},
成功：功能（数据）{
$（“p.p12”）.append（'最近添加的…
'+data.cmtDateTime+'Delete
'+data.msg+''）
}
});
});
});
$（文档）.ready（函数（）{
$（“.ShowComments”）。单击（函数（）{
$（“.ParentBlock”）.slideToggle（“慢”）；
});
});
@{
@foreach（模型中的var项目）
{
@ActionLink（item.Owner.FullName，“详细信息”，“员工”，新的{id=item.OwnerId}，新的{@style=“color:#1A6690；”）
@DisplayFor（ModelItem=>item.CommentDateTime）
删除


@DisplayFor（ModelItem=>item.CommentText）


}




显示所有注释

}
@TextArea（“Comment”，5，80，“asdsd”）


//工作代码-从数据库中删除注释并删除和隐藏当前Div
////////////////////////////////////////////////////////
$（文档）.ready（函数（）{
$（“.deleteComment”）。单击（函数（）
{
警报（“asd”）；
var Id=$（this.attr（“Id”）；
var self=这个；
var url1=“@Html.Raw（Url.Action（“DeleteComment”，“Comment”，new{id=“idValue”}））”；
url1=url1.replace（“idValue”，Id）；
警报（url1）；
$.ajax(
{
键入：“post”，
url:“/Comment/deletecoment”，
数据类型：“json”，
数据：
{ 
“EId”：Id
},
成功：功能（数据）
{
警惕（“你好”）；
$（self）.最近的（“div”）.隐藏（“slow”）；
}
});
});
});
在成功方法中，当您附加新的div时，只需向delete按钮添加一个类，该按钮的CSS为
display:none

例如：

$("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 +'<button type="button" id=' + data.Id  + ' class="deleteComment hidden">Delete</button></span><br />' + data.msg + '</div>')
当您准备好显示该类时，您只需从按钮中删除该类。

请更好地设置问题的格式。我知道这需要时间，但在这种格式中，我们需要更多的时间来理解您的问题。格式化了问题…请检查…您是否检查了创建后删除按钮的id值设置是否正确？我看不到页面源中的注释。。。我绑定了部分视图…我应该得到最近添加的div并在删除它后隐藏它。。。不是吗？
$（document）.ready（函数（）{$（“.deleteComment”）。单击（函数（）{alert（“在删除按钮代码中”）；}）此代码根本不起作用…使用on方法绑定到all.deleteComment按钮，无论它们是在何时创建的$（.parentBlock”）。在（“单击”，“.deleteComment”，函数（）{alert（'a'）；}）上；

.hidden { display: none;}