I'm trying to create a page that contains a grid and searching. The issue is that I want to have a partial view for the grid and one for the searching.
If doing a search, this should render the grid partial view with the new information.
At the moment I need information, such as what column I'm sorting by and so on, from the grid (currently stored in viewdata), in order to do the search as I want to keep those settings. This information is only available in the grid partial though.
What's the best approach of this to make it neat and nice in the code, but not a mess to work with?
Where can I store information that I need in the other partial view?
Partial View 1;
<table>
<%= Html.CreateGrid(Model, "Grid", "Grid", (int)ViewData["SortColumn"], (bool)ViewData["SortedASC"])%>
</table>
Partial View 2;
<div class="searchControl">
<input type="text" class="SearchBox" href="<%= Url.Action("Grid", "Grid", new {page = 1, columnToSortBy=/* would like to access viewdata from partial view 1 here. */, sortASC = /* would like to access viewdata from partial view 1 here. */ } ) %>" />
<input type="submit" value="Search" class="SearchButton" />
</div>
I know I might take the completely wrong approach on this, so feel free to point me in the right one!
Thanks!
ViewData is a good place to store data that is accessed in Views and Partials.
Even better if you use strongly typed views. Then you could access the data for sorting an filtering via a typed model.
I would have the model-classes implement an interface IGridFeatures that has properties for SortedASC, SortColumn, Page.
Its often a good idea to have these optional properties not in the route but in a querystring.
I think you'll be better of controlling your link through javascript, since all you really want is to control the UI.
Related
My site has an ever increasing number of distinct controllers, based around specific entities, which implement the Interface/Repository pattern to populate the various views. Most of these views are bound to single pages. Details, Indexes etc.
This entity data will also be displayed, mostly in summarised/compacted form, on other pages such as a customised home page, and side bars (using layouts and sections).
I'm uncertain as to which approach to use. I have 2 in mind:
1) Import the relevant repositories into the page template/sidebar template:
public HomeController(IMessagesRepository messagesRepository, ICruiseCalendarRepository cruiseCalendarRepository, INewsRepository newsRepository, and so on and so on...)
//
{
this.repoMessages = messagesRepository;
this.repoCruiseCalendar = cruiseCalendarRepository;
this repoNews = newsRepository;
and so on
and on
....
....
}
...and build the page from these or.
2) Access the dynamic data through the controllers by use of Html.RenderAction:
<div class="newsBox">
#{ Html.RenderAction("CustomisedHeadlines", "News");}
</div>
<div class="messageBox">
#{ Html.RenderAction("LatestMessages", "Messages");}
</div>
<div class="calendarBox">
#{ Html.RenderAction("WeekItinerary", "CruiseCalendar");}
</div>
Any suggestions as to the best design practice, would be welcome.
regards, Guy
Use Html.RenderAction is definitely better solution. Its make controller simple and reuseble. You can easily add and remove boxes from view without changes in controller. It is easy to put them in diffrent view. Generally it's more flexible solution.
I have a collection of objects on my Model that I'm rendering in a View by using EditFor function, and I have an EditorTemplate which is responsible for actually rendering each object.
#Html.EditorFor(model => model.MyObjects)
This has worked well for a while now, and when you check the html, my text boxes are prefixed with the model property, followed by the index of the collection they came from.
<input class="text-box single-line" id="MyObjects_2__SomeProperty"
name="MyObjects[2].SomeProperty" type="Text" value="" />
However I've recently started using the ShowForEdit and ShowForDisplay properties in the model metadata for the collection, and in the first line of my editor template if the ShowForEdit is not true, I just skip it.
#if (!ViewData.ModelMetadata.ShowForEdit)
{
return;
}
But because these are all indexed in the html, when I try to save this collection back to the viewmodel via a postback, it fails because of a reliance on the indexing numbers. Every item in the collection after the missing index is missing from my view model when I check it's value.
In this case it's actually my first item in the collection that I'm skipping since I don't want it to be visible on the edit view, but because of this when I postback the first index in the html is 1 (instead of 0 like it normally would be), but this is a problem when you try to save the changes. This is also a problem when altering the DOM using javascript.
Has anyone else encountered a problem with the default model binder's ability to read data posted back when one or more indexes in the html represented collection are not present?
Are there model binders that handle this problem?
Ran into this issue recently and solved it by converting the List to a Dictionary<string, model> with GUIDs as the key.
#foreach (var index in Model.EmailAddresses.Keys)
{
<label asp-for="#Model.EmailAddresses[index].Email">Email</label>
<input asp-for="#Model.EmailAddresses[index].Email" type="text" />
}
This avoided having to include hidden inputs that map to the index value.
There are some very good blog posts that allow you to modelbind to a list without the need to provide zero based contiguous index. plz have a look at
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
http://zahidadeel.blogspot.com/2011/05/master-detail-form-in-aspnet-mvc-3-ii.html
Furthermore, if you are interested in MVVM pattern and knockout js you can check this great work by steve sanderson
For more reading put "editing varibale length list mvc style" in google and it will give u a dozen useful links
So, the title should speak for itself.
To create re-usable components in ASP.NET MVC, we have 3 options (could be others i haven't mentioned):
Partial View:
#Html.Partial(Model.Foo, "SomePartial")
Custom Editor Template:
#Html.EditorFor(model => model.Foo)
Custom Display Template:
#Html.DisplayFor(model => model.Foo)
In terms of the actual View/HTML, all three implementations are identical:
#model WebApplications.Models.FooObject
<!-- Bunch of HTML -->
So, my question is - when/how do you decide which one of the three to use?
What i'm really looking for is a list of questions to ask yourself before creating one, for which the answers can be used to decide on which template to use.
Here's the 2 things i have found better with EditorFor/DisplayFor:
They respect model hierarchies when rendering HTML helpers (e.g if you have a "Bar" object on your "Foo" model, the HTML elements for "Bar" will be rendered with "Foo.Bar.ElementName", whilst a partial will have "ElementName").
More robust, e.g if you had a List<T> of something in your ViewModel, you could use #Html.DisplayFor(model => model.CollectionOfFoo), and MVC is smart enough to see it's a collection and render out the single display for each item (as opposed to a Partial, which would require an explicit for loop).
I've also heard DisplayFor renders a "read-only" template, but i don't understand that - couldn't i throw a form on there?
Can someone tell me some other reasons? Is there a list/article somewhere comparing the three?
EditorFor vs DisplayFor is simple. The semantics of the methods is to generate edit/insert and display/read only views (respectively). Use DisplayFor when displaying data (i.e. when you generate divs and spans that contain the model values). Use EditorFor when editing/inserting data (i.e. when you generate input tags inside a form).
The above methods are model-centric. This means that they will take the model metadata into account (for example you could annotate your model class with [UIHintAttribute] or [DisplayAttribute] and this would influence which template gets chosen to generate the UI for the model. They are also usually used for data models (i.e. models that represent rows in a database, etc)
On the other hand Partial is view-centric in that you are mostly concerned with choosing the correct partial view. The view doesn't necessarily need a model to function correctly. It can just have a common set of markup that gets reused throughout the site. Of course often times you want to affect the behavior of this partial in which case you might want to pass in an appropriate view model.
You did not ask about #Html.Action which also deserves a mention here. You could think of it as a more powerful version of Partial in that it executes a controller child action and then renders a view (which is usually a partial view). This is important because the child action can execute additional business logic that does not belong in a partial view. For example it could represent a shopping cart component. The reason to use it is to avoid performing the shopping cart-related work in every controller in your application.
Ultimately the choice depends on what is it that you are modelling in your application. Also remember that you can mix and match. For example you could have a partial view that calls the EditorFor helper. It really depends on what your application is and how to factor it to encourage maximum code reuse while avoiding repetition.
You certainly could customize DisplayFor to display an editable form. But the convention is for DisplayFor to be readonly and EditorFor to be for editing. Sticking with the convention will ensure that no matter what you pass into DisplayFor, it will do the same type of thing.
Just to give my 2c worth, our project is using a partial view with several jQuery tabs, and each tab rendering its fields with its own partial view. This worked fine until we added a feature whereby some of the tabs shared some common fields. Our first approach to this was to create another partial view with these common fields, but this got very clunky when using EditorFor and DropDownListFor to render fields and drop downs. In order to get the ids and names unique we had to render the fields with a prefix depending on the parent partial view that was rendering it:
<div id="div-#(idPrefix)2" class="toHide-#(idPrefix)" style="display:none">
<fieldset>
<label for="#(idPrefix).Frequency">Frequency<span style="color: #660000;"> *</span></label>
<input name="#(idPrefix).Frequency"
id="#(idPrefix)_Frequency"
style="width: 50%;"
type="text"
value="#(defaultTimePoint.Frequency)"
data-bind="value: viewState.#(viewStatePrefix).RecurringTimepoints.Frequency"
data-val="true"
data-val-required="The Frequency field is required."
data-val-number="The field Frequency must be a number."
data-val-range-min="1"
data-val-range-max="24"
data-val-range="The field Frequency must be between 1 and 24."
data-val-ignore="true"/>
#Html.ValidationMessage(idPrefix + ".Frequency")
... etc
</fieldset>
</div>
This got pretty ugly so we decided to use Editor Templates instead, which worked out much cleaner. We added a new View Model with the common fields, added a matching Editor Template, and rendered the fields using the Editor Template from different parent views. The Editor Template correctly renders the ids and names.
So in short, a compelling reason for us to use Editor Templates was the need to render some common fields in multiple tabs. Partial views aren't designed for this but Editor Templates handle the scenario perfectly.
Use _partial view approach if:
View Centric Logic
What to keep all _partial view related HTML in this view only. In the template method, you will have to keep some HTML outside the Template View like "Main Header or any outer border/settings.
Want to render partial view with logic (From controller) using URL.Action("action","controller").
Reasons to use Template:
Want to remove ForEach(Iterator). Template is well enough to identify Model as a list type. It will do it automatically.
Model Centric Logic. If multiple views are found in the same displayfor Template folder, then rendering will depend on Passed Model.
Another difference that hasn't been mentioned so far is that a partialview doesn't add model prefixes while a template does
Here is the issue
So I have a masterpage that has an image whos source is a controller action returning a filestream.
The image will be different for each logged in user.
right now in my masterpage view i have this code wich relies on viewdata.
<img id="dealerlogo" src='/Files/DealerImage/GetDealerLogo/<%=Html.Encode(ViewData["dealerid"]) %>' alt="" />
obviously the problem with this is that I will need to provide the viewdata containing the ID
on everycontroller action returning a view that uses this master page, which is pretty much all of them.
Is there a better way to do this? Like is there a way to get the username right in the view?
Thanks!
You can easily encapsulate this logic in a [ChildActionOnly] Action that returns a partial view and then use new MVC 2 approach
<% Html.RenderAction("GetUserPhoto", "User"); %>
to have it everywhere in your view pages without passing ViewData in all actions.
Here's the solution:
[ChildActionOnly]
public ActionResult GetUserPhoto()
{
ViewData["UserId"] = Page.User.Identity;
return PartialView();
}
And in your view you use the same logic you used to show user image. Also you can directly send a FileResult to partial view to render image for you. In this approach you don't need to repeat ViewData["XXXX"] in all views and you need just to Render the new Partial View in your main Views.
You can use the Page.User.Identity.Name just like in the default logonusercontrol.aspx that is created for you when you create a new asp.net MVC site.
Welcome <b><%= Html.Encode(Page.User.Identity.Name ) %></b>
So for you, you would want something like this:
<img id="dealerlogo" src='/Files/DealerImage/GetDealerLogo/<%=Html.Encode(Page.User.Identity.Name) %>' alt="" />
I assume your GetDealerLogo action method has a parameter of dealerid. It's better to write something like:
<img src="<%= Url.Action("GetDealerLogo", "DealerImage", new { dealerid = ViewData["dealerid"] }) %>" />
Nothing wrong with passing it in via ViewData. You might also consider a strongly-typed View or your own ViewPage base class which exposes a DealerId property.
To make it even cleaner, I really like T4MVC. It would allow you to write:
<img src="<%= Url.Action(MVC.DealerImage.GetDealerLogo(dealerid)) %>" />
And, even further, you might create an Html helper, so you can write:
<%= Html.DealerLogo(dealerid) %>
For some reason I'm stuck on this. I need to filter results from a View based on a DropDownList in the same view. The basic idea is this: I have a list of providers that belong to various partners, but the provider list contains ALL the providers together (for all partners). I need to be able to display the providers by partner when someone wants to see just that partner (otherwise, the default listing will be ALL providers). My view currently is the "default" (showing all), but for some reason Im sitting here staring at the monitor (for the last 2 hours!) trying to figure out how to filter these results.
Any suggestions where to start/how to do it?!
EDIT: If you want to do this with jQuery and AJAX (which will provide a better user experience because only the subdivisions list will refresh), see this tutorial.
If I understand correctly, you basically want to do a WebForms-style postback.
Let's say you have a control with countries and country subdivisions (e.g. states, provinces, etc). When the country changes, you want the appropriate subdivisions to display.
So this would be view:
<% using (Html.BeginForm()) { %>
<%=Html.DropDownList("Address.CountryId", new SelectList(Country.GetAll(), "Id", "Name"), new { onchange = "this.form.submit();" })%>
<%=Html.DropDownList("Address.CountrySubdivisionId", new SelectList(CountrySubDivision.GetByCountryId(Model.CountryId), "Id", "Name"))%>
<input type="submit" name="btnSubmit" value="Submit"/>
<%} %>
This is the key to getting the dependent list to filter:
new { onchange = "this.form.submit();" }
And in the controller, you'd have something like this:
[AcceptVerbs(HttpVerbs.Post)]
public ViewResult Index(string btnSubmit)
{
if (btnSubmit == null)
{
// return the view displayed upon GET
}
else
{
// process the submitted data
}
}
In the above code, if the form submission was triggered by changing the value in a dropdown, btnSubmit will be null. Thus, the action you are POSTing to can tell whether or not the user meant to finalize her changes.
To add upon the earlier answers.
To create a drop down (in ASP .NET MVC 3) I did the following:
Add code to Index.cshtml
#using (Html.BeginForm())
{
#Html.DropDownList("EmployeeId", (SelectList)ViewData["EmployeeId"])
<input type="submit" name="btnSubmit" value="Submit"/>
}
Add code to YourModelNameController.cs in the default ActionResult for Index()
public ActionResult Index()
{
//create a selectlist
var employeeList = from el in db.Employee select el;
ViewData["EmployeeId"] = new SelectList(employeeList, "EmployeeId", "TmName");
return View(modelName);
}
There are many ways to skin this cat. Here's one.
Enclose your DropDownList in a form with METHOD=GET.
<form action="" method="get">
<select name="provider">
<option>1</option>
<!-- etc -->
</select>
</form>
Then, in you controller, filter based on the value of provider that was passed in. Remember to treat it as a Nullable parameter so that you can have some kind of behavior when it's empty.
Without posting some of your current code, it's tough to get much more specific than that.
Let's assume that you're probably passing a model to the view and that model is a list or IEnummerable of partners. What you want to do is restrict the list. In order to do that add a drop down list in the view and fill it with some possible partners. This can be done either by putting a list in ViewData or expanding the model passed back to the view. Both have advantages. Now when you change the drop down reload the page but append a parameter which is the filter. In the controller check for that parameter in the action, if it isn't present then return an unfiltered list, if it is then apply a filter and return the list. The view will just dumbly display whatever you give it.
As for the filtering you might want to try using LINQ.
You probably want a parameter to your controller action, maybe a (nullable?) id of the provider, to filter the results already when you get them from DB. Then just use the same view to list them, and request a new list if the dropdownlist changes.
Best solution I know is that one.
http://gridmvc.codeplex.com/SourceControl/latest