表格行内的手风琴

Question

我正在使用 Twitter Bootstrap。目前我正在处理 Master Details 看起来很相似的表，我计划在每个表的行中放置一个手风琴，如果它被展开，部分视图将被重新加载并显示。

不知何故，它无法按预期工作，但如果我将其更改为模态，则部分视图会完美加载。

这是处理和返回值的控制器：

 public ActionResult Index(int id,int? page)
    {
        List<CustomerProduct> customerProducts =
        (from c in RepositoryProduct.Reload(id)
        select c).ToList<CustomerProduct>();
        return PartialView("_CustomerProducts", customerProducts);
    }

这是视图中的表格：

<table id="tbl" class="table table-condensed" style="border-collapse:collapse;">
            <thead>
                <tr>    
                        <th>
                           @Html.ActionLink("Customer Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                        </th>

                        <th>
                            @Html.DisplayNameFor(model => model.First().CustLocalName)
                        </th>

                        <th>                            
                             @Html.ActionLink("Country", "Index", new { sortOrder = ViewBag.CountrySortParm, currentFilter = ViewBag.CurrentFilter })
                        </th>

                        <th>
                           @Html.DisplayNameFor(model => model.First().City)
                        </th>

                    </tr>
            </thead>

            <tbody>
                @foreach (var item in Model)
                {  
                    <tr data-toggle="collapse">

                        <td style="display:none;">
                            @Html.DisplayFor(modelItem => item.CustID)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.CustName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.CustLocalName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.Country.CountryName)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.City)
                        </td>

                        <td>
                            <a class="btn btn-small btn-info" type="button" href="@Url.Action("Index", "CustomerProduct", new { id = item.CustID })"  data-toggle="collapse" data-target="#@item.CustID" >Products</a>                            
                        </td>

                    </tr>

                     <tr>

                        <td colspan="6" class="hiddenRow">
                            <div id="@item.CustID" class="accordian-body collapse" tabindex="-1">
                                <div class="accordion-header">

                                    <label>
                                        <strong>@item.CustName product(s)</strong>
                                    </label>
                                </div>
                                <div class="accordion-body">TEST</div>
                            </div>
                        </td>

                    </tr>
                }

            </tbody>
    </table>

这是调用控制器索引函数的部分代码：

<a class="btn btn-small btn-info" type="button" href="@Url.Action("Index", "CustomerProduct", new { id = item.CustID })"  data-toggle="collapse" data-target="#@item.CustID" >Products</a>

实际上我想像在 div class=" modal-body" 但没有成功。我可以知道是否可以这样做，如果可以，我可以知道怎么做吗？

我们将不胜感激。

Answer 1

让我使用的视图正常工作

<td colspan="6" class="hiddenRow">
                            <div id="@item.CustID" class="accordian-body collapse" tabindex="-1">
                                <div class="accordion-header">

                                    <label>
                                        <strong>@item.CustName product(s)</strong>
                                    </label>
                                </div>
                                 <div class="accordion-body">
                                    @Html.Partial("_CustomerProduct")
                                </div>
                            </div>
                        </td>