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

我有一个页面有三个表单域(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;
    });
});

解决方法:

脚本中有许多错误会导致失败.

>您指定contentType：“application / json; charset = utf-8”,但是
不对数据进行字符串化(应删除该选项)
>您需要使用.val()(而不是.value)来获取值
输入
>您收到的数据不包含名为exists so的属性
你追加选项的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