MVC - Expandable Partial View within ForEach loop

489 views Asked by At

I have a View with a model of type:

IEnumerable<StoreMonthlyTarget>

Here is the class

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

In my Index view, I loop over each StoreMonthlyTarget. I then want to be able to click on any of these, and expand a PartialView that will show the attached list of F_MonthlyTargets.

So far, I have this

@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>

This passes the keys needed into a function

<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>

That in turn, uses those keys to find the record needed and return it.

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

The Partial view is then of type StoreMonthlyTarget, and contains a table that loops over the EmployeeTargets in here.

When I run it, i get my list of Stores. I then click on the button, and it retrieves the correct store. But every time it places the PartialView div after the first Store item. Not under the corresponding entry.

Anyone have any ideas as to why? Perhaps it's badly structured and there are better ways to do this?

0

There are 0 answers