Question

How to change this method to check the login and password and after it do not refresh the entire page where log form is (log form is in jQuery dialog). This method should not redirect me to /Home/Index or refresh whole page. Should just log me in, and then jQuery script should close dialog window.

AccountController:

[HttpPost]
    public ActionResult LogOnDialogForm(LogOnModel model, string returnUrl)
    {
        if (ModelState.IsValid)
        {
            if (Membership.ValidateUser(model.UserName, model.Password))
            {
                FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
                if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/")
                    && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\"))
                {
                    return Redirect(returnUrl);
                }
                else
                {
                    return RedirectToAction("Index", "Home");
                }
            }
            else
            {
                ModelState.AddModelError("", "The user name or password provided is incorrect.");
            }
        }

        // If we got this far, something failed, redisplay form
        return View("LogOn");
    }

jQuery script from view (where I had login button which opens dialog):

<script>
$(function () {
    $("#dialog:ui-dialog").dialog("destroy");

    var name = $("#name"),
        password = $("#password"),
        allFields = $([]).add(name).add(password),
        tips = $(".validateTips");

    function updateTips(t) {
        tips
            .text(t)
            .addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " +
                min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 380,
        width: 350,
        modal: true,
        buttons: {
            "Login": function () {
                var form = $('form', this);
                $(form).submit();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFields.val("").removeClass("ui-state-error");
        }
    });

    $("#login")
        .button()
        .click(function () {
            $("#dialog-form").dialog("open");
        });
});
</script>

View which contains form body:

    @model BlogNet.Models.LogOnModel

<p>
    @Html.ActionLink("Register", "Register") if you don't have an account.
</p>

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

@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

@using (Html.BeginForm("LogOnDialogForm", "Account", FormMethod.Post, new { @class = "dialogForm"}))
{
    <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>
}

Answer 1

You need to AJAXify your logon form. Right now it is a standard HTML <form> which when submitted POSTs the input fields to the server and refreshes the whole page.

So:

"Login": function () {
    var dialog = this;
    var form = $('form', dialog);
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
            if (result.success) {
                // authentication was successful 
                // Here you can close the dialog, redirect, refresh
                // some part of the DOM, whatever you want
                $(dialog).dialog("close");
            } else {
                // an error occurred => we refresh the dialog:
                $('#dialog-form').html(result);
            }
        }
    });
}

and you should also modify your controller action so that in the event of successful authentication it simply returns JSON instead of redirecting:

if (Membership.ValidateUser(model.UserName, model.Password))
{
    FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
    if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/")
        && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\"))
    {
        return Json(new { success = true, returnUrl = returnUrl });
    }
    else
    {
        return Json(new { success = true, returnUrl = Url.Action("Index", "Home") });
    }
}