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?