如何执行jQuery的手风琴以下ajax请求？(How to perform the followi

我已经使用Asp.Net MVC创建一个jQuery手风琴，和它的正常工作。 手风琴显示员工姓名列表，当我点击一个项目，它显示的细节。 我想送一个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>

文章来源: How to perform the following ajax request on jQuery Accordion?