Pasar un parámetro a un controlador usando jquery ajax

Question

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

<input type="text" id="caption" /> 
     <a href="#" id="search">Search</a> 
     <script> 
      $("#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 tiene este aspecto

[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 una punto de interrupción en el controlador y su golpe, sin embargo, la cadena de entrada siempre es nula.

¿Qué he hecho mal?

Answer 1

<input type="text" id="caption" /> 
@Html.ActionLink("Search", "Search", "Ingredients", null, new { id = "search" }) 

y luego discretamente AJAXify este vínculo en un archivo JavaScript independiente:

$(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 del controlador podría tener este aspecto:

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

Answer 2

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, puede escribir la cadena Json usted mismo para construirla de una manera que coincida con la del 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.

Answer 3

El camino está aquí.

Si desea especificar

tipoDatos: 'json'

A continuación, utilice,

$('#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 se especifica

tipoDatos: 'JSON '

A continuación, utilice

$('#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 desea especificar

tipoDatos: 'json' y contentType: 'application/json; charset = UTF-8'

Entonces Use

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