How to perform the following ajax request on jQuer

Question

I've created a jQuery Accordion using Asp.Net MVC, and it's working fine. The accordion displays a list of employee names, and when I click on an item, it shows the details. I'd like to send an AJAX request to get the employee details when they click on an item, instead of loading all the employee details at once. Please look at my code below.

Also, please tell me how to keep the first item in the accordion collapsed instead of showing the details, and is there any way to move the heading a bit to the right without using &nbsp?

<div id="accordion">
    @foreach (var item in Model.Employees)
    {   
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;@item.EmployeeName</h3>
        <div id = "accordiondiv">
            <p>Address: @item.Address</p>
            <p>Town: @item.Town</p>
            <p>Postcode: @item.PostCode</p>
            <p>PhoneNumber: @item.PhoneNumber</p>
        </div>                                       
    }
</div>

<script>
$(function () {
    $("Accordion").click(function (evt) { 
                $.ajax({
                url: "/Accordion/GetEmployeeDetails",
                type: 'POST',
                data:
             //need code to pass the employeeid that was clicked on the accordion,
                success: function (data) {
                    $.each(data, function (i, val) {                       
            //need code to populate the respective accordion with the employee details
                    });
                } 
            });
        } 
    });
</script>

Answer 1

Here's a sample to send an AJAX request to the controller:

<div id="accordion">
    @foreach (var item in Model.Employees)
    {   
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;@item.EmployeeName</h3>
        <div id = "accordiondiv" data-id="@item.EmployeeId">
            <p>Address: @item.Address</p>
            <p>Town: @item.Town</p>
            <p>Postcode: @item.PostCode</p>
            <p>PhoneNumber: @item.PhoneNumber</p>
            <p><input type="button" id="Accordion" class="btn" name="Accordion" /></p>
        </div>
    }
</div>

<script>
$(function () {
    $(".btn").each(function (){
        var button = $(this);
        var parentDiv = button.parent();
        var employeeId = parentDiv.attr("data-id");

        button.click(function (){
            $.ajax({
                url: "/Accordion/GetEmployeeDetails",
                type: 'POST',
                data: { employeeId : employeeId},               
                success: function (data) {
                    $.each(data, function (i, val) {                       
                    //need code to populate the respective accordion with the employee details
                    });
                } 
            }); 
        });
    });
</script>

And in your controller:

[HttpGet]
public ActionResult GetEmployeeDetails(int employeeId)
{          
    // code: get the details based on employeeId
    var detail = new Model.EmployeeDetail();

    return Json(detail, JsonRequestBehavior.AllowGet);
}

Answer 2

Thiago's implementation seems like it should work. However, I would create a partial view _EmployeeDetails with how you want the details to look, based on the Employee model,

@model Employee

<p>Address: @item.Address</p>
<p>Town: @item.Town</p>
<p>Postcode: @item.PostCode</p>
<p>PhoneNumber: @item.PhoneNumber</p>

In your controller you'll return it as such,

public ActionResult GetEmployeeDetails(int employeeId)
{          
    ...
    var employee = Repository.GetEmployee(employeeId);

    return PartialView("_EmployeeDetails", employee);
}

Which result you can use to the set the content of each <div id="accordionDiv"> on the AJAX response,

<script>
$(function () {
    $(".btn").each(function (){
        var button = $(this);
        var parentDiv = button.parent();
        var employeeId = parentDiv.attr("data-id");

        button.click(function (){
            $.ajax({
                url: @Url.Action("GetEmployeeDetails"),
                type: 'POST',
                data: { employeeId : employeeId },              
                success: function (data) { parentDiv.html(data); }
            });
        });
    });
</script>