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.

---

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

Vatican

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

Babyblueeyes

How do I display the partial though in the success function? – Vatican

$('#somedivid').html(result); where somedivid is the id of a DOM element that will harbor the result. – Babyblueeyes

Oh I see, I am sorry I missed the $('#somedivid'). Thank you I will try this! – Vatican

ok so I am doing this but I am not getting into the success function, I added an error function and I am getting there. How can I display what the thrown error is? I updated my question with the code I am working on now. – Vatican

Try stepping through the code. Probably there's an exception thrown inside the controller action. Also using FireBug could help you see what's sent and received from the server. – Babyblueeyes

i have gone through the controller action and no exception in thrown. it gets all the way down to the return statement. I cannot find any errors when using firebug (though I don't know how to use it all that well). – Vatican

Then maybe the error is thrown while rendering the view. Look at the response sent from the server in FireBug as well as the status code. The status code should be 200 when everything is OK. Another thing you might test is to directly call this action in your browser by typing /Reporting/GetSalesTargets/123. – Babyblueeyes

I clicked on the console in firebug and it says 500 internal server error so must be something with that view I think I can get it from here. Thanks a TON for your help. It is much appreciated! – Vatican

Right, now expand the details by clicking on the + and look at the Response tab. There you will see what the server sends as error. – Babyblueeyes

yup its working. it was a could not find the view error. I needed to modify the route just a bit and now that fixed it. thats awesome thanks a ton! – Vatican