Pasar un parámetro a un controlador usando jquery ajax

He creado una vista y un controlador, el controlador que quiero devolver algunos resultados de búsqueda. Estoy llamando al controlador usando jquery

 Search  $("#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"); } }); }); 

Mi controlador se ve así

  [HttpPost] public ActionResult Search(string input) { var result = _db.Ingredients.Where(i => i.IngredientName == input); return new JsonResult() {Data = new {name="Hello There"}}; } 

Mi problema es que no estoy seguro de cómo obtener la varible de mi llamada jquery en el controlador, he puesto un punto de interrupción en el controlador y ha sido golpeado, sin embargo, la cadena de entrada siempre es nula.

¿Qué he hecho mal?

  @Html.ActionLink("Search", "Search", "Ingredients", null, new { id = "search" }) 

y luego discretamente AJAXify este enlace en un archivo javascript separado:

 $(function() { $("#search").click(function () { $.ajax({ url: this.href, type: 'POST', data: { input: $('#caption').val() }, success: function (result) { alert(result.name); }, error: function () { alert("error"); } }); return false; }); }); 

donde su acción de controlador podría verse así:

 [HttpPost] public ActionResult Search(string input) { var result = _db.Ingredients.Where(i => i.IngredientName == input); // TODO: Use the result variable in the anonymous object // that is sent as JSON to the client return Json(new { name = "Hello There" }); } 

El Camino está aquí.

Si quieres especificar

dataType: ‘json’

Entonces usa,

 $('#ddlIssueType').change(function () { var dataResponse = { itemTypeId: $('#ddlItemType').val(), transactionType: this.value }; $.ajax({ type: 'POST', url: '@Url.Action("StoreLocationList", "../InventoryDailyTransaction")', data: { 'itemTypeId': $('#ddlItemType').val(), 'transactionType': this.value }, dataType: 'json', cache: false, success: function (data) { $('#ddlStoreLocation').get(0).options.length = 0; $('#ddlStoreLocation').get(0).options[0] = new Option('--Select--', ''); $.map(data, function (item) { $('#ddlStoreLocation').get(0).options[$('#ddlStoreLocation').get(0).options.length] = new Option(item.Display, item.Value); }); }, error: function () { alert("Connection Failed. Please Try Again"); } }); 

Si no especifica

dataType: ‘json’

Entonces usa

 $('#ddlItemType').change(function () { $.ajax({ type: 'POST', url: '@Url.Action("IssueTypeList", "SalesDept")', data: { itemTypeId: this.value }, cache: false, success: function (data) { $('#ddlIssueType').get(0).options.length = 0; $('#ddlIssueType').get(0).options[0] = new Option('--Select--', ''); $.map(data, function (item) { $('#ddlIssueType').get(0).options[$('#ddlIssueType').get(0).options.length] = new Option(item.Display, item.Value); }); }, error: function () { alert("Connection Failed. Please Try Again"); } }); 

Si quieres especificar

dataType: ‘json’ y contentType: ‘application / json; charset = utf-8 ‘

Entonces usa

 $.ajax({ type: 'POST', url: '@Url.Action("LoadAvailableSerialForItem", "../InventoryDailyTransaction")', data: "{'itemCode':'" + itemCode + "','storeLocation':'" + storeLocation + "'}", contentType: "application/json; charset=utf-8", dataType: 'json', cache: false, success: function (data) { $('#ddlAvailAbleItemSerials').get(0).options.length = 0; $('#ddlAvailAbleItemSerials').get(0).options[0] = new Option('--Select--', ''); $.map(data, function (item) { $('#ddlAvailAbleItemSerials').get(0).options[$('#ddlAvailAbleItemSerials').get(0).options.length] = new Option(item.Display, item.Value); }); }, error: function () { alert("Connection Failed. Please Try Again."); } }); 

El problema es que para que DefaultModelBinder funcione debe coincidir con el parámetro por nombre. Puede cambiar el nombre de su parámetro de acción por el nombre de “id” en su ruta predeterminada, que es “id” por defecto, luego haga esto;

  $("#search").click(function () { alert('called'); var url = '/Ingredients/Search/' + $('#search').val(); $.ajax({ url: url, type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { alert(data); }, error: function () { alert("error"); } }); }); 

O bien, podría escribir la cadena Json usted mismo para construirla de una manera que se correspondería con el lado del servidor;

  $("#search").click(function () { alert('called'); var p = { "input": $('#search').val() }; $.ajax({ url: '/Ingredients/Search', type: "POST", data: p, dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { alert(data); }, error: function () { alert("error"); } }); }); 

Esto no se ha probado, pero debería funcionar.