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

Thiago的实施似乎应该有效。但是，我会基于_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);
}

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

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

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

2 个答案: