如何在jQuery Accordion上执行以下ajax请求？

Question

我使用Asp.Net MVC创建了一个jQuery Accordion，它工作正常。手风琴显示员工姓名列表，当我点击一个项目时，会显示详细信息。我想发送一个AJAX请求，以在点击某个项目时获取员工详细信息，而不是一次加载所有员工详细信息。请看下面的代码。

另外，请告诉我如何保持折叠式手风琴中的第一个项目而不是显示细节，并且有没有任何方法将标题向右移动一点而不使用&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

下面就来发送一个AJAX请求到控制器的样品：

<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> 

而在你的控制器：

[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

蒂亚戈的实现好像它应该工作。不过，我想创建一个局部视图_EmployeeDetails你想要怎样的细节看，基于该模型Employee，

@model Employee 

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

在你的控制器，你会回到它是这样，

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

    return PartialView("_EmployeeDetails", employee); 
} 

哪结果你可以用来设置每个<div id="accordionDiv">对AJAX响应的内容，

<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>