Html.RenderAction using AJAX

twal picture twal · Sep 13, 2010 · Viewed 10.1k times · Source

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.


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

Darin Dimitrov picture Darin Dimitrov · Sep 13, 2010

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