Pagina è rinfrescante quando si effettua una chiamata AJAX jQuery per un ActionResult
-
19-09-2019 - |
Domanda
La mia pagina è rinfrescante quando aggiungo un commento nel mio esempio. Che cosa sto facendo di sbagliato?
Voglio che i commenti nella pagina Dettagli per aggiornare senza aggiornare la pagina.
Sto cercando di fare qualcosa di molto simile a come i commenti che vengono aggiunti qui su StackOverflow.
La mia Details.aspx ha un elenco di problemi, quando si fa clic va a una pagina / id Dettagli che mostra tutti i commenti del problema. I commenti sono caricati tramite un PartialView. C'è una forma nella pagina dei dettagli, che chiama un metodo ActionResult (addComment) per aggiungere il commento al database e restituisce una vista parziale.
database
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();
}
}
Master
<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>
Soluzione
Il modulo di jQuery submit () non impedisce la consegna effettiva di prendere posto. Hai bisogno di fare evt.preventDefault();
da qualche parte in quella funzione.
Altri suggerimenti
C'è una forma nella pagina dei dettagli, che chiama un metodo ActionResult
(AddComment
) per aggiungere il commento al database e restituisce una vista parziale. Il tuo metodo forma submit()
jQuery non impedisce la consegna effettiva di prendere posto. Hai bisogno di fare evt.preventDefault();
da qualche parte in quella funzione.
Io probabilmente fare qualche downvotes per questo, e non ho nemmeno letto attraverso qualsiasi del codice, ma il 99% del tempo, "pagina viene aggiornata" e "Javascript" tende a puntare a un errore di sintassi JavaScript in un gestore di eventi (ad esempio, in questo caso submit
), o un fallimento per evitare che l'azione predefinita di un evento.