I'm trying to apply a responsive design to my ASP.NET MVC 4 application. I want to loop my model and render 3 items per line. Each line shall be wrapped in a div. The result should look something like this:
<div class='ResponsiveWrapper'>
<div>
<!-- item1 -->
</div>
<div>
<!-- item2 -->
</div>
<div>
<!-- item3 -->
</div>
</div>
<div class='ResponsiveWrapper'>
<div>
<!-- item4 -->
...
In order to do so, I'm trying to use ternary operators:
@{ var i = 0; }
@foreach (var item in Model)
{
@Html.Raw(i == 0 ? Html.Encode("<div class='section group'>") : "")
<div>
//Responsive Content comes here
</div>
@Html.Raw(i == 2 ? Html.Encode("</div>") : "")
@(i<3 ? i++ : i=0)
}
Now I have 2 problems:
The HTML tags which the ternary operators should render come in plain text. I tried different combinations of
@Html.Rawand@Html.Encodeand Strings, but it nothing worked for meIt seems like the last ternary operator renders the current value of the variable
i. How can I prevent this?
Additional information/code explanation
The logic already works fine:
- The
iVariable is the count variable. If i = 0I first render the start<div>tag of the wrapper and than I render the currentmodel.itemIf i = 1I only render the currentmodel.itemIf i = 2I first render the currentmodel.itemand than the</div>end tag
Thank you
UPDATE
Both, MajoB's and Chris Pratt's approaches basically work. Since MajoB's solution was more detailed, I went with that one. However, I had to make some modifications in order to get it to work:
At the controller, I had to assure, that an
IListis being returned, rather than anIEnumerablepublic ActionResult Index() { return View(db.leModel.ToList()); }In the View, I had to change the signature (like 1,
IListinstead ofIEnumerable)@model IList<leProject.Models.leModel>Various modifications in the Razor code (otherwise it would throw me exceptions)
Final code:
<div class="ResponsiveWrapper">
@for (var i = 0; i < Model.Count; i++)
{
// the lambda expression modelItem => item.leProperty did not work for some reason. So I had to replace the item with Model[i], which means, the following line is not necessary
{ var item = Model[i]; }
<div>
@Html.DisplayFor(modelItem => Model[i].leProperty)
</div>
if ((i + 1) % 3 == 0 || i == (Model.Count - 1))
{
@:</div>
if (Model.Count + 1 - i >= 3)
{
@:<div class="ResponsiveWrapper">
}
}
}
Thank you guys :)
@(stuff)tells Razor to print the output. try@{stuff}instead :-)