вызов контроллера для заполнения текстового поля на основе раскрывающегося списка для выбора с использованием Ajax

Question

У меня есть раскрывающийся список, и когда я выбираю из него элемент, я хочу передать выбранное значение функции в контроллере, запросить в БД и автоматически загрузить текстовое поле с результатами запроса.

Как мне использовать Ajax для выполнения этого вызова к контроллеру, когда в раскрывающемся списке есть событие onclick ()?

Мои выпадающие и текстовые поля на моей странице aspx:

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

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

Моя функция в контроллере:

 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

Вы можете указать в раскрывающемся списке идентификатор и 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);
            }
        });
    });
});