Redirect to jQuery Dialog after Action call

Redirect to jQuery Dialog after Action call

I have an asp.net MVC website (Visual Studio 2012, C#) that users can log
into. When they click the "Login" link, it opens a jQuery dialog which
renders a partial login view. I can get the dialog to post to the right
action and controller but I need help with redirecting back to the dialog
screen if the username/password combination is invalid. I already have the
error checking on the Submit button to check if a value exists in both
before proceeding but need help with the other part.
I'll do my best to explain how the website is laid out:
_HeaderPartial View
<header id="header" class="style2">
<link
href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")"
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")"
type="text/javascript"></script>
<script type="text/javascript">
var jq = jQuery.noConflict(true);
jq(document).ready(function ($) {
$("#ViewLogin").live("click", function (e) {
var url = $(this).attr('href');
$("#login_panel").dialog({
title: 'Client Login',
closeOnEscape: true,
autoOpen: false,
resizable: false,
height: 350,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
close: function (event, ui) {
$(this).dialog('destroy');
}
});
$("#login_panel").dialog('open');
return false;
});
});
</script>
<div class="container">
<!-- logo -->
<h1 id="logo"><a href="@Url.Action("Index", "Home")">
<img src="~/images/small_logo.png" alt="Logo"></a></h1>
<ul class="topnav navRight">
<li>&nbsp;</li>
@if (Session["LoggedIn"] == null ||
Convert.ToBoolean(Session["LoggedIn"])==false)
{
<li><a href="@Url.Action("ViewLogin", "Home")"
id="ViewLogin">LOGIN</a></li>
}
else
{
<li><a href="@Url.Action("LogOut", "Home")">LOGOUT</a></li>
}
</ul>
<other generic html markup omitted>
As you can see, the jQuery opens a dialog when the "Login" link is
clicked, which is a simple div named "login_panel":
_Layout View
<div id="login_panel" style="display: none"></div>
_Login View
@model MyApp.LoginViewModel
@{
Layout = null;
}
<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>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"
type="text/javascript"></script>
<div id="login_panel">
<div class="inner-container login-panel">
<h4>SIGN IN TO ACCESS YOUR ACCOUNT</h4>
@using (Html.BeginForm("Login", "Home", FormMethod.Post))
{
<div class="validation-text">
<h5>@Html.ValidationSummary()</h5>
</div>
<div>
@Html.LabelFor(x => x.Username)
@Html.TextBoxFor(x => x.Username, new { placeholder =
"Username..." })
</div>
<div>
@Html.LabelFor(x => x.Password)
@Html.PasswordFor(x => x.Password, new { placeholder =
"Password..." })
</div>
<br />
<button class="btn btn-danger" type="submit">LOG IN</button>
<div class="links"><a href="#"
onclick="ppOpen('#forgot_panel', '350');">FORGOT YOUR USERNAME
or PASSWORD?</a></div>
}
</div>
</div>
LoginViewModel
public class LoginViewModel
{
[Required(ErrorMessage = "Username is required.")]
public string Username { get; set; }
[Required(ErrorMessage = "Password is required.")]
public string Password { get; set; }
}
And the HomeController
public ActionResult ViewLogin()
{
return View("_Login");
}
public ActionResult LogOut()
{
Session["LoggedIn"] = false;
return RedirectToAction("Index", "Home");
}
[HttpPost]
public ActionResult Login(LoginViewModel model)
{
if (ModelState.IsValid)
{
using (ProPhysiqueContext db = new ProPhysiqueContext())
{
var user = db.Users
.Where(u => u.EmailAddress == model.Username &&
u.WebPassword ==
model.Password).FirstOrDefault();
if (user != null)
{
Session["LoggedIn"] = true;
return RedirectToAction("Index", "ClientStats");
}
}
}
ModelState.AddModelError("", "Invalid Username or Password.");
return PartialView("_Login", model);
}
So as you can see, I can get the dialog to render the _Login partial view
correctly and it will post to the Login action on the Home controller. I
just can't figure out how to reopen the dialog from within the Action. The
way it is now, the website redirects to _Login partial view on the main
page, not in a dialog.
ANY help is appreciated.