网页制作一个jQuery AJAX调用一个ActionResult时，令人耳目一新

Question

我的页面刷新时我在我的例子添加评论。 我在做什么错了？

我要在详细信息页面而无需刷新页面来更新的意见。结果 我试图做的非常相似，如何评论都在这里添加在计算器上的东西。结果 我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>

Answer 1

您jQuery的形式提交（）方法不会阻止实际提交的发生。你需要在某个地方的功能做evt.preventDefault();。

Answer 2

有是详细信息页，其调用ActionResult方法（AddComment）添加到数据库中的评论，并返回一个局部视图上的形式。您的jQuery的形式submit()方法不会阻止实际提交的发生。你需要在某个地方的功能做evt.preventDefault();。

Answer 3

我可能会采取一些downvotes对于这一点，我还没有通过任何代码的阅读，但是99％的时间，“页面刷新”和“使用Javascript”往往指向一个JavaScript语法错误的事件处理程序（例如，在这种情况下submit）或未能防止事件的默认动作。