I'm using a ViewModel to pass the data from two tables to the view. One table contains name of the staff and the second table contains data like number of hours they work per week. When I list the names from one table I also want to show the working hours that match that persons ID. Is it possible to use LINQ like where or equal to make this possible? Could someone show me a simple sample?
EDIT: Are there better ways to do this? Should I handle this in the Controller instead?
This is the code I'm using so far in the View:
#foreach (var item in Model.resourceList)
{
<p>#item.FirstName</p>
}
#foreach (var item in Model.activityList)
{
<p>#item.NumberOfHoursPerWeek</p>
}
If you're looping through this:
#foreach (var item in Model.resourceList)
{
...
}
Then within that loop you can match any element in Model.activityList just like any other LINQ query. Perhaps something like this?:
#Model.activityList.Single(a => a.SomeID == item.SomeID).NumberOfHoursPerWeek
The actual comparison (in this example, a.SomeID == item.SomeID) is up to you, as is the logic for the records you want to find (.Where(), .Single(), .First(), etc. depending on the behavior you expect) is up to you. But finding an element in a collection is the same in this view code as it would be in any server-side code.
Ignoring all design issues, here is a solution:
#foreach (var item in Model.resourceList)
{
#{
var numberOfHours = Model.activityList.First(_ => _.UserID == item.ID).NumberOfHoursPerWeek;
}
<p>#item.FirstName</p>
<p>#numberOfHours</p>
}
However, the View should usually be kept as simple as possible. The ViewModel is responsible for preparing the data for the View in an easily consumable form. If done right, you should not need any linq queries in your Views.
you can use it like this
with if
//just an example to make condition true not displaying the exact Property or condition
#if (true)
{
Model.Where(model=>model.UserID==User.UserID)
}
or with loop
#foreach (var item in Model.resourceList)
{
//just an example not displaying the exact Property
Model.Where(model=>model.UserID==User.UserID)
}
Related
I'm tinkering with a ASP.NET MVC 4 template, and I need guidance on how to design a complex view layout.
I already created a model that is getting data returned by a stored procedure in a SQL Server DB. A view is getting data from the model in an IEnumerable<> object. If you were to view the raw output of the stored procedure it would look something like this:
**Name** **Objects**
John Orange
John Banana
John Apple
I used a view template to create a simple table based on logic below, but as expected, it is rendered exactly like it is stored in the IEnumerable<> object. The name appears on each row of output in the table, like above.
#model IEnumerable<projectname.Models.ObjectsModel>
<table class="table">
...
...
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Objects)
</td>
...
Instead, I want to create a view layout that is not in table form, that would display the Name as a heading, the objects as a bulleted list, and other attributes elsewhere, with no redundant data. My problem is that if I display the items in the IEnumerable<> using #foreach (var item in Model) I end up getting three duplicate entries, since the values in the Name field are not unique.
What is the 'best practice' way to do this? Can someone please point me in the right direction?
Not sure what your controller looks like, or even your view model, but maybe i can point you in the right direction.
foreach is just that a loop of objects and should be used for just that, i have seen many people manipulate foreach loops with little or no success, You should be using a #for loop. besides The for-loop is approximately 2 times faster than the foreach-loop as it only has to call get_Item for every element in the list.
there are a few ways to acomplis what you want, one way would be what #colinD stated above by using LINQ in the controler or viewmodel to pass the proper data. the other way would be somthing similar to the following.
var models = ObjectsModel();
var grouped = models.GroupBy(s => s.ObjectsModel.Name)
.Select(x => x.Select(y => y))
.ToList();
return View(grouped);
#for(int i = 0; i < Model.Count; i++)
{
<h2>#Html.DisplayFor(model => model[i].First().ObjectsModel.Name)</h2>
<ul>
for(int j = 0; j < Model[i].Count; j++)
{
<li>#Html.DisplayFor(model => model[i][j].Object)</li>
}
</ul>
}
I haven't tested the code but I hope this helps you get the right solution you are looking for.
The main thing i'm trying to figure out is how to display this data
without having the #foreach (var item in Model) loop generate
duplicate entries for each row in the SP output.
Usually processing data is done in action, like groupping data, and then make some loop to display. As you want to avoid #foreach I thought using linq. This is just an idea but keep in mind you should separate concerns in MVC. I hope this helps ;)
IEnumerable<ObjectsModel> model = new List<ObjectsModel>()
{
new ObjectsModel(){ Name = "John", Objects = "Orange" },
new ObjectsModel(){ Name = "John", Objects = "Banana" },
new ObjectsModel(){ Name = "John", Objects = "Apple" }
};
var htmlModel = model
.GroupBy(a => a.Name)
.Select(a => new
{
Name = a.Key,
GroupObjects = string.Join("", a.Select(b => $"<li>{b.Objects}</li>"))
})
.Select(a => $"<h1>{a.Name}</h1><ul>{a.GroupObjects}</ul>")
.ToList();
var result = string.Join("", htmlModel); // <h1>John</h1><ul><li>Orange</li><li>Banana</li><li>Apple</li></ul>
Final result:
<h1>John</h1>
<ul>
<li>Orange</li>
<li>Banana</li>
<li>Apple</li>
</ul>
I've got the code below where I am checking for a default value in an options list. It works, but it's ugly if/else logic. The quotes have me stumped in how to optimize to be cleaner C# code. Looking for a way to make it nicer, perhaps even just one clean line of code.
#foreach (var myValue in ratingControlValues)
{
if (myValue.Equals(ratingControlInitialValue))
{
<option value="#myValue" selected='selected'>#myValue</option>
}
else
{
<option value="#myValue" >#myValue</option>
}
}
Consider using The Select Tag Helper
In your controller you can assign the options to a property of your view model or view bag
var ratings = ratingControlValues
.Select(myValue => new SelectListItem {
Value = myValue,
Text = myValue,
Selected = myValue.Equals(ratingControlInitialValue)
}).ToList();
ViewBag.RatingsOptions = ratings;
The above example sets the values using the ViewBag
This will now allow the view to be simplified using the tag-helper
<select asp-for="Ratings" asp-items="ViewBag.RatingsOptions"></select>
to a simple single line of markup
For the following examples, I'm using a content tree which looks like this:
Content tree
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var home = Model.Content.Descendants().Where(x => x.DocumentTypeAlias == "BlogContainer");
<div class="container">
<ul>
#foreach (var item in home)
{
foreach (var items in item.Children)
{
foreach (var baby in items.Children.OrderBy("date desc"))
{
var date = baby.GetPropertyValue<DateTime>("date");
<li>#items.Name - #baby.Name - #date</li>
}
}
}
</ul>
</div>
}
And the result is Result three I need to collect all items and set order by date
Try and do something like
var allItems = homePage.Descendants("YourItemNodeType")
.Where(item => item.HasValue("date")
&& item.GetPropertyValue<DateTime>
("date") != DateTime.MinValue)
.ToList()
.OrderByDescending(item => item.GetPropertyValue<DateTime>("date"));
This should get you all your items in both category 1 and category 2, i always tend to check if my date is actually set ( you wouldnt need to do that for create date mentioned by #bowserm as that is always there with a value).
Once u got them to List then you can sort them by their set date, i do this on when i list news articles in different parent pages, then you can just have one loop to go through all of them.
First of all, what Umbraco version are you using? It looks like you are using 6+? Is that right? My answer below should work for 6 and 7.
The property you are looking for is called createDate, so you would use something like baby.GetPropertyValue<DateTime>("createDate"). Even better, you should be able to just type baby.CreateDate. Umbraco has exposed all of the default properties that you might want on the IPublishedContent as properties, so you can get at those without having to use GetPropretyValue(...).
Take a look at this Umbraco v6 MVC Razor Cheatsheet. It lists the default properties you can get off of the nodes in Umbraco. The razor syntax for v6 will also be applicable to v7, so this cheat sheet works for both.
I have a two questions.
The first one is about that moment when you go to EDM and update your models from database and it rewrites the old models, losing everything you edited inside them. I read a little about this and it is said that you can create another models and make them also partial and there you may put again the fields so at the next update it won't affect your last changes. How can I do this? I have a separate project for my DAL and the models were generated from database (I have an EDM).
The second question is... But better I give an example. I have a model called Categories and another one CategoriesTranslations, both of them mapped from my database. Let's say you want to have a list of this categories inside a DropDownList() in many views of your website (of your different controllers). The DropDrown will have the value containing the translation which depends on the current language and the keys containing the category ID.
Here is an example of my list:
List<SelectListItem> listItems = new List<SelectListItem>();
var CategoriesTexts = db.Categories.Include(i => i.CategoryTexts).ToList();
foreach (var cat in CategoriesTexts)
{
var texts = cat.CategoryTexts.Where(w=>w.Language.Format == (string)Session["chosen_language"]).FirstOrDefault();
listItems.Add(new SelectListItem
{
Text = texts == null ? cat.Id.ToString() : texts.Name,
Value = cat.Id.ToString(),
});
}
Where should I put this code in my website structure (or how can I structure it) to make use of it in most of my Views?
Thank you!
For your first question
There is no need to make partial classes just to fix the naming when you update EF EDMX file. Actually you shouldn't delete the model class from the Edmx when you make update to your database all you need to do is to update the model and it will save your navigation properties names as you made them already.
For your second Question
Although I don't agree with you about what you're doing to get the categories to the DropDownList, But you could make this as Extension method for the IEnumerable<Category> and put this method in ViewModelExtensions project
e.g.
public static IList<SelectListItem> ToDropDownList(this IEnumerable<Category> query)
{
List<SelectListItem> listItems = new List<SelectListItem>();
foreach (var cat in query)
{
var texts = cat.CategoryTexts.Where(w=>w.Language.Format == (string)Session["chosen_language"]).FirstOrDefault();
listItems.Add(new SelectListItem
{
Text = texts == null ? cat.Id.ToString() : texts.Name,
Value = cat.Id.ToString(),
});
}
}
then just call it in your controllers like this:
var list = db.Categories.Include(i => i.CategoryTexts).ToDropDownList();
I have a view model which binds to a 'TreasureHuntDetails' object, which contains a list of clues. Here's part of the data model for it.
public TreasureHuntDetails()
{
Clues = new List<Clue>();
}
[Key]
public int TreasureHuntId { get; set; }
public List<Clue> Clues { get; set; }
On the page, I have a table. A foreach loop iterates through the list of clues to add them to the table, e.g.
#for (int i = 0; i < Model.Clues.Count; i++)
The table elements inside the for loop are quite large, but here's an example of one of the table element columns:
<td>#Html.DisplayFor(m => Model.Clues[i].Location)</td>
All well and good so far. Then I'm using JQuery UI to allow the items of the table to be reordered using drag and drop, like this:
<script type="text/javascript">
$(document).ready(function()
{
$("#clueTable tbody").sortable().disableSelection();
});
</script>
All well and good, I can drag and drop the elements.
The problem is that I don't know how to save the new order of elements and save them back to the database.
The first thing I tried was simply passing the list of clues to a controller method, but I found that once the list of clues reached the controller method, it was always null.
For example:
#Url.Action("ViewCluePage", #Model.Clues)
Even if I send the whole #Model, list of clues within is always null. Removing the new list instantiation from the constructor of the data model didn't solve this problem.
Another thing I tried was wrapping the whole table into a HTML form, but still the list of clues remains null.
So basically, this question is really two questions:
1) Why is the list of clues always null after sending the model object to a controller.
2) How to save the new order of the list of items?
UPDATE: As per suggestion by #recursive, I see where I made an error when trying to submit the clue elements to the HTML form.
I used this outside the for loop which iterated over the clue elements:
#Html.HiddenFor(m => m.Clues)
I had to add the HiddenFor lines inside of the for loop (for each clue item), and for EACH property of the clue item, e.g.
#Html.HiddenFor(m => m.Clues[i].Id)
So that would be one step forward to be able to get the list items sent to the controller, but I think I still need code that will reflect the new order of the clue items when sent to the controller. Currently, on rearranging the order of the elements on screen using the JQuery sortable() method, this doesn't change the order of the elements as they are stored in the data model binded to the view (#Model.Clues).
1) As #resursive said in his comment, you need to have hidden elements on the page that map to properties in your Clue class.
2) As for persisting the order of clues, you'll need to add a column to your database that holds the position of each clue in the list and add the position property to your class. So your class would need to include
public int Position {get;set;}
which should pull from the database when the page is created. Then just before rendering the page, you should reorder the clue list based on the Position variable.
Edit: Use jquery's sortable attribute. Check out this thread for reference. In the stop drag event (or right before your submit), loop through each of your draggable objects and set the value of each of the hidden Position properties of your objects.
var positionIndex = 0;
$('.draggableObjectClass).each(function () {
$(this).find('input[id$=_Position]').val(positionIndex++);
});
but I think I still need code that will reflect the new order of the clue items when sent to the controller.
You won't, as you are now iterating over them in a for loop, they will be indexed in the order that you sent them to the view. Your order must already be maintained.
Taking advice from the answers posted here already, I came up with the following solution.
With already having this method in place to implement the drag and drop reordering of the UI elements,
$(document).ready(function()
{
$("#clueTable tbody").sortable().disableSelection();
});
I needed a way to be able read the in the new order of items and send it to the MVC controller. To do this I used the Razor #Html.AttributeEncode method to write the Id's of each item to a column on each row of the table, like this:
<td class="Ids" id="#Html.AttributeEncode(Model.Clues[i].Id)">#{var number = i + 1; #number}</td>
(This is wrapped around a for loop which iterates through the list of items.)
Then, I created the following Javascript function, which is invoked from a 'SaveNewOrder' button I placed above my table of elements (the user presses this once they have finished reordering the items on the table):
function getNewOrder()
{
var positions = new Array();
for (var i = 0; i < $('.Ids').length; i++)
{
positions[i] = $('.Ids')[i].id;
}
$.ajax(
{
type: "POST",
url: "#Url.Action("ReorderClues", "Clues")",
data:{ treasureHuntDetails: $("form").serialize(), ids: JSON.stringify(positions) }
contentType:'application/json'
}).done(function()
{
window.location.href = '#Url.Action("Clues", Model)';
}).
}
What this is does is reads the Id elements from each of the table items, and writes them into the array - so this array contains the NEW order of Id's. The data model containing the items doesn't change after reordering the table elements, hence why this was necessary.
It then uses a JQuery Ajax method to invoke a 'ReOrderClues' method on my 'Clues' MVC controller, passing a serialised version of the data model (containing a list of the clue items in the original order) and an array containing a list of the clue Id's in the new order. When the result is returned from the controller (.done), I invoke a controller which refreshes the page elements.
So rather than having to maintain a position value associated with each clue (which would involve significant refactoring elsewhere in the code), what I'm doing is swapping the contents of the clues around to reflect the new order, but keeping the Id's in the same position.
This is how I achieved that using an MVC Controller:
public ActionResult ReorderClues(TreasureHuntDetails treasureHuntDetails, int[] ids)
{
using (var db = new TreasureHuntDB())
{
var clues = treasureHuntDetails.Clues;
var newClues = NewOrderList(clues, ids);
// Save the changes of each clue
for (var i = 0; i < newClues.Count;i++ )
{
db.Entry(clues[i]).CurrentValues.SetValues(newClues[i]);
db.SaveChanges();
}
treasureHuntDetails.Clues = newClues;
TempData["Success"] = "Clues reordered";
}
return RedirectToAction("Clues", treasureHuntDetails);
}
public List<Clue> NewOrderList(List<Clue> clues, int[] ids)
{
var newClueOrder = new List<Clue>();
// For each ID in the given order
for (var i = 0; i < ids.Length; i++)
{
// Get the original clue that matches the given ID
var clue = clues.First(clue1 => clue1.Id == ids[i]);
var newClue = Clue.Clone(clue);
// Add the clue to the new list.
newClueOrder.Add(newClue);
// Retain the ID of the clue
newClueOrder[i].Id = clues[newClueOrder.Count - 1].Id;
}
return newClueOrder;
}
In the above code snippet, TreasureHuntDB is my Entity Framework database context.