This question already has answers here:
How does MVC 4 List Model Binding work?
(5 answers)
Closed 7 years ago.
I have a list of items that will be associated to a user. It's a one-to-many relationship. I want the entire list of items passed into the view so that they can choose from ones that are not associated to them yet (and also see those that are already associated). I want to create checkboxes from these. I then want to send the selected ones back into the controller to be associated. How can I pass in the list of all of them, including those that aren't yet associated, and reliably pass them back in to be associated?
Here's what I tried first, but it's clear this won't work as I'm basing the inputs off the items passed in via the AllItems collection, which has no connection to the Items on the user itself.
<div id="item-list">
#foreach (var item in Model.AllItems)
{
<div class="ui field">
<div class="ui toggle checkbox">
<input type="checkbox" id="item-#item.ItemID" name="Items" value="#item.Active" />
<label for="item-#item.ItemID">#item.ItemName</label>
</div>
</div>
}
</div>
You cannot bind to a collection using a foreach loop. Nor should you be manually generating your html, which in this case would not work because unchecked checkboxes do not post back. Always use the strongly typed html helpers so you get correct 2-way model binding.
You have not indicated what you models are, but assuming you have a User and want to select Roles for that user, then create view models to represent what you want to display in the view
public class RoleVM
{
public int ID { get; set; }
public string Name { get; set; }
public bool IsSelected { get; set; }
}
public class UserVM
{
public UserVM()
{
Roles = new List<RoleVM>();
}
public int ID { get; set; }
public string Name { get; set; }
public List<RoleVM> Roles { get; set; }
}
In the GET method
public ActionResult Edit(int ID)
{
UserVM model = new UserVM();
// Get you User based on the ID and map properties to the view model
// including populating the Roles and setting their IsSelect property
// based on existing roles
return View(model);
}
View
#model UserVM
#using(Html.BeginForm())
{
#Html.HiddenFor(m => m.ID)
#Html.DisplayFor(m => m.Name)
for(int i = 0; i < Model.Roles.Count; i++)
{
#Html.HiddenFor(m => m.Roles[i].ID)
#Html.CheckBoxFor(m => m.Roles[i].IsSelected)
#Html.LabelFor(m => m.Roles[i].IsSelected, Model.Roles[i].Name)
}
<input type"submit" />
}
Then in the post method, your model will be bound and you can check which roles have been selected
[HttpPost]
public ActionResult Edit(UserVM model)
{
// Loop through model.Roles and check the IsSelected property
}
It doesn't look like you're going to be deleting the checkboxes dynamically so that makes this problem a lot easier to solve. NOTE: The following solution won't work as expected if you allow clients or scripts to dynamically remove the checkboxes from the page because the indexes will no longer be sequential.
MVC model binding isn't foolproof so sometimes you have to help it along. The model binder knows it needs to bind to a property called Items because the input field's name is Items, but it doesn't know Items is a list. So assuming in your controller you have a list of items to model bind to called Items what you need to do is help MVC recognize that you're binding to a list. To do this specify the name of the list and an index.
<div id="item-list">
#for (var i = 0; i < Model.AllItems.Count; i++)
{
<div class="ui field">
<div class="ui toggle checkbox">
<input type="checkbox" id="item-#Model.AllItems[i].ItemID" name="Items[#i]" value="#Model.AllItems[i].Active" />
<label for="item-#Model.AllItems[i].ItemID">#Model.AllItems[i].ItemName</label>
</div>
</div>
}
</div>
The key line here is this:
<input type="checkbox" id="item-#Model.AllItems[i].ItemID" name="Items[#i]" value="#Model.AllItems[i].Active" />
Notice the Items[#i]? That's telling the model binder to look for a property named Items and bind this value to the index at i for Items.
My model has a list property and in the view i need to be able to add an unlimited number of strings to it.
So far it's not working and my lousy idea to make it work is the following: Each time a string is added, there's a postback. The new string is in the ViewModel's "newString" property (not a list). The HttpPost method will then save "newString" to the database, refill the list "allStrings" with all strings stored in the database and return the view with all strings and an emtpy textbox to add another string.
This is not a good solution for me because:
There's a lot of postbacks if the user wants to add multiple strings
If the user adds some strings to his item (a supplier), all these strings are saved to the database. When he then decides he doesn't want to save the supplier all the stored strings are useless and need to be deleted from the database.
I have not implemented this because I know there's far better solutions and I just don't find them. This is what I have:
The ViewModel:
public class SupplierViewModel
{
public Supplier Supplier { get; set; }
public List<string> allStrings;
public string newString { get; set; }
}
The Controller:
[HttpPost]
public ActionResult Create(SupplierViewModel model)
{
model.allStrings.Add(model.newString);
if (ModelState.IsValid && model.newString == "")
db.Suppliers.Add(model.Supplier);
db.SaveChanges();
return RedirectToAction("Index");
}
model.newString = "";
return View(model);
}
The View:
<div class="editor-label">
#Html.LabelFor(model => model.allStrings)
</div>
#for (int i = 0; i < Model.allStrings.Count; i++)
{
<div class="editor-label">
#Html.EditorFor(model => model.allStrings[i])
</div>
}
<div class="editor-label">
#Html.EditorFor(model => model.newString)
</div>
Note that in this implemented version, none of the strings are saved to the database and the list is cleared after each postback. Only one string (the last one added) is displayed on the view.
Basically the question is: How can I have the user add as many strings as he wants with as few postbacks and database-interaction as possible?
Thanks in advance
You can dynamically add new elements with jquery that will post back to your collection. The html your generating for the textboxes will be similar to
<input type="text" name="allStrings[0]" .../>
<input type="text" name="allStrings[1]" .../>
The name attribute includes an indexer which allows the DefaultModelBinder to bind a collection.
Wrap you textboxes in a container, include a button to add a new item, an input that gets copies and added to the DOM.
<div id="strings">
#for (int i = 0; i < Model.allStrings.Count; i++)
{
<div class="editor-label">
#Html.TextBoxFor(m => m.allStrings[i])
</div>
}
</div>
<div id="newstring" style="display:none;">
<input type="text" name="allStrings[#]" />
</div>
<button type="button" id="addstring">Add</button>
Script
var container = $('#strings');
$('#addstring').click(function() {
var index = container.children('input').length;
var clone = $('#newstring').clone();
clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
container .append(clone.html());
});
Refer this fiddle for a working example
Note your model no longer required the public string newString { get; set; } property, and when you post back your collection will contain all the values of the textboxes.
I have a View that loads a few partial views at load time depending on a database. It's working great so far with one exception: because this is a database first situation, I'm using a meta class to add the appropriate markup to the model fields. It worked perfectly fine when I had all the stuff on a single page but since I broke it out into partials, it refuses to recognize the meta class anymore.
There's a lot of unrelated code everywhere so I've broken out the important stuff (some names have been changed to protect the innocent)...
In the view to load said partials:
foreach (var p in MyProject.Controllers.UtilityController.GetPViews())
{
#Html.Partial("../Partial/" + p.ViewName, new ViewDataDictionary { { "column", "column" + p.ColumnSize } })
}
The main part of the meta class:
namespace MyProject.Models
{
public class MyProjectData_Meta
{
[MetadataType(typeof(MyProjectData_Meta))]
public partial class MyProjectData
{
public class MyProjectData_Meta
{
//Gets and sets and stuff. For example:
[Required(ErrorMessage = "Please enter a first name.")]
[Display(Name = "First Name")]
[UIHint("FloatLabel")]
public string MemberFirstName { get; set; }
}
}
}
}
And finally the code that pulls the list from said database...
public static List<ModuleList> GetPViews()
{
MyProjectEntities pv = new MyProjectEntities();
List<ModuleList> lvl = pv.ModuleLists.OrderBy(s => s.PageOrder).ToList();
return lvl;
}
So is there some glaring detail I'm missing or more information you need from me in order to tell me where I'm being stupid?
EDIT: Doh! Forgot to put in my actual view code:
#model MyProject.Models.MyProjectData
<div class="#ViewBag.column">
<fieldset id="fsBasic">
<legend>Basic Information</legend>
<div class="editor-label">
#Html.LabelFor(model => model.MemberFirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MemberFirstName)
#Html.ValidationMessageFor(model => model.MemberFirstName)
</div>
</div>
To answer the other question: I know it's not using the meta class because the LabelFor is showing "MemberFirstName" instead of "First Name" which is what it does actually do when I'm not using a partial class.
I'm using MVC 4 and usually Visual Studio will create all the views for you. I have one form that just has one field and I want to just embed the create form into the Index View.
So the Index View has something like #model IEnumerable<Models.LinkModel>
So I access it by iterating through the Model collection.
But if I try to embed the form for the create action I need #model Models.LinkModel
and it is accessed by Model.Name as well. Is there a way to do this or use a different variable name?
Ok here is some extra info.
SO I have a model.
public class LinkModel
{
public string LinkUrl {get;set;}
}
I have a controller that has the Create and Index ActionResults.
Now in the Index view I have
#model IEnumerable<Models.LinkModel>
#{
ViewBag.Title = "Links";
}
I can do all my fancy logic to list all the links.
#foreach(link in Model)
{
<p>link.LinkUrl<p>
}
The Create View has this
#model Models.LinkModel // Note that it is just one item not IEnumerable
#{
ViewBag.Title = "Add Link";
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset class="editor-fieldset">
<legend>LinkModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.LinkUrl)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.LinkUrl)
</div>
<p>
<input type="submit" value="Add Link" />
</p>
</fieldset>
}
Now it seems pretty stupid to have a create form for just one field. I want to put this form on the Index page. Problem is that I access the object using the variable Model. I wanted to know if there is a way to have two seperate instances or be able to access the Model objects with different names.
Have a composite model with a list of items and 1 single item for the create
public class IndexModel {
public LinkModel CreateModel {get; set;}
public IEnumerable<LinkModel> Items {get; set;}
}
#model IndexModel
#using(Html.BeginForm("create")) {
#Html.EditorFor(m => m.CreateModel.Name);
}
#foreach(var item in Model.Items) {
#item.Name
}
I've read several different posts on paging w/ in MVC but none describe a scenario where I have something like a search form and then want to display the results of the search criteria (with paging) beneath the form once the user clicks submit.
My problem is that, the paging solution I'm using will create <a href="..."> links that will pass the desired page like so: http://mysite.com/search/2/ and while that's all fine and dandy, I don't have the results of the query being sent to the db in memory or anything so I need to query the DB again.
If the results are handled by the POST controller action for /Search and the first page of the data is rendered as such, how do I get the same results (based on the form criteria specified by the user) when the user clicks to move to page 2?
Some javascript voodoo? Leverage Session State? Make my GET controller action have the same variables expected by the search criteria (but optional), when the GET action is called, instantiate a FormCollection instance, populate it and pass it to the POST action method (there-by satisfying DRY)?
Can someone point me in the right direction for this scenario or provide examples that have been implemented in the past? Thanks!
My method is to have an Action that handles both the post and the get scenarios.
This is my which can be handled by both GET and POST methods:
public ViewResult Index([DefaultValue(1)] int page,
[DefaultValue(30)] int pageSize,
string search,
[DefaultValue(0)] int regionId,
[DefaultValue(0)] int eventTypeId,
DateTime? from,
DateTime? to)
{
var events = EventRepo.GetFilteredEvents(page, pageSize, search, regionId, eventTypeId, from, to);
var eventFilterForm = EventService.GetEventFilterForm(from, to);
var eventIndexModel = new EventIndexModel(events, eventFilterForm);
return View("Index", eventIndexModel);
}
The eventFilterForm is a presentation model that contains some IEnumerable<SelectListItem> properties for my search form.
The eventIndexModel is a presentation model that combines the eventFilterForm and the results of the search - events
The events is a special type of IPagedList. You can get more information and code for that here and here. The first link talks about IPagedList where as the second link has an Advanced Paging scenario which you should need.
The advanced paging has the following method that I use:
public static string Pager(this HtmlHelper htmlHelper, int pageSize, int currentPage, int totalItemCount, RouteValueDictionary valuesDictionary)
And I use it like so:
<%= Html.Pager(Model.Events.PageSize,
Model.Events.PageNumber,
Model.Events.TotalItemCount,
new
{
action = "index",
controller = "search",
search = ViewData.EvalWithModelState("Search"),
regionId = ViewData.EvalWithModelState("RegionId"),
eventTypeId = ViewData.EvalWithModelState("EventTypeId"),
from = ViewData.EvalDateWithModelState("From"),
to = ViewData.EvalDateWithModelState("To")
}) %>
This creates links that look like:
/event/search?regionId=4&eventTypeId=39&from=2009/09/01&to=2010/08/31&page=3
HTHs,
Charles
Ps. EvalWithModelState is below:
PPs. If you are going to put dates into get variables - I would recommend reading my blog post on it... :-)
/// <summary>
/// Will get the specified key from ViewData. It will first look in ModelState
/// and if it's not found in there, it'll call ViewData.Eval(string key)
/// </summary>
/// <param name="viewData">ViewDataDictionary object</param>
/// <param name="key">Key to search the dictionary</param>
/// <returns>Value in ModelState if it finds one or calls ViewData.Eval()</returns>
public static string EvalWithModelState(this ViewDataDictionary viewData, string key)
{
if (viewData.ModelState.ContainsKey(key))
return viewData.ModelState[key].Value.AttemptedValue;
return (viewData.Eval(key) != null) ? viewData.Eval(key).ToString() : string.Empty;
}
Make the Search parameter part of your View Model:
public SearchViewModel
{
string SearchParameters { get; set; }
List<SearchObjects> SearchResults { get;set; }
}
Then just set the Search Textbox equal to SearchParameters.
You cannot "store" the search query unless you bring back ALL results and then store those in the page somehow. That is horribly inefficient. The web is stateless, so you will have to go back to the database and re-query for more results.
I understand what you are saying; you could change the form to use buttons and post the page back everytime. Or, you could pass all the criteria in the URL for the paging as querystring variables. Or you could use JQuery to do the post (it has a $.post method that can be invoked from a link click or other click (http://api.jquery.com/jQuery.post/).
HTH.
This problem goes away if you include the search text, as well as the current results page, in your querystring instead of POSTing the search text. As an added benefit, your users can then bookmark their search results.
To do this your search button just needs to build the GET request URL using the current value of the search box. This can be done either in javascript or by using GET as your search form's method attribute, e.g. <form method="get" action="/search">.
I recommend cacheing your search results and giving them an ID. Then for each paging link, you can reference the search ID as a parameter (on each search page link) and in your action, pull it from cache, then query over it.
Using this method, you don't need to worry about anything other than the first POST submit of the search form.
Refer to my post for more details.
I had this same problem and here's what I did.
Download PagedList from Nuget
Change your form to do a GET and create a ViewModel type similiar to this (if you love AdventureWorks and Model Binding as much as I do):
`
using PagedList;
namespace SearchFormResultPagingExample.Models {
public class SearchViewModel {
public int? Page { get; set; }
public string EmailAddress { get; set; }
public string LastName { get; set; }
public IPagedList<Contact> SearchResults { get; set; }
public string SearchButton { get; set; }
}
}
`
3.Use the ViewModel as the parameter to your controller's action method
using System.Linq;
using System.Web.Mvc;
using SearchFormResultPagingExample.Models;
using PagedList; //NOTE: use Nuget to reference PagedList
namespace SearchFormResultPagingExample.Controllers {
public class SearchController : Controller {
const int RecordsPerPage = 25;
public ActionResult Index(SearchViewModel model) {
if (!string.IsNullOrEmpty(model.SearchButton) || model.Page.HasValue) {
var entities = new AdventureWorksEntities();
var results = entities.Contacts.Where(c => c.LastName.StartsWith(model.LastName) && c.EmailAddress.StartsWith(model.EmailAddress))
.OrderBy(o => o.LastName);
var pageIndex = model.Page ?? 0;
model.SearchResults = results.ToPagedList(pageIndex, 25);
}
return View(model);
}
}
}
Use the pager on in your View:
#model SearchFormResultPagingExample.Models.SearchViewModel
#using PagedList.Mvc;
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm("Index", "Search", FormMethod.Get)) {
#Html.ValidationSummary(false)
<fieldset>
<legend>Contact Search</legend>
<div class="editor-label">
#Html.LabelFor(model => model.EmailAddress)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.EmailAddress)
#Html.ValidationMessageFor(model => model.EmailAddress)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastName)
#Html.ValidationMessageFor(model => model.LastName)
</div>
<p>
<input name="SearchButton" type="submit" value="Search" />
</p>
</fieldset>
}
#if (Model.SearchResults != null && Model.SearchResults.Count > 0) {
foreach (var result in Model.SearchResults) {
<hr />
<table width="100%">
<tr>
<td valign="top" width="*">
<div style="font-weight: bold; font-size:large;">#result.LastName, #result.FirstName</div>
#result.Title<br />
#result.Phone<br />
#result.EmailAddress
</td>
</tr>
</table>
}
<hr />
#Html.PagedListPager(Model.SearchResults,
page => Url.Action("Index", new RouteValueDictionary() {
{ "Page", page },
{ "EmailAddress", Model.EmailAddress },
{ "LastName", Model.LastName }
}),
PagedListRenderOptions.PageNumbersOnly)
}
MVC will coerce the querystring to and from your ViewModel type parameter. It's very slick!