使用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调用中获取变量到控制器中，我在控制器上设置了断点并触发了它，但输入字符串始终为null。

我做错了什么？

- Diver Dan

Answer 1

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

接下来，在一个独立的 JavaScript 文件中不引人注目地将此链接 AJAX 化：

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

- Darin Dimitrov

---

正确。解释一下：如果你在C#中的变量和你传递的JSON元素中使用的字段具有相同的名称，它们将自动绑定在一起。所以如果你将JSON属性更改为{ captionvalue: $('#caption').val() }，你还必须将函数中的变量重命名为captionvalue。这只是一些解释，让你明白为什么会这样工作 :-) - Flater

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

- Md. Nazrul Islam

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

这个尚未经过测试但应该可以工作。

- davidferguson

---

你好David， 我尝试了那个方法，但是没有成功。我更新了控制器参数，但它仍然返回为空。还有其他建议吗？ - Diver Dan

抱歉，我刚才意识到我使用的是搜索超链接中的值，而不是标题文本框中的值。因此，请尝试将行$("search").val()替换为$("caption").val()。 - davidferguson