Passa un parametro a un controller usando jquery ajax

Ho creato una vista e un controller, il controller che sto cercando di restituire alcuni risultati di ricerca. Sto chiamando il controller 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"); } }); }); 

Il mio controller è come questo

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

Il mio problema è che non sono sicuro di come ottenere la variabile dalla mia chiamata jquery nel controller, ho inserito un breakpoint sul controller e il suo stato è stato colpito, tuttavia la stringa di input è sempre nullo.

Cosa ho fatto di sbagliato?

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

e quindi discretamente AJAXify questo link in un file javascript separato:

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

dove l’azione del tuo controller potrebbe essere simile a questa:

 [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" }); } 

La Via è qui.

Se vuoi specificare

dataType: ‘json’

Quindi 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"); } }); 

Se non si specifica

dataType: ‘json’

Quindi utilizzare

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

Se vuoi specificare

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

Quindi utilizzare

 $.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."); } }); 

Il problema è che, per funzionare correttamente, DefaultModelBinder deve corrispondere al parametro in base al nome. Puoi cambiare il nome del tuo parametro di azione con il nome di “id” nella tua route predefinita, che è “id” di default, quindi fallo;

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

Oppure, potresti scrivere tu stesso la stringa Json per costruirla in un modo che verrebbe abbinato sul lato server;

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

Questo non è testato ma dovrebbe funzionare.