I'm trying to display a list of objects in a table. I can iterate over each individual item to find it's value (using an for loop or a DisplayTemplate), but how do I abitriarily pick one to display headers for the whole group.
Here's an simplified example:
Model:
public class ClientViewModel
{
public int Id { get; set; }
public List<ClientDetail> Details { get; set; }
}
public class ClientDetail
{
[Display(Name="Client Number")]
public int ClientNumber { get; set; }
[Display(Name = "Client Forname")]
public string Forname { get; set; }
[Display(Name = "Client Surname")]
public string Surname { get; set; }
}
View
#model MyApp.ViewModel.ClientViewModel
#{ var dummyDetail = Model.Details.FirstOrDefault(); }
<table>
<thead>
<tr>
<th>#Html.DisplayNameFor(model => dummyDetail.ClientNumber)</th>
<th>#Html.DisplayNameFor(model => dummyDetail.Forname)</th>
<th>#Html.DisplayNameFor(model => dummyDetail.Surname)</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Details.Count; i++)
{
<tr>
<td>#Html.DisplayFor(model => model.Details[i].ClientNumber)</td>
<td>#Html.DisplayFor(model => model.Details[i].Forname)</td>
<td>#Html.DisplayFor(model => model.Details[i].Surname)</td>
</tr>
}
</tbody>
</table>
Notice: I'm using var dummyDetail = Model.Details.FirstOrDefault(); to get a single item whose properties I can access in DisplayNameFor.
What would be the best way to access those headers ?
Will this break if the collection is null?
Should I just replace them with hard coded plain text labels?
The Problem
As Thomas pointed out, Chris's answer works in some cases, but runs into trouble when using a ViewModel because the nested properties don't enjoy the same automatic resolution. This works if your model type is IEnumerable<Type>, because the DisplayNameFor lambda can still access properties on the model itself:
However, if the ClientDetail collection is nested inside of a ViewModel, we can't get to the item properties from the collection itself:
The Solution
As pointed out in DisplayNameFor() From List in Model, your solution is actually perfectly fine. This won't cause any issues if the collection is null because the lambda passed into DisplayNameFor is never actually executed. It's only uses it as an expression tree to identify the type of object.
So any of the following will work just fine:
#Html.DisplayNameFor(model => model.Details[0].ClientNumber)
#Html.DisplayNameFor(dummy => Model.Details.FirstOrDefault().ClientNumber)
#{ ClientDetail dummyModel = null; }
#Html.DisplayNameFor(dummyParam => dummyModel.ClientNumber)
Further Explanation
If we want to see some of the fancy footwork involved in passing an expression, just look at the source code on DisplayNameFor or custom implementations like DescriptionFor. Here's an simplified example of what happens when we call DisplayNameFor with the following impossible expression:
#Html.DisplayNameFor3(model => model.Details[-5].ClientNumber)
Notice how we go from model.Details.get_Item(-5).ClientNumber in the lambda expression, to being able to identify just the member (ClientNumber) without executing the expression. From there, we just use reflection to find the DisplayAttribute and get its properties, in this case Name.
Sorry, your question is a little hard to understand, but I think the gist is that you want to get the display names for your properties, to use as headers, without requiring or first having to pick a particular item out of the list.
There's already built-in support for this. You simply just use the model itself:
#Html.DisplayNameFor(m => m.ClientNumber)
In other words, just don't use a particular instance. DisplayNameFor has logic to inspect the class the list is based on to get the properties.
Related
I am trying to create a search page, which searches the details of the user based on the Username. My problem is I am not able to create a strongly typed text box for the search box. I created a Model view and in spite of that I am unable to fix my issue. My View is not able to even compile properly, I am guessing I am going wrong with the Model which binds the view to make it strongly typed. I wish to have 2 text boxes for username and phone number, if the user enters anything inside either of the text box it should return the matching user profile.
This is the View Model:
public class UserSearchViewModel
{
public string userName { get; set; }
public string phoneNum { get; set; }
public IEnumerable<User> user { get; set; }
}
Action method:
public ActionResult Search(UserSearchViewModel mod)
{
IEnumerable<User> u1 = null;
u1 = db.Users.Where(p => p.UserName.Contains(mod.userName) || p.PhoneNum.Contains(mod.phoneNum));
return View(u1);
}
View:
#model HindiMovie.Models.UserSearchViewModel
#using( Html.BeginForm("Search", "User", FormMethod.Get))
{
#Html.TextBox("UserName")
}
<table>
<tr>
<th>#Html.DisplayNameFor(model => model.UserName)</th>
<th>#Html.DisplayNameFor(model => model.FirstName)</th>
<th>#Html.DisplayNameFor(model => model.LastName)</th>
<th>#Html.DisplayNameFor(model => model.PhoneNum)</th>
<th></th>
</tr>
#foreach (var item in Model.user) {
<tr>
<td>#Html.DisplayFor(modelItem => item.FirstName)</td>
<td>#Html.DisplayFor(modelItem => item.LastName)</td>
<td>#Html.DisplayFor(modelItem => item.UserName)</td>
</tr>
}
</table>
A way to go would be to create a wrapper class
public class UserSearchViewModel
{
public string UserName {get;set;}
public string PhoneNumber {get;set;}
public IEnumerable<User> Users {get;set;}
}
The model would be UserSearchViewModel instead of IEnumerable and your foreach would loop through Model.Users instead Model.
This and this are a couple of articles detailing the use of ViewModels (an arbitrary class that exists solely to provide data for a view) vs. using your Enity/Database models directly in the view.
Inside the form element, use
#Html.TextBoxFor(m => m.userName )
#Html.TextBoxFor(m => m.phoneNum)
But the reason you view wont compile is because you model does not contain a properties UserName, FirstName etc so you cannot use #Html.DisplayNameFor(m => m.UserName) in your table headings.
Either hard code them
<th>User name</th>
or use
<th>#Html.DisplayNameFor(m => m.user.FirstOrDefault().UserName)</th>
Note that the collection does not need to contain any items for this to work.
I am just trying to pass a List and display it dynamically in a table in the View. I have a Homepage Model and Homepage controller and the variables are being set right, but I can't figure out how to pass it to the view.
My model looks like this:
public class HomePageModel
{
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Display(Name = "ExtNum")]
public string ExtNum { get; set; }
[Display(Name = "PhoneDisplay")]
public List<PhoneDisplay> PhoneDisplay { get; set; }
}
and this is the controller:
public ActionResult Homepage(HomePageModel HpModel)
{
ViewBag.Welcome = "Welcome: ";
ViewBag.FirstName = HpModel.FirstName;
ViewBag.LastName = HpModel.LastName;
ViewBag.Extlbl = "Extension: ";
ViewBag.Ext = HpModel.ExtNum;
ViewBag.Todaylbl = "Today:";
ViewBag.Today = DateTime.Now;
DBOps ops = new DBOps();
HpModel.PhoneDisplay = ops.getDisplayInfo(HpModel.ExtNum);
return View(HpModel);
}
PhoneDisplay is a list that contains a line index, a description string and a 4 digit number. Each user will have at least 1 item in this list and maximum 6. I was able to pass the other parameters and display them in the view but I can't find a way to pass the list and display that dynamically.
EDIT
I made it this far but still can't find the list items.
#model AxlMVC.Models.HomePageModel
<table>
<caption style="font-weight:bold">Your Phone Information</caption>
<tr>
<th>Line Index</th>
<th>Display</th>
<th>Extension Number</th>
</tr>
#{
foreach (var item in Model.PhoneDisplay) //problems here
{
<tr>
<td>
#Html.Display(item.numplanindex)
</td>
<td>
#Html.Display(item.display)
</td>
<td>
#Html.Display(item.dnorpattern)
</td>
</tr>
}
}
</table>
EDIT
I debugged the cshtml file and the items in the foreach loop are being passed just fine too, but the table is not showing on the page and neither are the items all I can see is the caption and the headers for each column
Html.Display displays "data from the ViewData dictionary or from a model" as stated on MSDN. What it means is that it searches for the key in the ViewData dictionary with the value you pass in or a property in the Model with the specified name. E.g. Display("test") would search ViewData for the "test" key and the Model for the property named test. Since you are passing in property values that cannot work. Your options are:
Output the value directly, #item.numplanindex. This will output a string representation of the value.
Use Display, although this is not recommended. You could do Display("PhoneDisplay[1].numplanindex") to display numplanindex property of the second item in list.
Use DisplayFor, like DisplayFor(model => item.numplanindex). This is a strongly typed version of Display. It will either displays a string representation of the value or a template for the type, if you have one. You can also manage how the output is displayed via Data Annotations, e.g. DisplayFormatAttribute.
Use DisplayTextFor, like DisplayTextFor(model => item.numplanindex). This method outputs the string representation of the value.
Since you already have data annotations on the model, you could modify your view like this:
#model AxlMVC.Models.HomePageModel
<table>
<caption class="tableCaption">Your Phone Information</caption>
<tr>
<th>#Html.DisplayNameFor(model => model.PhoneDisplay[0].numplanindex)</th>
<th>#Html.DisplayNameFor(model => model.PhoneDisplay[0].display)</th>
<th>#Html.DisplayNameFor(model => model.PhoneDisplay[0].dnorpattern)</th>
</tr>
#{
foreach (var item in Model.PhoneDisplay)
{
<tr>
<td>#Html.DisplayTextFor(model => item.numplanindex)</td>
<td>#Html.DisplayTextFor(model => item.display)</td>
<td>#Html.DisplayTextFor(model => item.dnorpattern)</td>
</tr>
}
}
</table>
The line #Html.DisplayNameFor(model => model.PhoneDisplay[0].numplanindex) also works if PhoneDisplay contains no items. Only property metadata is collected, expression as such is not executed.
I have a view model that I've created with a collection (a List) of a separate model. In our database, we have two tables: BankListMaster and BankListAgentId. The primary key of the "Master" table serves as the foreign key for the Agent Id table.
As the Master/Agent ID tables have a one-to-many relationship, the view model I've created contains a List object of BankListAgentId's. On our edit page, I want to be able to both display any and all agent Ids associated with the particular bank, as well as give the user the ability to add or remove them.
I'm currently working through Steve Sanderson's blog post about editing a variable length list. However, it doesn't seem to cover this particular scenario when pulling existing items from the database.
My question is can you pass a specific collection item to a partial view, and if so how would you code that into the partial view correctly? The following code below states that
The name 'item' does not exist in the current context
However, I've also tried using a regular for loop with an index and this syntax in the partial view:
model => model.Fixed[i].AgentId
but that just tells me the name i does not exist in the current context. The view will not render using either method.
Below is the code from the view
#model Monet.ViewModel.BankListViewModel
#using (Html.BeginForm())
{
<fieldset>
<legend>Stat(s) Fixed</legend>
<table>
<th>State Code</th>
<th>Agent ID</th>
<th></th>
#foreach(var item in Model.Fixed)
{
#Html.Partial("FixedPartialView", item)
}
</table>
</fieldset>
}
Here is the partial view
#model Monet.ViewModel.BankListViewModel
<td>
#Html.DropDownListFor(item.StateCode,
(SelectList)ViewBag.StateCodeList, item.StateCode)
</td>
<td>
#Html.EditorFor(item.AgentId)
#Html.ValidationMessageFor(model => model.Fixed[i].AgentId)
<br />
Delete
</td>
And here is the view model. It currently initialized the Fixed/Variable agent Id lists to 10, however that is just a work-around to get this page up and running. In the end the hope is to allow the lists to be as large or small as needed.
public class BankListViewModel
{
public int ID { get; set; }
public string BankName { get; set; }
public string LastChangeOperator { get; set; }
public Nullable<System.DateTime> LastChangeDate { get; set; }
public List<BankListAgentId> Fixed { get; set; }
public List<BankListAgentId> Variable { get; set; }
public List<BankListAttachments> Attachments { get; set; }
public BankListViewModel()
{
//Initialize Fixed and Variable stat Lists
Fixed = new List<BankListAgentId>();
Variable = new List<BankListAgentId>();
Models.BankListAgentId agentId = new BankListAgentId();
for (int i = 0; i < 5; i++)
{
Fixed.Add(agentId);
Variable.Add(agentId);
}
//Initialize attachment Lists
Attachments = new List<BankListAttachments>();
Attachments.Add(new BankListAttachments());
}
}
The problem is with your partial view. In your main view, in the loop, you're passing a BankListAgentId object. However, your partial view's Model type is #model Monet.ViewModel.BankListViewModel.
Furthermore, you are trying to access a variable called item in your partial view, when none exist. Instead of using item to access your data, use Model like in any other view. Each view (even a partial one) has it's own Model type.
Your partial view should look something like this:
#model Monet.ViewModel.BankListAgentId
<td>
#Html.DropDownListFor(model => model.StateCode,
(SelectList)ViewBag.StateCodeList, Model.StateCode)
</td>
<td>
#Html.EditorFor(model => model.AgentId)
#Html.ValidationMessageFor(model => model.AgentId)
<br />
Delete
</td>
The model you are passing into the Partial View is a BankListAgentId--- because you are looping over a collection of them when you are creating the partial view.
You're doing everything right so far. You're looping through your list, call the partial for each list item and passing the item into the partial. It seems that the part you're missing is that when you pass the item into the partial, the item becomes the model for the partial. So you interact with it like you would in any other views, i.e. #Model.BankName, #Html.DisplayFor(m => m.BankName), etc.
I have the following model in MVC:
public class ParentModel
{
public string Property1 { get; set; }
public string Property2 { get; set; }
public IEnumerable<ChildModel> Children { get; set; }
}
When I want to display all of the children for the parent model I can do:
#Html.DisplayFor(m => m.Children)
I can then create a ChildModel.cshtml display template and the DisplayFor will automatically iterate over the list.
What if I want to create a custom template for IEnumerable?
#model IEnumerable<ChildModel>
<table>
<tr>
<th>Property 1</th>
<th>Property 2</th>
</tr>
...
</table>
How can I create a Display Template that has a model type of IEnumerable<ChildModel> and then call #Html.DisplayFor(m => m.Children) without it complaining about the model type being wrong?
Like this:
#Html.DisplayFor(m => m.Children, "YourTemplateName")
or like this:
[UIHint("YourTemplateName")]
public IEnumerable<ChildModel> Children { get; set; }
where obviously you would have ~/Views/Shared/DisplayTemplates/YourTemplateName.cshtml:
#model IEnumerable<ChildModel>
<table>
<tr>
<th>Property 1</th>
<th>Property 2</th>
</tr>
...
</table>
This is in reply to Maslow's comment. This is my first ever contribution to SO, so I don't have enough reputation to comment - hence the reply as an answer.
You can set the 'TemplateHint' property in the ModelMetadataProvider. This would auto hookup any IEnumerable to a template you specify. I just tried it in my project. Code below -
protected override CachedDataAnnotationsModelMetadata CreateMetadataFromPrototype(CachedDataAnnotationsModelMetadata prototype, Func<object> modelAccessor)
{
var metaData = base.CreateMetadataFromPrototype(prototype, modelAccessor);
var type = metaData.ModelType;
if (type.IsEnum)
{
metaData.TemplateHint = "Enum";
}
else if (type.IsAssignableFrom(typeof(IEnumerable<object>)))
{
metaData.TemplateHint = "Collection";
}
return metaData;
}
You basically override the 'CreateMetadataFromPrototype' method of the 'CachedDataAnnotationsModelMetadataProvider' and register your derived type as the preferred ModelMetadataProvider.
In your template, you cannot directly access the ModelMetadata of the elements in your collection. I used the following code to access the ModelMetadata for the elements in my collection -
#model IEnumerable<object>
#{
var modelType = Model.GetType().GenericTypeArguments[0];
var modelMetaData = ModelMetadataProviders.Current.GetMetadataForType(null, modelType.UnderlyingSystemType);
var propertiesToShow = modelMetaData.Properties.Where(p => p.ShowForDisplay);
var propertiesOfModel = modelType.GetProperties();
var tableData = propertiesOfModel.Zip(propertiesToShow, (columnName, columnValue) => new { columnName.Name, columnValue.PropertyName });
}
In my view, I simply call #Html.DisplayForModel() and the template gets loaded. There is no need to specify 'UIHint' on models.
I hope this was of some value.
In my question about not getting output from views, I actually have an example of how to template a model with a collection of child models and have them all render.
ASP.NET Display Templates - No output
Essentially, you need to create a model that subclasses List<T> or Collection<T> and use this:
#model ChildModelCollection
#foreach (var child in Model)
{
Html.DisplayFor(m => child);
}
In your template for the collection model to iterate and render the children. Each child needs to strongly-typed, so you may want to create your own model types for the items, too, and have templates for those.
So for the OP question:
public class ChildModelCollection : Collection<ChildModel> { }
Will make a strongly-typed model that's a collection that can be resolved to a template like any other.
The actual "valid answer" is -IMHO- not correctly answering the question. I think the OP is searching for a way to have a list template that triggers without specifying the UIHint.
Magic stuff almost does the job
Some magic loads the correct view for a specified type.
Some more magic loads the same view for a collection of a specified type.
There should be some magic that iterates the same view for a collection of a specified type.
Change the actual behavior?
Open your favorite disassembler. The magic occurs in System.Web.Mvc.Html.TemplateHelpers.ExecuteTemplate. As you can see, there are no extensibility points to change the behavior. Maybe a pull request to MVC can help...
Go with the actual magic
I came up with something that works. Create a display template ~/Views/Shared/DisplayTemplates/MyModel.cshtml.
Declare the model as type object.
If the object is a collection, iterate and render the template again. If it's not a collection, then show the object.
#model object
#if (Model is IList<MyModel>)
{
var models = (IList<MyModel>)Model;
<ul>
#foreach (var item in models)
{
#Html.Partial("DisplayTemplates/MyModel", item)
}
</ul>
} else {
var item = (MyModel)Model;
<li>#item.Name</li>
}
}
Now DisplayFor works without UIHint.
In my view
<%= Html.DropDownListFor( x => x.Countries[ i ], Model.CountryList )%>
in my controller
public int[ ] Countries { get; set; }
public List<SelectListItem> CountryList { get; set; }
When the forms gets posted there is no problem, the dropdown is populated and the values the user selects are posted. But when I try to load the form with already assigned values to the Countries[ ] it does not get selected.
Not sure if this is new to mv4 or if it exists in prior version. But the DropDownListFor includes an additional parameter for the SelectList Constructor.
SelectList(IEnumerable, String, String, Object)
For example:
Html.DropDownListFor( x => x.Countries[ i ], New SelectList(Model.CountryList,"ID","Description",Model.Countries[i]))
Where ID is the Country ID in the CountryList object and Description is the Country Name.
I'm getting the same too. When using foreach to loop around a DropDownListFor (i.e. to render multiple select elements on a page).
My work around is to set the selected value in the controller rather than the view: something like this:
In the controller:
public class FruitList
{
public int? selectedFruit{ get; set; }
public List<SelectListItem> fruits
{
get
{
fruitEntities F = new fruitEntities();
List<SelectListItem> list = (from o in F.Options
select new SelectListItem
{
Value = o.fruitID,
Text = o.fruit,
Selected = o.fruitID == selectedFruit
}).ToList();
return list;
}
}
}
public class ViewModel
{
public List<FruitList> collectionOfFruitLists { get; set; }
}
In the view
<table>
<% for (int i=0; i < Model.collectionOfFruitLists.Count; i++ )
{ %>
<tr>
<td><%: Html.DropDownList("fruitSelectList", collectionOfFruitLists[i].fruits, "Please select...") %></td>
</tr>
<%} %>
</table>
The nifty bit is Selected = o.fruitID == selectedFruit in the controller which acts like a SQL CASE statement; this is really well explained by Lance Fisher (thanks Lance, your post really helped me out :)
I know this question is a bit old but I just came across this problem with looping through a list of objects and attempting to bind the values to DropDownListFor(s) in my Edit View.
I overcame the issue with an inline solution by using the logic from some of the previous solutions given by others for this question.
Binding to my Model:
#Html.DropDownListFor(model => model.QuestionActions[i].QuestionActionTypeId,
Model.QuestionActionTypes.Select(x => new SelectListItem() { Value = x.Value, Text = x.Text, Selected = (x.Value == Model.QuestionActions[i].QuestionActionTypeId.ToString()) }).ToList(),
"Select Action Type",
new { })
Model.QuestionActionTypes is a SelectList that is populated in my Controller.
This is a bit of a hack, and JavaScript reliant but it worked very well for me.
You'll need to know the client IDs that will be produced by the fields (usually these can be worked out manually but for safety you may want to use something like a FieldIDFor method.
You just need to set the values based on the model, in jQuery's $(document).ready:
<script type="text/javascript">
$(document).ready(function () {
#for(var i = 0; i < 5; i++)
{
<text>
$("##Html.FieldIDFor(m => m.Countries[i])").val("#Model.Countries[i]");
</text>
}
});
</script>
A select box sends a single value, so the Countries property should not be an array. Also in your post it is not clear where's the i variable you are using in your lambda expression coming from and this x.CountryList used in the helper won't compile as x is not defined.
Model:
public class MyModel
{
public int SelectedCountry { get; set; }
public List<SelectListItem> CountryList { get; set; }
}
View:
<%= Html.DropDownListFor(x => x.SelectedCountry, Model.CountryList) %>
UPDATE:
According to the comment it seems that there are multiple drop downs. I suspect that the problem might come from the i variable used as index in a for loop.
You might try this instead:
Model:
public class MyModel
{
public int[] Countries { get; set; }
public List<SelectListItem> CountryList { get; set; }
}
View:
<% foreach (var country in Model.Countries) { %>
<%= Html.DropDownListFor(x => country, Model.CountryList) %>
<% } %>
Instead of using a IEnumerable in your viewmodel use a List of objects like this one:
public List<PairVM<string,string>> TiposValorCobertura { get; private set; }
And in your view when you assign the selectable elements for the dropdownlist in the loop, do it this way:
#Html.DropDownListFor(m => m.Coberturas[i].TipoLimiteInferior, new SelectList(Model.TiposValorCobertura,"Key","Description", Model.Coberturas[i].TipoLimiteIferior))
Where "Key" and "Description" are PairVM's properties