1

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>
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 に答える