表行中的手风琴

时间:2013-07-16 04:38:48

标签: asp.net-mvc-4 twitter-bootstrap

我正在使用Twitter Bootstrap。目前我正在研究Master Details看起来很相似的表格,我打算将手风琴放入每个表格的行中,如果它被展开,部分视图将被重新加载并显示。

不知怎的,它没有按预期工作,但如果我将其更改为Modal,则部分视图加载完美。

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

 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 =“accordion-body”中的partialview( _CustomerProduct ),就像我在 div class =“中所做的那样模态体“但没有成功。我是否可以知道是否可以这样做,如果是的话,我可以知道吗?

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分: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>