La página es refrescante al hacer una llamada ajax jQuery para un ActionResult

Question

Mi página es refrescante cuando agrego un comentario en mi ejemplo. ¿Qué estoy haciendo mal?

Quiero que los comentarios en la página de detalles para actualizar sin actualizar la página.
Estoy tratando de hacer algo muy similar a cómo se añaden los comentarios aquí en StackOverflow.
Mi Details.aspx tiene una lista de cuestiones, cuando se hace clic se dirige a una página / Identificación detalles que muestra todos los Comentarios de la Emisión. Comentarios son cargados a través de un PartialView. Hay un formulario en la página de detalles que llama a un método ActionResult (AddComment) para añadir el comentario a la base de datos y devuelve una vista parcial.

Base de datos

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();
        }
    }

Maestro

<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

Método

Su forma jQuery submit () no impide la presentación efectiva se llevara a cabo. Que tiene que hacer evt.preventDefault(); algún lugar de esa función.

Answer 2

Hay un formulario en la página de detalles que llama a un método ActionResult (AddComment) para añadir el comentario a la base de datos y devuelve una vista parcial. Su método de forma submit() jQuery no impide la presentación efectiva se llevara a cabo. Que tiene que hacer evt.preventDefault(); algún lugar de esa función.

Answer 3

Probablemente voy a tomar algunas downvotes para esto, y ni siquiera he leído a través de cualquiera de su código, pero el 99% de las veces, "actualizaciones de página" y "Javascript" tiende a apuntar a un error de sintaxis Javascript en un controlador de eventos (por ejemplo, en este caso submit), o una falta de prevención de la acción predeterminada de un evento.