title: Return JSON with unobtrusive
body: <p>I have the following code where I use Ajax.Beginform:</p>
  
  <pre><code> &lt;div class="modal-body" style="text-align: center;"&gt;
              @using (Ajax.BeginForm("LogIn", "Home", null, new AjaxOptions
              {
                  HttpMethod = "POST",
                  InsertionMode = InsertionMode.Replace,
                  UpdateTargetId = "target",
                  OnSuccess = "ajaxSuccess"
              }, null))
              {
                  &lt;div class="sign_up_container"&gt;
                      Email:&lt;br /&gt;
                      @Html.EditorFor(x =&gt; x.Login.Email, new { htmlAttributes = new { @class = "sign_up_container_input_style" } })&lt;br/&gt;
                      @Html.ValidationMessageFor(x =&gt; x.Login.Email, null, new { @class = "text-danger" })
                  &lt;/div&gt;
                  &lt;div class="sign_up_container"&gt;
                      Password:&lt;br /&gt;
                      @Html.EditorFor(x =&gt; x.Login.Password, new { htmlAttributes = new { @class = "sign_up_container_input_style" } })
                      &lt;br/&gt;&lt;a href="#"&gt;Forgott password?&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="sign_up_container"&gt;
                      &lt;br /&gt;
                      &lt;button type="submit" class="btn_style_3 btn"&gt;Login&lt;/button&gt;
                  &lt;/div&gt;
              }
          &lt;/div&gt;
  </code></pre>
  
  <p>The validation works. When I enter a invalid email and hits Login, unobtrusive kicks In and says that I must enter a valid Email.</p>
  
  <p>However, now I want to show a message that says that the Username or password is invalid If the user enters a invalid username or password. I have tried to do like this in my LogIn-method:</p>
  
  <pre><code> [HttpPost]
      public async Task&lt;JsonResult&gt; Login(homeIndexViewModel model)
      {
          if(!ModelState.IsValid)
          {
              return Json(new { ModelState = "Something went wrong during login" });
          }
  
          var user = await userManager.FindAsync(model.Login.Email, model.Login.Password);
  
          if (user != null)
          {
              await SignIn(user);
              //return Json(new { RedirectAction = GetRedirectUrl(model.Login.ReturnUrl, user.UserId) }, JsonRequestBehavior.AllowGet);               
          }
  
          return Json(new { ModelState = "Invalid email or password" }, JsonRequestBehavior.AllowGet);
      } 
  </code></pre>
  
  <p>In my Index.cshtml I'm trying to catch the json like this:</p>
  
  <pre><code>   $(document).ready(function () {
          function ajaxSuccess(result) {
              console.log(result); //Contains error message, show It
          }
      });
  </code></pre>
  
  <p>The problem I have is that when I hit Login, I'm redirected to a white page with a json-string printed out with the message:</p>
  
  <p><a href="https://i.stack.imgur.com/zVtyk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zVtyk.png" alt="enter image description here"></a></p>