Question

I am working on as asp.net MVC 2 application. I have a form like this:

<% using (Html.BeginForm("SaveCallRecording", "Recording", FormMethod.Post, new { id = "frmAddCallRecording", name = "frmAddCallRecording" }))
                           {%>

        <tr>
                                    <td>
                                    </td>
                                    <td>
                                        <input type="button" id="btnCall" title="Call" value="Call" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
                                        <input type="button" id="btnNewCall" title="New Call" value="New Call" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
                                    </td>
                                </tr>
                            </table>
                            <%} %>

I have this in document.ready

 $("#btnCall").click(function () {
                var CallStatus = $("#txtCallStatus").val();
                if (CallStatus == 'READY') {
                    if ($("#isUniquePassword").is(':checked') && $("#UniquePassword").val() == '') {
                        $("#dialog-RecipientEmail-error").dialog("open");
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "/account/getGenericPassword",
                            success: function (data) {
                                if (data == null || data == "") {
                                    if ($('#isGenericPassword').is(':checked')) {
                                        $("#dialog-add-generic-password").dialog("open");
                                    }
                                }
                                else {
                                         $("#frmAddCallRecording").submit();
                               //after this I want to show alert based on result                                   
                                }
                            }
                        });
                    } // end of isUniquePassword if
                } // end of call status if
                else if (CallStatus == 'NOT SET') {
                    $("#dialog-required-fields").dialog("open");
                }
            });

and controller is like this:

  [Authorize]
        [HttpPost]
        public JsonResult SaveCallRecording(CallRecording recording, FormCollection form)
        {
     return Json("record saved!");
            }

After actionresult SaveCallRecording is executed, I want to show success or fail message. How can I do it ? If I try $.ajax, I need to form form data manually using `data: { “item” : “value1” , ….}. I tried using $.post but I need to pass data to it manually as well. If I make btnCall as submit button instead of button, then validation fails.

I want to:

1) Validate form first and show alerts if form is not validated.
2) post form data to json Action method SaveCallRecording
3) Get success or fail message from Action Method and show as alert

Please suggest solution to it.

Answer 1

You could start by placing this form inside a partial (_SaveCallRecordingForm.ascx):

<% using (Html.BeginForm("SaveCallRecording", "Recording", FormMethod.Post, new { id = "frmAddCallRecording", name = "frmAddCallRecording" })) { %>
    <tr>
        <td></td>
        <td>
            <input type="button" id="btnCall" title="Call" value="Call" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
            <input type="button" id="btnNewCall" title="New Call" value="New Call" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />
        </td>
    </tr>
<% } %>

Also if you expect to be able to do some validations I would recommend you to make this partial strongly typed to your CallRecording model and use Html helpers to generate the input fields in this form. You could also use the validationMessageFor helper to generate placeholders for the errors.

And then you could AJAXify this form:

else {
    var $form = $("#frmAddCallRecording");
    $.ajax({
        url: $form.attr('action'), 
        type: $form.attr('method'),
        data: $form.serialize(),
        success: function(result) {
            if (result.success) {
                alert('Thanks for submitting');
            } else {
                $('#someContainerOfYourForm').html(result);
            }
        }
    });
}

and have your controller action perform the validation and return either a JsonResult (in case of success) or a PartialView with the list of errors:

[Authorize]
[HttpPost]
public ActionResult SaveCallRecording(CallRecording recording)
{
    if (!ModelState.IsValid)
    {
        // There were validation errors => let's redisplay the form
        return PartialView("_SaveCallRecordingForm", recording);
    }

    // at this stage we know that the model is valid => do some processing
    // and return a JsonResult to indicate the success
    return Json(new { success = true });
}