Question

My page is refreshing when I add a Comment in my example. What am I doing wrong?

I want the comments in the Details page to update without refreshing the page.
I am trying to do something very similar to how the comments are added here on StackOverflow.
My Details.aspx has a list of Issues, when clicked goes to a Details/id page which shows all the Comments of the Issue. Comments are loaded via a partialview. There is a form on the details page which calls a ActionResult method (AddComment) to add the comment to the database and returns a partial view.

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>

Answer 1

Your jQuery form submit() method doesn’t prevent the actual submission from taking place. You need to do evt.preventDefault(); somewhere in that function.