I'm trying to do a form submit to my controller through jQuery Ajax. The following code works for the most part, however, the ThreadId parameter does not get passed. If I call the controller directly without using jQuery, it gets passed, but when using jquery, I don't see the ThreadId after form.serialize(). WHat would be the easiest way to pass parameters (like ThreadId) to jQuery form post?

ASPX

<% Html.BeginForm("AddComment", "Home", new { ThreadId = Model.Id },
   FormMethod.Post, new { @id = "AddComment" + Model.Id.ToString(),
   @onsubmit = "javascript:AddComment(this);return false" }); %>
<%: Html.TextBox("CommentText", "", new { @class = "ment-textbox" })%>
<input id="Comment" type="submit" name="submitButton" value="Post Comment" />   
<% Html.EndForm(); %>

JavaScript

    AddComment = function (sender) {
    var form = $(sender);
    var data = form.serialize();
    $.ajax({
        type: "POST",
        url: "/Home/AddComment",
        data: data,
        dataType: "html",
        success: function (response) {
            alert(response);
        },
        error: function (error) {
            alert(error);
        }
    });
    return false;
};

CONTROLLER

    [HttpPost]
        public ActionResult AddComment(string submitButton, Comment ment)
        {
            ment.CreatedDate = DateTime.Now;
            ment.PosterId = LoggedInUser.Id;

            _repository.AddComment(ment);
            _repository.Save();

            if (Request.IsAjaxRequest())
            {
                return View("Comment", ment);
            }
            else
                return RedirectToAction("Index");
        }

I'm trying to do a form submit to my controller through jQuery Ajax. The following code works for the most part, however, the ThreadId parameter does not get passed. If I call the controller directly without using jQuery, it gets passed, but when using jquery, I don't see the ThreadId after form.serialize(). WHat would be the easiest way to pass parameters (like ThreadId) to jQuery form post?

ASPX

<% Html.BeginForm("AddComment", "Home", new { ThreadId = Model.Id },
   FormMethod.Post, new { @id = "AddComment" + Model.Id.ToString(),
   @onsubmit = "javascript:AddComment(this);return false" }); %>
<%: Html.TextBox("CommentText", "", new { @class = "ment-textbox" })%>
<input id="Comment" type="submit" name="submitButton" value="Post Comment" />   
<% Html.EndForm(); %>

JavaScript

    AddComment = function (sender) {
    var form = $(sender);
    var data = form.serialize();
    $.ajax({
        type: "POST",
        url: "/Home/AddComment",
        data: data,
        dataType: "html",
        success: function (response) {
            alert(response);
        },
        error: function (error) {
            alert(error);
        }
    });
    return false;
};

CONTROLLER

    [HttpPost]
        public ActionResult AddComment(string submitButton, Comment ment)
        {
            ment.CreatedDate = DateTime.Now;
            ment.PosterId = LoggedInUser.Id;

            _repository.AddComment(ment);
            _repository.Save();

            if (Request.IsAjaxRequest())
            {
                return View("Comment", ment);
            }
            else
                return RedirectToAction("Index");
        }

• c#
• javascript
• asp
• jquery
• asp-mvc

1 Answer 1

The ThreadId parameter is included in the action attribute of the form. When you are ajaxifying this form you are posting to /Home/AddComment and no longer supplying this parameter. You could do the following to ajaxify it:

$('#idofyourform').submit(function() {
    $.ajax({
        // use the method as defined in the <form method="POST" ... 
        type: this.method,

        // use the action as defined in <form action="/Home/AddComment?ThreadId=123"
        url: this.action,

        data: $(this).serialize(),
        dataType: 'html',
        success: function (response) {
            alert(response);
        },
        error: function (error) {
            alert(error);
        }
    });
    return false;
});

Another possibility is to include the ThreadId parameter inside the form as hidden field instead if putting it in the action attribute.