الصفحة هي منعشة عند إجراء استدعاء jQuery Ajax إلى ActionResult

Question

صفحتي منعش عند إضافة تعليق في مثالي. ما الخطأ الذي افعله؟

أريد التعليقات في صفحة التفاصيل للتحديث دون تحديث الصفحة.
أحاول أن أفعل شيئا مشابها للغاية حول كيفية إضافة التعليقات هنا على Stackoverflow.
لديك التفاصيل الخاصة بي. لديه قائمة بالمشكلات، عند النقر فوقها تذهب إلى صفحة / صفحة معرف تظهر جميع تعليقات المشكلة. يتم تحميل التعليقات عبر partialview. هناك نموذج في صفحة التفاصيل التي تستدعي طريقة ActionResult (الوصية) لإضافة التعليق إلى قاعدة البيانات وإرجاع طريقة عرض جزئية.

قاعدة البيانات

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>

التفاصيل .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>

ISSEPAGEVIEWMODEL.

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

ربما سألقي بعض الخلافات على هذا الأمر، وأنا لم أقرأ حتى من خلال أي من التعليمات البرمجية الخاصة بك، ولكن 99٪ من الوقت، "تحديث الصفحة" و "JavaScript" تميل إلى الإشارة إلى خطأ في بناء جملة JavaScript في معالج الأحداث (على سبيل المثال في هذه الحالة submit)، أو فشل في منع الإجراء الافتراضي للحدث.