Question

I have a dropdown and when I select an item from it, I want to pass on the selected value to a function in a controller, query the db and auto load a text box with query results.

How do I use Ajax to make that call to the controller when there is onclick() event on the dropdown?

My dropdown and textbox in my aspx page is:

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

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

My function in controller is

 public ActionResult AsyncFocalPoint(Nullable<Guid> ApplicationSegmentGuid)
    {
        string tempEmail = UnityHelper.Resolve<IUserDirectory>().EmailOf();
        tempEmail = "[e-mail]" + 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

You could give your dropdown an id and url:

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

and then subscribe to the .change() event of the dropdown list unobtrusively and trigger the AJAX request:

$(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);
            }
        });
    });
});