在 jquery 按钮单击中获取 jsonresult 操作结果

Question

我正在开发 asp.net MVC 2 应用程序。我有这样的表格：

<% 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>
                            <%} %>

我在 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");
                }
            });

和控制器是这样的：

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

actionresult SaveCallRecording 执行后，我想显示成功或失败消息。我该怎么做 ？如果我尝试 $.ajax，我需要使用 `data: { "item" : "value1" , ....} 手动形成表单数据。我尝试使用 $.post 但我也需要手动将数据传递给它。如果我将 btnCall 作为提交按钮而不是按钮，则验证失败。

我想：

1) 首先验证表单并在表单未验证时显示警报。 2) 将表单数据发布到 json Action 方法 SaveCallRecording 3) 从 Action Method 获取成功或失败消息并显示为警报

请提出解决方案。

Answer 1

您可以先将此表单放在部分 (_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>
<% } %>

此外，如果您希望能够进行一些验证，我建议您将此部分强类型化到您的 CallRecording 模型中，并使用 Html 帮助程序在此表单中生成输入字段。您还可以使用 validationMessageFor 帮助器为错误生成占位符。

然后你可以 AJAXify 这个表单：

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

并让您的控制器操作执行验证并返回 JsonResult（如果成功）或带有错误列表的 PartialView：

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