Question

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

目前，我已设法通过链接点击调用控制器操作，但由于某种原因，我无法传递两个表单字段值。此外，返回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

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

您指定.val()，但确实如此没有字符串化数据（应该删除该选项）
您需要使用.value（而不是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，但您的脚本正在调用{{1}}

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

1 个答案: