MVC / AJAX 向控制器发送数据并在同一视图中加载响应

Question

我有一个包含三个表单字段（2 个文本框、1 个下拉菜单）、一个提交按钮和一个“刷新”链接的页面。我希望能够单击链接并将两个表单文本框值传递给控制器​​操作，并获取值列表以填充下拉框。我不想在这个阶段提交表单。

目前，我已经设法从链接单击调用控制器操作，但由于某种原因我无法传递两个表单字段值。此外，返回的 JSON 只是将我带到一个新页面，而不是填充我的下拉列表。任何指针都会很棒，因为我是 javascript 和 MVC 的新手。我的代码如下；

控制器

public ActionResult Find(AddressFormViewModel model)
{
    ...
    var temp = new List<OptionModel>();
    temp.Add(new OptionModel {Id = item.Id, Value = item.desc});
    return Json(temp, JsonRequestBehavior.AllowGet);
}

HTML

@Html.TextBoxFor(x => Model.HouseNameInput, new { id = "HouseNameInput" })
@Html.TextBoxFor(x => Model.PostCodeInput, new { id = "PostCodeInput" })
@Html.ActionLink("Find","Find", "Address", new { houseInput = Model.HouseNameInput, postcodeInput = Model.PostCodeInput }, new { htmlAttributes = new { @class = "Find" } })

@Html.DropDownListFor(x => Model.AddressOption, Enumerable.Empty<System.Web.Mvc.SelectListItem>(), "-- Loading Values --", new {id = "AddressOptions"})

最后，我的 Javascript 方法从控制器操作中检索数据但不填充下拉列表（它在新页面中显示结果）。它也没有成功地将表单值发送到控制器操作。

    $(function () {
    $('.Find').click(function (evt) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("Find","AddressFormSurface")',
            cache: false,
            async: true,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: {
                houseNameInput: $("#HouseNameInput").value,
                postCodeInput: $("#PostCodeInput").value
            },
            success: function (data) {
                if (data.exists) {
                    var ddl = $('#AddressOptions');
                    ddl.empty();

                    data.each(function () {
                        $(document.createElement('option'))
                            .attr('value', this.Id)
                            .text(this.Value)
                            .appendTo(ddl);
                    });
                }
            },
            error: function (req) {

            }
        });

        // we make sure to cancel the default action of the link
        // because we will be sending an AJAX call
        return false;
    });
});

Answer 1

您的脚本中有许多错误会导致它失败。

1. 您指定contentType: "application/json; charset=utf-8",，但执行 不将数据字符串化（应删除该选项）
2. 您需要使用.val()（不是.value）来获取 输入
3. 您收到的数据不包含名为exists 的属性，所以 您附加选项的if 块将永远不会被命中

此外，没有必要使用@Html.ActionLink() 生成链接（您根据模型的初始值添加路由值）。而是手动创建它

<a href="#" id="find">Find</a>

并将脚本更改为

var ddl = $('#AddressOptions'); // cache it
$('#find').click(function () { // change selector
    $.ajax({
        type: 'GET', // its a GET, not a POST
        url: '@Url.Action("Find","AddressFormSurface")', // see side note below
        cache: false,
        async: true,
        dataType: "json",
        data: {
            houseNameInput: $("#HouseNameInput").val(),
            postCodeInput: $("#PostCodeInput").val()
        },
        success: function (data) {
            if (!data) {
                // oops
                return;
            }
            ddl.empty();
            $.each(data, function(index, item) {
                $(document.createElement('option'))
                    .attr('value', item.Id)
                    .text(item.Value)
                    .appendTo(ddl);
                // or ddl.append($('<option></option>').text(item.Value).val(item.Id));
            });
        },
        error: function (req) {
            ....
        }
    }
});

旁注：还要检查控制器的名称。您的 Html.ActionLink() 建议使用它的 AddressController，但您的脚本正在调用 AddressFormSurfaceController