ajax - 调用 Controller 以基于下拉列表填充文本框，以便使用 Ajax 进行选择

Question

我有一个下拉列表，当我从中选择一个项目时，我想将所选值传递给 Controller ​​中的函数，查询数据库并自动加载带有查询结果的文本框。

当下拉列表中有 onclick() 事件时，如何使用 Ajax 调用 Controller ？

我的 aspx 页面中的下拉列表和文本框是:

 <%: Html.DropDownListFor(model => model.ApplicationSegmentGuid, Model.ApplicationSegment)%>

   <%: Html.TextAreaFor(model => model.EmailsSentTo, false, new { style = "width:500px;   height:50px;" })%>

我在 Controller 中的功能是

 public ActionResult AsyncFocalPoint(Nullable<Guid> ApplicationSegmentGuid)
    {
        string tempEmail = UnityHelper.Resolve<IUserDirectory>().EmailOf();
        tempEmail = "subbulakshmi.kailasam@lyondellbasell.com" + tempEmail;

        IList<string> EmailAddresses = new List<String>();

        using (TSADRequestEntities context = UnityHelper.Resolve<TSADRequestEntities>())
        {
            EmailAddresses = context.FOCALPOINTs.Where(T => T.APPLICATIONSEGMENT.ItemGuid == ApplicationSegmentGuid && T.FlagActive)
                      .Select(T => T.Email).ToList();
        }
        foreach (string emailAddress in EmailAddresses)
            tempEmail = tempEmail + ";" + emailAddress;

        return Json(tempEmail, JsonRequestBehavior.AllowGet);
    }

Answer 1

您可以为下拉菜单指定 ID 和 url:

<%= Html.DropDownListFor(
    model => model.ApplicationSegmentGuid, 
    Model.ApplicationSegment,
    new { id = "myddl", data_url = Url.Action("AsyncFocalPoint") }
) %>

然后订阅.change()下拉列表事件不显眼地触发 AJAX 请求:

$(function() {
    $('#myddl').change(function() {
        // get the selected value of the ddl
        var value = $(this).val();

        // get the url that the data-url attribute of the ddl
        // is pointing to and which will be used to send the AJAX request to
        var url = $(this).data('url');

        $.ajax({
            url: url,
            type: 'POST', 
            data: { applicationSegmentGuid: value },
            success: function(result) {
                // TODO: do something with the result returned by the server here
                // for example if you wanted to show the results in your textarea
                // you could do this (it might be a good idea to override the id
                // of the textarea as well the same way we did with the ddl):
                $('#EmailsSentTo').val(result);
            }
        });
    });
});