0
JQuery AJAXをASP.NET MVCで使用する方法を学びたいので、リストにコメントを追加したり削除したりできるページを作成しました。唯一うまくいかないのは、AJAX呼び出しによって追加されたコメントを削除することです。コメントはデータベースから削除されますが、AJAXが実行される代わりにページがリロードされます。これは、AJAXを介して追加されたばかりのコメントにのみ適用されます。 AJAXの削除は、ページが読み込まれたときに既にあったコメントに対してうまく機能します。ASP.NET MVC AJAX削除がAJAX追加レコードで機能しない
私は1つのビューと、新しいコメントのためにHTMLを保持するパーシャルビューを持っています。このhtmlは、コメントが追加されたときにビューのコメントdivに追加されます。
注：これはjavascriptに依存しないため、各コメントの削除ボタンはJavaScriptが無効な場合にPOSTを実行する独自のフォームになっています。
ビュー（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>
部分図
<%@ 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>
コントローラーの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();
});
}
});
});
});
任意の助けに感謝！
$('.DeleteForm').submit(function(e) {});
あなたが使用する必要があります：代わりの
必要なスクリプトを追加し、Ajax Helperを使用します。 – Tocco