部分视图无法正常工作
[英]Partial view not working properly
问题描述
我正在开发MVC 3应用程序并使用razor语法。
在这个应用程序中，我正在评论设施。
我在每个Div中都添加了Comment链接。 。 当用户单击该注释链接时，它会加载包含添加注释的控件组的局部视图。
我使用list来显示记录，当用户点击评论按钮时我使用局部视图来加载评论控件。
现在问题是我只能为第一条记录添加评论我无法在其他记录上添加评论...
有什么问题？
请查看下图...
以下是部分视图中的代码，它在DB中添加注释并再次获取最新注释以查看以显示它。
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.8.0.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>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#AddCommentButton').click(function ()
{
var comment1 = $('#Comment').val();
if (comment1 == '') {
alert('Please enter a comment');
return;
}
$.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('<button type="button" id=' + data.Id + ' class="deleteComment2">Delete</button></div>')
}
});
});
});
</script>
当我点击删除按钮时，我使用下面的代码...
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$('.deleteComment').live('click', function () {
alert('Clicked');
});
</script>
现在，一个问题的摘要是我追加div和在该div我添加一个按钮，我试图获得该按钮的点击事件但我不能得到该事件。
当按钮在Div标签中添加运行时，任何人都可以给出处理按钮点击事件的简单代码。
这是Darin Dimitrov的更新代码
@model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).on('click', '.deleteComment', function()
{
alert('comment deleted');
});
$(document).ready(function () {
alert("Doc loaded");
});
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#AddCommentButton').click(function () {
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
$('#comments22').append('<input type="button" class="deleteComment" value="Delete" /><br/>');
});
});
</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>
<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>
<br />
<a class="Delete222" style="cursor:move;display:none;">DeleteNew</a>
<br />
</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 />
<div id="comments22">
<input type="button" class="deleteComment" value="Delete" /><br/>
<input type="button" class="deleteComment" value="Delete" /><br/>
<input type="button" class="deleteComment" value="Delete" /><br/>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2012-09-25 05:25:14
您已订阅#AddCommentButton的点击事件。 但正如您所知，ID在整个DOM中必须是唯一的。 你只能有1个id="AddCommentButton"元素。 因此，您应该为“ Add Comment按钮使用类选择器：
$('.addComment').click(...);
和你的按钮：
<input type="button" value="Add Comment" class="addComment" />
我也希望你注意到这个答案 。 显然你没有，因为我仍然看到你在你的视图中硬编码网址而不是使用帮助程序。
解决方案2
1 2012-09-25 06:30:06
嗨，你可以得到这样的删除事件，如下所示
$(".lnkDelete").click(function (e) {
e.preventDefault();
var targeturl = $(this).attr("href");
and you can pass that targert url to your delete button like this
window.location.href = targeturl;
我想这会对你有帮助....
局部视图无法以正确的角度编译
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.