Asp.net MVC 2 - Returned Json object not being picked up in javascript?

Update: I've removed the datatype="html" completely and hoping the return value will always get evaluated - but right now nothing happens.

I've also added the code that calls the "openModal" function. It is in the LogOn UserControl contained in the Site.Master. Hope this clears up a few things

It seems like from the Controller is not returning the json object back to the ajax caller, something is lost somewhere - i am never hitting that break point..it skips it entirely

I have a simple modal for logins, so i call the LogOn Action like this:

<div id="logonForm">         
     <% using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions{UpdateTargetId = "logonForm"})) { %>
          //my login form
<% } %>
</div>

And the Action looks like this:

       [HttpPost]
    public ActionResult LogOn(LogOnModel model, string returnUrl)
    {
       //success login
       if (Request.IsAjaxRequest())
           return Json(new { Url = Url.Action("Index", "Home") }, JsonRequestBehavior.AllowGet);
       else
           return RedirectToAction("Index", "Home");                               
    }

At this point it retursthe new Json object with the Url to the User Control (in Site.Master), to the javascript here:

    <script type="text/javascript">
        function ope开发者_如何学运维nModel() {
            $.ajax({
                type: "get",
                url: '/Account/LogOn',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                //  async: true,  
                success: function (result) {
                    debugger;
                    if (typeof result == 'string') {
                        $.modal(result, {
                            closeHTML: "",
                            containerId: "login-container",
                            overlayClose: true
                        });
                    }
                    else if (result.Url) {
                        debugger;
                        window.location.href = result.Url;
                    }
                }
            });

        }

</script>

<% if (Request.IsAuthenticated) { %>
        Welcome <b><%: Page.User.Identity.Name %></b>!
         <%: Html.ActionLink("Log Out", "LogOff", "Account") %>         
<% } else { %> 
         <a href="javascript:openModel()">Log In</a> 
<% } %>

...but the javacript never catches it..i cannot see whats in the "result", the screen renders an "{Url: /}" - just weird behavior

What am i missing? the debugger; break is triggered when i first click the link, but when i try to submit form, it goes thru the LogOn Controller - tries to return the json object, but never goes back to the javascript

Thanks much

JQuery will not treat the call as returning json, because you have told it the call is returning html. You need to change your dataType to json.

However it isn't clear where you expect openModel to be called from. The code as it is will use the Microsoft AJAX code and insert the returned data into the page, which is why you are seeing your json appear on the page.

You need to overwrite the submit click to call your custom jQuery ajax function. Right now it will use the Microsoft ajax. This is why your ajax function never gets called.

Do something like:

$('form').unbind('submit').submit(function(){
    $.ajax({ type:'post', url: '/Account/LogOn', data: $(this).serialize(), 
       success: function(){
           if (result.Url)
               window.location.href = result.Url;
        }
    });
});

dataType: "html", should be be dataType: "json",, and this should solve the problem.

Well jQuery will never trigger the success callback, since you specified dataType: "html",, so it will wait for an text/html response, but you're sending JSON.

You need to use "json" as the dataType.

See: http://api.jquery.com/jQuery.ajax/