0
當我在示例中添加Comment時，我的頁面正在刷新。 我在做什麼錯？在對ActionResult進行jQuery ajax調用時頁面更新
我希望「詳細信息」頁面中的註釋更新而不刷新頁面。
我想做一些非常類似於在StackOverflow上添加註釋的方式。
我的Details.aspx有一個問題列表，當點擊進入顯示所有問題評論的詳情/ ID頁面時。評論通過partialview加載。在細節頁面上有一個窗體，它調用一個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
的Index.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>
Details.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>
:-)）謝謝。現在開始下一個任務。 – Picflight 2009-07-22 21:57:51