title: Returning Json object from controller action to jQuery
body: <p>I'm attempting to get this working properly (2 days now). I'm working on a log in where I'm calling the controller action from jQuery, passing it a JSON object (utilizing json2.js) and returning a Json object from the controller. I'm able to call the action fine, but instead of being able to put the response where I want it it just opens a new window with this printed on the screen:</p>
  
  <pre><code>{"Message":"Invalid username/password combination"}
  </code></pre>
  
  <p>And the URL looks like <em>http://localhost:13719/Account/LogOn</em> so instead of calling the action and not reloading the page it's taking the user to the controller, which isn't good.</p>
  
  <p>So now for some code, first the controller code</p>
  
  <pre><code>[HttpPost]
  public ActionResult LogOn(LogOnModel model, string returnUrl = "")
  {
      if (ModelState.IsValid)
      {
          var login = ObjectFactory.GetInstance&lt;IRepository&lt;PhotographerLogin&gt;&gt;();
  
          var user = login.FindOne(x =&gt; x.Login == model.Username &amp;&amp; x.Pwd == model.Password);
  
          if (user == null)
              return Json(new FailedLoginViewModel { Message = "Invalid username/password combination" });
          else
          {
              if (!string.IsNullOrEmpty(returnUrl)) 
                  return Redirect(returnUrl);
              else 
                  return RedirectToAction("Index", "Home");
          }
      }
      return RedirectToAction("Index", "Home");
  }
  </code></pre>
  
  <p>And the jQuery code</p>
  
  <pre><code>$("#signin_submit").click(function () {
      var login = getLogin();
      $.ajax({
          type: "POST",
          url: "../Account/LogOn",
          data: JSON.stringify(login),
          dataType: 'json',
          contentType: 'application/json; charset=utf-8',
          error: function (xhr) {
              $("#message").text(xhr.statusText);
          },
          success: function (result) {
  
          }
      });
  });
  
  function getLogin() {
      var un = $("#username").val();
      var pwd = $("#password").val();
      var rememberMe = $("#rememberme").val();
  
      return (un == "") ? null : { Username: un, Password: pwd, RememberMe: rememberMe };
  }
  </code></pre>
  
  <p>In case you need to see the actual login form here that is as well</p>
  
  <pre><code>&lt;fieldset id="signin_menu"&gt;
      &lt;div&gt;
          &lt;span id="message"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;% Html.EnableClientValidation(); %&gt;    
      &lt;% using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { @id = "signin" }))
          {%&gt;
  
          &lt;% ViewContext.FormContext.ValidationSummaryId = "valLogOnContainer"; %&gt;
          &lt;%= Html.LabelFor(m =&gt; m.Username) %&gt;
          &lt;%= Html.TextBoxFor(m =&gt; m.Username, new { @class = "inputbox", @tabindex = "4", @id = "username" })%&gt;&lt;%= Html.ValidationMessageFor(m =&gt; m.Username, "*")%&gt;
          &lt;p&gt;
          &lt;%= Html.LabelFor(m=&gt;m.Password) %&gt;
          &lt;%= Html.PasswordFor(m =&gt; m.Password, new { @class = "inputbox", @tabindex = "5", @id = "password" })%&gt;&lt;%= Html.ValidationMessageFor(m =&gt; m.Password, "*")%&gt;
          &lt;/p&gt;
          &lt;p class="remember"&gt;
          &lt;input id="signin_submit" value="Sign in" tabindex="6" type="submit"/&gt;
          &lt;%= Html.CheckBoxFor(m =&gt; m.RememberMe, new { @class = "inputbox", @tabindex = "7", @id = "rememberme" })%&gt;
          &lt;%= Html.LabelFor(m =&gt; m.RememberMe) %&gt;
          &lt;p class="forgot"&gt; &lt;a href="#" id="forgot_password_link" title="Click here to reset your password."&gt;Forgot your password?&lt;/a&gt; &lt;/p&gt;
          &lt;p class="forgot-username"&gt; &lt;a href="#" id="forgot_username_link" title="Fogot your login name? We can help with that"&gt;Forgot your username?&lt;/a&gt; &lt;/p&gt;
          &lt;/p&gt;
          &lt;%= Html.ValidationSummaryJQuery("Please fix the following errors.", new Dictionary&lt;string, object&gt; { { "id", "valLogOnContainer" } })%&gt;
      &lt;% } %&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>The login form is loaded on the main page with</p>
  
  <pre><code>&lt;% Html.RenderPartial("LogonControl");%&gt;
  </code></pre>
  
  <p>Not sure if that has any bearing on this or not but thought I'd mention it.</p>
  
  <p><strong>EDIT:</strong> The login form is loaded similar to the Twitter login, click a link and the form loads with the help of jQuery &amp; CSS</p>