使用jquery ajax将参数传递给控制器

我创建了一个视图和一个控制器，控制器我想要返回一些搜索结果。 我使用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"); } }); }); 

我的控制器看起来像这样

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

我的问题是我不知道如何从我的jquery调用中获取变量到控制器中，我在控制器上放置了一个断点并且它已被命中，但输入字符串始终为null。

我做错了什么？

Answer 1

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

然后在一个单独的javascript文件中不引人注意地AJAXify此链接：

 $(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

方式就在这里。

如果要指定

dataType：’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"); } }); 

如果你没有指定

dataType：’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"); } }); 

如果要指定

dataType：’json’和contentType：’application / 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."); } }); 

Answer 3

问题是为了让DefaultModelBinder工作，它需要按名称匹配参数。 您可以将操作参数的名称更改为默认路由中“id”的名称，默认情况下为“id”，然后执行此操作;

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

或者，您可以自己编写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"); } }); }); 

这是未经测试但应该有效。