1

我使用 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>
4

2 回答 2

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);
}
于 2013-01-17T16:02:27.503 回答
1

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

您可以使用哪个结果来设置<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>
于 2013-01-17T17:58:09.053 回答