0
Meine Seite wird aktualisiert, wenn ich in meinem Beispiel einen Kommentar hinzufüge. Was mache ich falsch?Die Seite wird aktualisiert, wenn ein jQuery-Ajax-Aufruf an ein ActionResult gesendet wird
Ich möchte die Kommentare auf der Detailseite aktualisieren, ohne die Seite zu aktualisieren.
Ich versuche etwas sehr ähnliches zu tun, wie die Kommentare hier auf StackOverflow hinzugefügt werden.
Meine Details.aspx hat eine Liste von Problemen, wenn geklickt wird, geht auf eine Details/ID-Seite, die alle Kommentare des Problems zeigt. Kommentare werden über eine Teilansicht geladen. Auf der Detailseite befindet sich ein Formular, das eine ActionResult-Methode (AddComment) aufruft, um den Kommentar zur Datenbank hinzuzufügen, und eine Teilansicht zurückgibt.
Datenbank
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();
}
}
Meister
<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>
:-)) Danke. Jetzt zur nächsten Aufgabe. – Picflight