使用jquery ajax將參數傳遞給控制器​​

Question

我已經創建了一個視圖和一個控制器，我想要返回一些搜索結果的控制器。我使用的呼叫控制器的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"); 
        } 
       }); 
      }); 

我的控制器看起來像這樣

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

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

我的問題是我不知道怎麼去從我的jQuery呼叫varible到控制器，我已經把控制器上的斷點和它被擊中，但輸入字符串始終爲空。

我做錯了什麼？

Answer 1

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

，然後悄悄地AJAXify這個鏈接在一個單獨的JavaScript文件：

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

在您的控制器的動作看起來是這樣的：

[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

問題是爲了使DefaultModelBinder工作，它需要按名稱匹配參數。您可以將您的動作參數的名稱更改爲默認路由中「id」的名稱，默認爲「id」，然後執行此操作;或者，您可以自己編寫Json字符串，以便在服務器端以匹配的方式構建Json字符串;

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

這是未經測試，但應該工作。

Answer 3

的方式是在這裏。

如果你想指定

數據類型： 'JSON'

然後使用，

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

如果不指定

數據類型：「JSON '

然後使用

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

如果你想指定

數據類型： 'JSON' 和 的contentType：「應用/ JSON的;字符集= UTF-8'

然後用

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