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

时间:2013-02-09 10:17:09

标签: asp.net-mvc jquery asp.net-mvc-2

我正在开发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获取成功或失败消息并显示为警报

请建议解决方案。

1 个答案:

答案 0 :(得分:0)

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