MVC - ForEach循环中的可扩展部分视图

时间:2016-12-19 13:09:49

标签: javascript c# asp.net-mvc partial-views expandable

我有一个带有类型的模型的视图:

IEnumerable<StoreMonthlyTarget>

这是班级

public partial class StoreMonthlyTarget
{
    public int STORE_KEY { get; set; }
    public Nullable<short> RetailYear { get; set; }
    public Nullable<short> RetailMonthID { get; set; }
    public IEnumerable<F_MonthlyTargets> EmployeeTargets { get; set; }
}

在我的索引视图中,我遍历每个StoreMonthlyTarget。然后,我希望能够点击其中任何一个,并展开 PartialView ,它将显示附加的F_MonthlyTargets列表。

到目前为止,我有这个

@foreach (var item in Model)
{

    <table class="table">
        <tr>
            <th>Store</th>
            <th>Month</th>
            <th>
                Expand
            </th>
        </tr>
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Store)</td>
            <td>@Html.DisplayFor(modelItem => item.RetailMonth)</td>
            <td>
            <input type="button" value="Expand" id="btnExpand"
            onclick="javascript:BtnOnclick('@item.STORE_KEY'
                                          ,'@item.RetailYear'
                                          ,'@item.RetailMonthID');"/>
            </td>
        </tr>
    </table>

    <div id="divpopup" style="display:none">
        @Html.Partial("_Store", item);
    </div>

这会将所需的密钥传递给函数

<script>
function BtnOnclick(Store, Year, Month) {
    $.ajax({
        type: 'POST',
        url: '@Url.Content("~/Targets/PartialStore")',
        data: {
            store: Store,
            year: Year,
            month: Month
        },
        success: function (data) {
            $('#divpopup').css("display", "block");
            $('#btnExpand').css("display", "none");
            $('#divpopup')[0].innerHTML = data;
        }
    });
}
function CollapseDiv() {
    $('#divpopup').css("display", "none");
    $('#btnExpand').css("display", "block");
}
</script>

反过来,使用这些键来查找所需的记录并将其返回。

[HttpPost]
public ActionResult PartialStore(string store
                                , string year
                                , string month)
{
    StoreMonthlyTarget s =  (
                             from a in db.StoreMonthlyTargets
                             where a.RetailMonthID.ToString() == month
                                && a.RetailYear.ToString() == year
                                && a.STORE_KEY.ToString() == store
                             select a
                            ).ToList()[0];
    s.EmployeeTargets = (
                         from t in db.F_MonthlyTargets
                         where t.STORE_KEY == s.STORE_KEY
                            && t.RetailYearID == s.RetailYear
                            && t.RetailMonthID == s.RetailMonthID
                                select t
                         );
        return PartialView("_Store", s);
    }

部分视图的类型为StoreMonthlyTarget,并包含一个在此处循环EmployeeTargets的表格。

当我运行它时,我会得到我的商店列表。然后我点击按钮,它检索正确的商店。但每次它将 PartialView div放在第一个Store项之后。不在相应的条目下。

任何人都有任何想法为什么?也许它结构糟糕,还有更好的方法可以做到这一点吗?

0 个答案:

没有答案