ASP.NET MVC 2 jquery dialog postback issue

Question

New to MVC here, I would like to have the login box working in a jquery dialog across the site by placing it on the master page.

I have wrapped the logOn.aspx form with a dialog div and added a button to open the dialog and some jq

<button id="show-sign-in">Sign In</button>  
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
modal: true
});
$('#show-sign-in').click(function () {
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="User Login">...</div>

Problems:

1. if I include the page in the master with RenderPartial, the controller's ActionResult won't catch the submit, unless the url has /Account in it.

   Html.RenderPartial("~/Views/Account/LogOn.aspx");

2. if I include it using with Ajax request (below) the submit goes through fine, however if the login attempt is invalid the page redirects to the actual LogOn page (I'd like to return them to the dialog).

   <script type="text/javascript">
   $(document).ready(function () {
       $.ajax({
           url: "/Account/LogOn",
           cache: false,
           success: function (html) {
               $("#logindisplay").append(html);
           }
       });
   });</script>
   

Bottom line, this is something I did a lot with ascx in web forms and I find it annoying to go through ajax gets and lots of js to do the same thing, am i approaching this completely wrong? any ideas?

Answer 1

Have you tried moving the LogOn.aspx to the Shared folder? That's where it should be if you expect to share the view across multiple controllers? If you're rendering it as a partial it should also derive from ViewUserControl instead of the default ViewPage. You may also need to update the default BeginForm signature to specify that it needs to go to the account controller and logon action since you're no longer rendering it directly from the LogOn() action itself.

One way to structure this is to have a LogOn view that renders your partial (shared) logon form (LogonForm.ascx). When the logon request comes in via an AJAX request, just render the form partial. If it comes from a normal request render the entire view. Your form should specify that it posts back explicitly to the account/logon action.

Answer 2

I'm having a bit hard time understanding exactly what do you want to do but if all you need is a modal dialog for Login, then it should work fine if you add some querystring parameters to your AJAX GET's and POST's like "?modal=true". Because that's what you want - you want your logon form to work traditionally and thru modal dialog. And when working through modal dialog it should also postback to modal, for instance, /Account/LogOn/?modal=true.

Also when you log in through the use of ASP.NET Forms authentication, I don't think you can do it without postback. So even if you do use modal dialog, after closing it, you would still need to do a page refresh.

At least that's how my current projects does it..