title: How to post data to ASP.NET MVC controller using AJAX?
body: <p>I wanted to send <code>Mobile</code> number and <code>EmailID</code> using jQuery AJAX to my MVC controller to check whether these details are already exist in the database or not.</p>
  
  <p>When I am using the <code>[HttpPost]</code> attribute on my action method, I am getting error as:</p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at url.</p>
  </blockquote>
  
  <p>If I remove the <code>[HttpPost]</code> attribute, my action method is getting called, but all the values received in action method argument are <code>null</code>.</p>
  
  <p>Below is the action method code:</p>
  
  <pre><code>public class LogOnModel
  {
      public string Mobile { get; set; }
      public string EmailID { get; set; }
  }
  
  [HttpPost]
  [AllowAnonymous]
  ///AJAXService/LogOnAjax
  public ActionResult LogOnAjax(LogOnModel obj)
  {
      return Json(true);
  }
  </code></pre>
  
  <p>Below is my AJAX call:</p>
  
  <pre><code>var LoginModel = {
      'Mobile': "ASH",
      'EmailID': "MITTAL",
  };
  $.ajax({
      url: 'http://localhost:51603/AJAXService/LogOnAjax',
      type: 'GET',
      contentType: 'application/json',
      dataType: 'jsonp',
      data: JSON.stringify(LoginModel),
      success: function (result) {
          if (result == true) {
              window.location = "/Dashboard";
          } else {
              $QuickLoginErrors.text(result);
          }
      }
  });
  </code></pre>
  
  <p>I have placed the code below in my web.config file to avoid CORS errors:</p>
  
  <pre><code>&lt;customHeaders&gt;
      &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
      &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
      &lt;add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /&gt;
  &lt;/customHeaders&gt;
  </code></pre>