Index of current item in mvc display template

Question

I have an mvc page with displaytemplate. How to get the index of the current item displayed in the displaytemplate. it gives the correct binding results in the name attributes.

<input name="xxx[0].FirstName"/> <input name="xxx[1].FirstName"/> 

I want this index value in the display template. Is it somewhere in the ViewContext?

@ * page.cshtml @ @model ... @ property Contacts IEnumerable * @

 <table id="contacts" class="editable"> <thead> <tr><th>Name</th><th>Surname</th><th>Contact Details</th></tr> </thead> <tbody> @Html.DisplayFor(x => x.Contacts) </tbody> 

in the display template we have

 @* contact.cshtml *@ @model ...@ * This is the T of the IEnumerable<T> *@ <tr> @* I NEED THE INDEX OF THE CURRENT ITERATION HERE *@ <td>@Html.DisplayFor(x => x.FirstName)</td> </tr> 

Answer 1

I am afraid there is no easy way to get the index. It is buried inside the internal method System.Web.Mvc.Html.DefaultDisplayTemplates.CollectionTemplate and is not affected. You can use the field prefix:

 @ViewData.TemplateInfo.HtmlFieldPrefix 

Another possibility is to replace @Html.DisplayFor(x => x.Contacts) with:

 @for (int i = 0; i < Model.Contacts.Length; i++) { @Html.DisplayFor(x => x.Contacts[i], new { Index = i }) } 

and then inside the @ViewBag.Index template should indicate the current index, but I have to admit it is pretty ugly.

Answer 2

Extension of @DarinDimitrov answer, I wanted to present a complete solution:

Extension:

 namespace ApplicationName.Helpers { public static class RazorHtmlHelpers { public static Int32 GetTemplateIndex(this TemplateInfo template) { var index = 0; var match = Regex.Match(template.HtmlFieldPrefix, @"\d"); Int32.TryParse(match.Value, out index); return index; } } } 

Parent view markup:

 @Html.DisplayFor(model => model.Items) 

Template Layout:

 @using ApplicationName.Helpers @model ApplicationName.Models.ModelName <span>Item @ViewData.TemplateInfo.GetTemplateIndex()</span> 

Answer 3

Depending on why you need an index, it might be easier.

I did something similar and wanted an index only so that I could easily specify a list of elements, for example:

• First items in the list
• The second item in the list, etc.

Perhaps the obvious solution was to display my display template as a list item in the order list and let the browser handle the index display. I originally did this in a table and needed an index to display in the table, but using an ordered list makes it a lot easier.

So my parent view had the following:

 <ol> @Html.DisplayFor(m => m.Items) </ol> 

And my template wrote about the elements in the list item using divs - note that you can use floating divs or better yet show: inline-style to get a table similar to the effect

 <li> <div class="class1">@Html.DisplayFor(m => m.ItemType)</div> ... </li> 

And css:

 .class1 { display: inline-block; width: 150px; }