title: Call a different Controller action from view of a controller though javascript
body: <p>I have a  Home controller whose view has a button.I want to call a controller named SearchSpace on button click.</p>
  
  <p>View :
                </p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
  
      var data = { "id": "1" }
  
      function search() {
          alert("hello" + JSON.stringify(data));
              $.ajax({
               url: '/SearchSpace/searchSpace',
               type: 'POST',
              dataType: "json",
              contentType: 'application/json',
              data: JSON.stringify(data),
              success: function (returnPayload) {
                  console &amp;&amp; console.log("request succeeded");
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  console &amp;&amp; console.log("request failed");
              }
  
          });
  
      }
   &lt;/script&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>   [HttpGet]
      public ActionResult searchSpace()
      {
   return View();
      }
  
      [HttpPost]
      public ActionResult searchSpace(SearchSpace search)
      {
          //code 
             return View();
      }
  </code></pre>
  
  <p>Route Config</p>
  
  <pre><code>         public class RouteConfig
  {
      public static void RegisterRoutes(RouteCollection routes)
      {
          routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
          routes.MapRoute(
              name: "Default",
              url: "{controller}/{action}/{id}",
              defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
          );
      }
  }
  </code></pre>
  
  <p>alert is calling but it is not moving to SearchSpace Controller..
  Please help me.</p>