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",// see side note below
        cache: false,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