私の例にコメントを追加すると、ページが更新されます。私は何を間違っていますか？
ページを更新せずに詳細ページのコメントを更新したい。
ここで StackOverflow にコメントを追加する方法と非常によく似たことをしようとしています。
My Details.aspx には問題のリストがあり、クリックすると詳細/ID ページに移動し、問題のすべてのコメントが表示されます。コメントは部分ビューを介して読み込まれます。詳細ページには、ActionResult メソッド (AddComment) を呼び出してコメントをデータベースに追加し、部分ビューを返すフォームがあります。
データベース
CREATE TABLE [dbo].[Comment](
[CommentId] [int] IDENTITY(1,1) NOT NULL,
[IssueId] [int] NOT NULL,
[Comment] [varchar](50) NULL,
CONSTRAINT [PK_Comment] PRIMARY KEY CLUSTERED
(
[CommentId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
CREATE TABLE [dbo].[Issue](
[IssueId] [int] IDENTITY(1,1) NOT NULL,
[Title] [varchar](50) NULL,
CONSTRAINT [PK_Issue] PRIMARY KEY CLUSTERED
(
[IssueId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
インデックス.aspx
<p><ul>
<% foreach (var item in (IEnumerable<PartialUpdates.Models.Issue>)Model)
{ %>
<li>
<a href="<%= Url.RouteUrl("Default", new { id = item.IssueId, controller = "Home", action = "Details" })%>"><%= item.Title%></a>
</li>
<% } %>
</ul> </p>
詳細.aspx
<fieldset>
<legend>Fields</legend>
<p>
IssueId:
<%= Html.Encode(Model.Issue.IssueId) %>
</p>
<p>
Title:
<%= Html.Encode(Model.Issue.Title) %>
</p>
<div id="issueComments">
<% Html.RenderPartial("Comments", Model.Comments); %>
</div>
<div id="issue-comment-form">
<form id="form-comments-<%= Html.Encode(Model.Issue.IssueId) %>" class="post-comments">
<table><tr><td><textarea class="wmd-ignore" name="comment" cols="68" rows="3" id="form-comment-<%= Html.Encode(Model.Issue.IssueId) %>"></textarea>
<input type="submit" value="Add Comment" /></td></tr><tr><td><span class="text-counter"></span>
<span class="form-error"></span></td></tr></table>
</form></div>
</fieldset>
<script type="text/javascript">
$(document).ready(function() {
$("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>").submit(function(evt) {
var frm = $("#form-comments-<%= Html.Encode(Model.Issue.IssueId) %>");
var action = frm.attr("action");
var serializedForm = frm.serialize();
var comments = jQuery.trim($("#form-comment-<%= Html.Encode(Model.Issue.IssueId) %>").val());
if (comments.length < 1)
return;
AjaxPostComment("<%= Html.Encode(Model.Issue.IssueId) %>", comments);
});
});
function AjaxPostComment(issueId, comments) {
$.ajax({
type: "POST",
url: "/Home/" + "AddComment",
dataType: "html",
data: {
comment: comments,
id: issueId
},
success: function(v) {
RefreshComment(v);
},
error: function(v, x, w) {
//Error
alert('error: ' + v);
alert('error: ' + x);
alert('error: ' + w);
return false;
}
});
}
function RefreshComment(v) {
$("div#issueComments").html(v);
return false;
if (v == "true") {
$("#issueComments").load("CommentHistory");
//$("div#issueComments").html(v);// does this work?
}
else {
}
}
</script>
IssuePageViewModel
public class IssuePageViewModel
{
public IEnumerable<Issue> Issues { get; private set; }
public IEnumerable<Comment> Comments { get; private set; }
public Issue Issue { get; private set; }
public IssuePageViewModel(Issue issue, IEnumerable<Comment> issueComments)
{
this.Issue = issue;
this.Comments = issueComments;
}
}
HomeController.cs
MyMVCSamplesDBEntities _db;
public HomeController()
{
_db = new MyMVCSamplesDBEntities();
}
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
ViewData.Model = (from i in _db.Issue select i).ToList();
return View();
}
public ActionResult About()
{
return View();
}
public ActionResult Details(int? id)
{
Issue issue = _db.Issue.First(i => i.IssueId == id);
var comments = _db.Comment.Where(x => x.IssueId == id).ToList();
IssuePageViewModel viewData = new IssuePageViewModel(issue, comments);
return View(viewData);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddComment(int id, string comment)
{
Comment com = new Comment();
com.Comment1 = comment;
com.CommentId = id;
com.IssueId = id;
_db.AddToComment(com);
_db.SaveChanges(true);
var comments = _db.Comment.Where(x => x.IssueId == id).ToList();
ViewData["NewComments"] = comments;
if (Request.IsAjaxRequest())
{
return PartialView("Comments", ViewData["NewComments"]);
}
else
{
return View();
}
}
主人
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
</head>