Question

I have a little newbie problem that I cannot figure out, I am having a form that generated from a partial view from a asp.net controller, it is then displayed in a jquery dialog.

I have 2 buttons on the dialog (Save / Cancel)

On the save button, I want to serialize the inputs from the form to send it back to the Asp.net mvc actionController, however it doesn’ t seems to work, the actioncontroller does not getting the model object from Jquery Dialog, I am using Jquery Serialize function for the form.

Here is the Script code:

<button id="btnDialog">Account Logon</button>

<div id="Logonform"></div>

<script type="text/javascript">

    $(document).ready(function () {

        $.validator.unobtrusive.parse("#Logonform");

        $("#Logonform").dialog({
            autoOpen: false,
            modal: true,
            title: 'Login',

            buttons: {
                Save: function () {
                    alert($("#Logonform").serializeArray());
                    alert($("#Logonform").attr('UserName'));

                    $.ajax({
                        url: "@Url.Action("LogOn", "Account")",
                        type: "POST",
                        data: $("#Logonform").serialize(),
                        datatype: "JSON",
                        success: function (result) {
                            $("#Logonform").html(result).dialog('open');
                        }
                    });
                },

                Close: function () {
                    $(this).dialog('close');
                }
            }

        });

        $("#btnDialog").click(function () {
            $.ajax({
                url: "@Url.Action("LogOn", "Account")",
                type: "GET",
                success: function (result) {
                    $("#Logonform").html(result).dialog('open');
                }

                });
        });
    })

</script>

The controller:

    public ActionResult LogOn()
    {
        if (Request.IsAjaxRequest())
        {
            return PartialView("_Logon");

        }
        return View();
    }

    [HttpPost]
    public ActionResult LogOn(LogOnModel model)
    {
        if (ModelState.IsValid)
        {
            if (Membership.ValidateUser(model.UserName, model.Password))
            {
                FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
                return Json( new { result = "ok", user = model.UserName });
            }
            else
            {
                return PartialView("_Logon");
            }
        }

the view:

@model JqueryDialogTest.Models.LogOnModel


<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Models/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@Html.ValidationSummary(true, "Échec de la connexion. Corrigez les erreurs et réessayez.")

@using (Html.BeginForm()) {
    <div>
        <fieldset>
            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

        </fieldset>
    </div>
}

Any comment from you to point out what wrong would be very grateful

Cheers

Answer 1

Try changing your Logon action parameter from a LogonModel type to a string and deserializing it yourself in the action method using JavascriptSerializer. If that still does not work use Fiddler to see what (if anything) is being sent over in the POST.