asp.net mvc ajax form helper/post additional data

Question

I would like to use the ajax helper to create ajax requests that send additional, dynamic data with the post (for example, get the last element with class = blogCommentDateTime and send the value of that last one to the controller which will return only blog comments after it).

I have successfully done so with the help of jQuery Form plugin like so:

 $(document).ready(function () {
        $("#addCommentForm").submit(function () {

            var lastCommentDate = $(".CommentDateHidden:last").val();
            var lastCommentData = { lastCommentDateTicks: lastCommentDate };
            var formSubmitParams = { data: lastCommentData, success: AddCommentResponseHandler }

            $("#addCommentForm").ajaxSubmit(formSubmitParams);
            return false;
        });

This form was created with html.beginform() method.

I am wondering if there is an easy way to do this using the ajax.beginform() helper?

When I try to use the same code but replace html.beginform() with ajax.beginform(), when i try to submit the form, I am issuing 2 posts (which is understandable, one being taken care of by the helper, the other one by me with the JS above. I can't create 2 requests, so this option is out)

I tried getting rid of the return false and changing ajaxSubmit() to ajaxForm() so that it would only "prepare" the form, and this leads in only one post, but it does not include the extra parameter that I defined, so this is worthless as well.

I then tried keeping the ajaxForm() but calling that whenever the submit button on the form gets clicked rather than when the form gets submitted (I guess this is almost the same thing) and that results in 2 posts also.

The biggest reason I am asking this question is that I have run in to some issues with the javascript above and using mvc validation provided by the mvc framework (which i will set up another question for) and would like to know this so I can dive further in to my validation issue.

Answer 1

    function beginPost() {
        $("form").ajaxSubmit({ data: { id: "idnum", random: "randomness"} });
        return false;         
    }


using (Ajax.BeginForm(new AjaxOptions{ UpdateTargetId = "TargetDiv", OnBegin = "beginPost" })

So far this is the best way I can come up with. It's a hack as it overrides the initial wiring that the ajax helper did for you and in the above example (it returns my partial view correctly, but the updatetargetid given in my ajax helper is not retained so it basically throws away the response, i could fix this setting this id in the .ajaxSubmit call, but this negates advantages of using the ajax helper) I think I will stick to my previous method of using jQuery form plugin with html helper to write out my forms. in the above example, i submit it manually with the call to .ajaxSubmit and then return false so that the page does not continue and post as the ajax helper had wired it to do so. My other method, which i think is a huge hack as well (and i did not even try) was to try to insert hidden fields dynamically inside the form with the name attribute set to what i wanted my additional data to be passed in to the controller and do this all in the beginPost method.

I'll stick to normal form and wiring it with jquery form plugin.