Html.RenderAction using AJAX

Question

Is it possible to use HTMl.RenderAction using ajax to provide the parameter?

I have a controller action like this

[ChildActionOnly]
Public ActionResult EmployeeData(string id)
{
    Employee employee = new Employee();
    //do work to get data

    Return PartialView(employee);

}

The partial view is just a small table with some employee data (name, address, etc)

I then have a page with a drop down list of employees with the data field being the id needed for EmployeeData(string id)

I would like to use ajax so when a employee is selected from a drop down list the EmployeeData partial view will appear below it without refreshing the page. Then again if another employee is selected.

though i am not sure how to do this, if it is possible. Thanks Please just ask if something is not clear.

---

as was recommended here is what I have now. (please don't mind that this is not the employee data example i mentioned above, that data is not ready in the DB and I have multiple areas that will do this same thing so I decided to work on this one today)

here is my the JS in my view

      $("#repList").change(function () {
        var id = $("#repList").val();
        $.ajax({
            url: '/Reporting/GetSalesTargets/' + id,
            success: function (result) {

                  $("#partialdiv").html(result);
            },
            error: function () {
                alert("error");
                }

        });
    });

I am getting to the controller action that will return the view, here is it.

 public ActionResult GetSalesTargets(string id)
    {
        int month = DateTime.Now.Month;
        SalesMarketingReportingService mktSrv = new SalesMarketingReportingService();

        SalesTargetModel model = mktSrv.GetRSMSalesTargetModel(id, month);

        return PartialView(model);
    }

Answer 1

It is possible but you have to remove the [ChildActionOnly] attribute. The it becomes a normal action that returns a partial view the you could invoke using AJAX:

$.ajax({
    url: '/home/employeedata/123',
    success: function(result) {
        $('#somedivid').html(result);
    }
});