Passer un paramètre à un contrôleur en utilisant jquery ajax

Question

J'ai créé une vue et un contrôleur, le contrôleur que je veux retourner quelques résultats de recherche. J'appelle le contrôleur en utilisant 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"); 
        } 
       }); 
      }); 

Mon contrôleur ressemble à ceci

[HttpPost] 
    public ActionResult Search(string input) 
    { 
     var result = _db.Ingredients.Where(i => i.IngredientName == input); 

     return new JsonResult() {Data = new {name="Hello There"}}; 
    } 

Mon problème est que je ne suis pas sûr de savoir comment obtenir le varible de mon appel jquery dans le contrôleur, je mets un point d'arrêt sur le contrôleur et son touché mais la chaîne d'entrée est toujours nulle.

Qu'ai-je fait de mal?

Answer 1

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

puis AJAXify ce lien discrètement dans un fichier JavaScript distinct:

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

où votre action du contrôleur pourrait ressembler à ceci:

[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

Le problème est que pour que DefaultModelBinder fonctionne, il doit correspondre au paramètre par son nom. Vous pouvez remplacer le nom de votre paramètre d'action par le nom de "id" dans votre route par défaut, qui est "id" par défaut, puis faites ceci; Ou bien, vous pouvez écrire vous-même la chaîne JSON pour la construire d'une manière qui serait adaptée au niveau du serveur;

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

Ceci n'a pas été testé, mais devrait fonctionner.

Answer 3

La voie est ici.

Si vous souhaitez spécifier

dataType: 'json'

utiliser ensuite

$('#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 vous ne spécifiez pas

dataType: « JSON '

Ensuite, utilisez

$('#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 vous souhaitez spécifier

dataType: 'json' et contentType: « application/json; charset = utf-8'

Utilisez ensuite

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