I am just trying to learn how to use JQuery AJAX with ASP.NET MVC so I have constructed a page which allows you to add and remove comments to a list. The only thing that doesn’t work is deleting comments that have just been added through an AJAX call. The comments are deleted from the database but the page is reloaded instead of the AJAX being executed. This is only on comments that have just been added through AJAX. The AJAX delete works fine on comments that were already there when the page loaded.
I have a single View, and a Partial View which holds the html for a new comment. This html is then appended to the comments div in the View when a comment is added.
Note: I want this to be javascript independent, so my delete button on each comment is in its own form that will perform a POST if javascript is disabled.
View (Index.aspx)
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<AJAXComments.Models.Comment>>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
<link rel="Stylesheet" type="text/css" href="../../Content/Styles/Master.css" />
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<div id="Container">
<h2>Comments</h2>
<div id="Comments">
<% foreach (var c in Model)
{ %>
<div class="comment">
<input class="id" type="hidden" value="<%: c.Id %>" />
<div class="author">Posted by <%: c.User %></div>
<div class="comment-text">
Posted <%: c.DateTimePosted %>
<p><%: c.CommentText %></p>
<% using (Html.BeginForm("DeleteComment", "Home", new { id = c.Id }, FormMethod.Post, new { @class = "DeleteForm" }))
{ %>
<input type="submit" value="Remove" />
<% } %>
</div>
</div>
<% } %>
</div>
<div id="AddComment">
<% using (Html.BeginForm("AddComment", "Home", FormMethod.Post, new { id = "AddCommentForm" }))
{ %>
<label for="User">Your Name:</label>
<input name="User" id="User" type="text" /><br />
<label for="CommentText">Comment:</label>
<textarea name="CommentText" id="CommentText" rows="5" cols="10"></textarea><br />
<input id="Submit" type="submit" value="Submit" />
<input id="Reset" type="reset" class="hidden" />
<% } %>
</div>
<p class="response"></p>
</div>
</body>
</html>
Partial View
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AJAXComments.Models.Comment>" %>
<div class="comment hidden">
<input class="id" type="hidden" value="<%: Model.Id %>" />
<div class="author">Posted by <%: Model.User %></div>
<div class="comment-text">
Posted <%: Model.DateTimePosted %>
<p><%: Model.CommentText %></p>
<% using (Html.BeginForm("DeleteComment", "Home", new { id = Model.Id }, FormMethod.Post, new { @class = "DeleteForm" }))
{ %>
<input type="submit" value="Remove" />
<% } %>
</div>
</div>
Controller ActionResult
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DeleteComment(int id)
{
var comment = commentsRep.GetCommentById(id);
if (Request.IsAjaxRequest())
{
commentsRep.DeleteComment(comment);
return Json("Comment removed");
}
else
{
commentsRep.DeleteComment(comment);
return RedirectToAction("Index");
}
}
JQuery
$(document).ready(function () {
$('#AddCommentForm').submit(function (e) {
e.preventDefault();
var form = {
'User': $('#User').val(),
'CommentText': $('#CommentText').val()
};
$.ajax({
url: '/Home/AddComment',
type: 'POST',
data: form,
success: function (html) {
$('#Comments').append(html);
$('.comment').slideDown('normal', function () {
$(this).removeClass('hidden');
});
$('#Reset').trigger('click');
}
});
});
$('.DeleteForm').submit(function (e) {
e.preventDefault();
var id = $(this).parent().siblings("input.id").val();
var comment = $(this).parent().parent('.comment');
$.ajax({
url: '/Home/DeleteComment',
type: 'POST',
data: { id: id },
success: function (response) {
$('p.response').append(response);
comment.slideUp('normal', function () {
comment.remove();
});
}
});
});
});
Appreciate any help!
Instead of:
You should use:
That will automatically bind the event on new forms loaded to the page.