title: Pass a parameter to a controller using jquery ajax
body: <p>I have created a view and a controller, the controller I am wanting to return some search results. I am calling the controller using jquery </p>
  
  <pre><code>   &lt;input type="text" id="caption" /&gt;
          &lt;a href="#" id="search"&gt;Search&lt;/a&gt;
          &lt;script&gt;
              $("#search").click(function () {
                  alert('called');
                  var p = { Data: $('#search').val() };
                  $.ajax({
                      url: '/Ingredients/Search',
                      type: "POST",
                      data: JSON.stringify(p),
                      dataType: "json",
                      contentType: "application/json; charset=utf-8",
                      success: function (data) {
                          alert(data);
                      },
                      error: function () {
                          alert("error");
                      }
                  });
              });
  </code></pre>
  
  <p>My controller looks like this</p>
  
  <pre><code> [HttpPost]
      public ActionResult Search(string input)
      {
          var result = _db.Ingredients.Where(i =&gt; i.IngredientName == input);
  
          return new JsonResult() {Data = new {name="Hello There"}};
      }
  </code></pre>
  
  <p>My problem is I am not sure how to get the varible from my jquery call into the controller, I have put a breakpoint on the controller and its been hit however the input string is always null.</p>
  
  <p>What have I done wrong?</p>