In my interface I have a list of text boxes, something like this :
http://screencast.com/t/YjIxNjUyNmU
The number of textboxes is unknown as each of them is associated with a Template.
In my page, the goal is to associate a number to some of those templates.
Here is a sample HTML code :
<% // loop on the templates
foreach(ITemplate template in templates)
{
// get the content from the input dictionary
int val;
content.TryGetValue(template.Id, out val);
// convert it as a string
string value = ((val > 0) ? val.ToString() : string.Empty);
// compute the element name/id (for dictionary binding)
string id = ??????????
string name = ??????????????
%>
<label for="<%= name %>"><%= template.Name %></label>
<input type="text" id="<%= id %>" name="<%= name %>" value="<%= value %>" />
<br />
<% }
%>
What I expect, in my controller, is to get a IDictionary where the first int is the template ID , and the other is the count given by the user.
Here is what I want :
public ActionResult Save(int? id, Dictionary<int, int> countByTemplate)
I tried a lot of things but nothing worked. I tried to read the sources but it's a maze, and I'm getting a headhache trying to get information about model binding.
Questions :
is there a good ressource on how the modelbinding works ?
I'd like someting exhaustive, I'm tired of the 84093043 blogs that talk about a given specific example.
how can I build my HTML, using to get a IDictionary (or even a IDictionary in my controller's action ?
Thanks a lot for your help
Information on how to write your input elements for binding to arrays, dictionaries, and other collections can be found at http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx.
Ok... Thanks to Levi I was able to get on a solution.
Not the cleaner one, but it works.
The HTML should be written this way:
<%
int counter = 0;
// loop on the templates
foreach(ITemplate template in templates)
{
// get the value as text
int val;
content.TryGetValue(template.Id, out val);
var value = ((val > 0) ? val.ToString() : string.Empty);
// compute the element name (for dictionary binding)
string id = "cbts_{0}".FormatMe(template.Id);
string dictKey = "cbts[{0}].Key".FormatMe(counter);
string dictValue = "cbts[{0}].Value".FormatMe(counter++);
%>
<input type="hidden" name="<%= dictKey %>" value="<%= template.Id %>" />
<input type="text" id="<%= id %>" name="<%= dictValue %>" value="<%= value %>" />
<label for="<%= id %>"><%= template.Name %></label>
<br />
<% }
%>
I had to add a hidden field to store the value.
I introduced a 'fake' counter just to loop over the dictionary the way ASP.Net MVC wants it.
As a result I got a dictionary filled with my values and '0' when the textbox is empty.
Another problem appeared: the ModelState was considered not valid because "a value is required". I don't want my values to be required, but looking at the modelbinder code, I did not found a way to tell the binder that a value is NOT required.
So I tricked the ModelState in my controller, removing all error, like this:
public ActionResult Save(int? id, Dictionary<int, int> cbts)
{
// clear all errors from the modelstate
foreach(var value in this.ModelState.Values)
value.Errors.Clear();
Well... I effectively got a solution, but the HTML is kind of ugly now, and counterintuitive (using an index to loop over a non-indexed collection ??).
And I need to trick each time I'll use this kind of binding to have it all work properly.
So I will now open a new post to make dictionary binder something better.
Here it is: ASP.Net MVC 2 - better ModelBinding for Dictionary<int, int>
EDIT - There is a cleaner solution, thanks to Pavel Chuchuva.
In the controller code, use a nullable int as value for the dictionary.
A bit more code to add, but much cleaner.
public ActionResult Save(int? id, Dictionary<int, int?> cbts)
{
// this is our final dictionary<int, int>
Dictionary<int, int> cbtsFinal = new Dictionary<int, int>();
// loop on the dicitonary with nullable values
foreach(var key in cbts.Keys)
{
// if we have a value
if(cbts[key].HasValue)
// then put it in the final dictionary
cbtsFinal.Add(key, cbts[key].Value);
}
Related
I am new to MVC and am still struggling a bit with what I think is pretty basic mvc stuff. My intended purpose is simply to render textboxes that represent a collection of data objects such that I can validate them easily using DataAnnoations. I've read and understand this tutorial, and have gotten it to work just fine - but it's only validating a single person object one at a time, composed of primitives:
http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx
My problem is similar to this post, but I was unsuccessful in applying it to my situation with no Razor:
MVC 3 client-side validation on collection with data annotations -- not working
Validation works great on "primitives" like String and int, but I don't understand validation on collections.
Here is the class that represents one instance of my object and some validation:
public class vc_EBTOCRecord
{
[StringLength(10, ErrorMessage = "must be under 10 chars")]
[Required(ErrorMessage = "Problem!")]
public String ItemText;
}
Here is the model that the view inherits:
public class EBTOCViewModel
{
public List<vc_EBTOCRecord> VcEbtocRecordList { get; set; }
}
Here is my controller:
public ActionResult Create()
{
EBTOCViewModel ebtocViewModel = new EBTOCViewModel();
List<vc_EBTOCRecord> vcEbtocRecordList = new List<vc_EBTOCRecord>();
vc_EBTOCRecord vcEbtocRecord = new vc_EBTOCRecord();
vcEbtocRecord.ItemText = "bob";
vcEbtocRecordList.Add(vcEbtocRecord);
vc_EBTOCRecord vcEbtocRecord2 = new vc_EBTOCRecord();
vcEbtocRecord.ItemText = "fred";
vcEbtocRecordList.Add(vcEbtocRecord2);
vc_EBTOCRecord vcEbtocRecord3 = new vc_EBTOCRecord();
vcEbtocRecord.ItemText = "joe";
vcEbtocRecordList.Add(vcEbtocRecord3);
ebtocViewModel.VcEbtocRecordList = vcEbtocRecordList;
return View(ebtocViewModel);
}
and lastly, here is what I am attempting in my view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<vcAdminTool.ViewModels.EBTOCViewModel>" %>
<h2>Create</h2>
<% using (Html.BeginForm()) {%>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>Fields</legend>
<% foreach(var thing in Model.VcEbtocRecordList)
{
Html.TextBoxFor(model => thing.ItemText);
//Html.TextBox("hello", thing.ItemText ); didn't work...
//Html.TextBox("hello"); nope, still didn't work
Response.Write("a record is here");
}
%>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
<div>
<%: Html.ActionLink("Back to List", "Index") %>
</div>
When the view renders, "a record is here" is printed three times, indicating to me that MVC recognizes the underlying object I have created, but why won't it render three textboxes?
The desired result is to have three blank validated textboxes. I will then write code that writes the information back to the database if the form is valid.
If you please, what obvious thing am i missing?
Ok guys i have a question, if this is my Form , and is generated for every item in the DB, i want to send the item with the quantity specified.
to send the quantity , from this razor view
#using (Html.BeginForm("AddToCart", "Prices"))
{
string qtname = "qt" + #item.id;
<div>
<input id="#qtname" name="#qtname" class="quantity" type="text" value="0" readonly="readonly" />
</div>
<input type="submit" value="Adauga" class="addToCart" />`
}
i need just these?
[HttpPost]
public ActionResult AddToCart(ProductsModel Products, string qtname)
{ }
and do i need some html.hidden for passing along the item.id too?
In the form you are sending only the qtname parameter as input field, whereas your controller action also expects a ProductsModel parameter which is never sent. If you want to bind it you will have to create input fields for all properties of this view model.
But in your case a better solution would be to simply include the id of the product as hidden field and then fetch the corresponding product from your datastore given this id:
[HttpPost]
public ActionResult AddToCart(string id, string qtname)
{
ProductsModel products = _repository.GetProduct(id);
...
}
Is it possible to bind a form element to a List<Long>?
ie. <form:input path="formValues[0]" /> binding to an element in List<Long> formValues; in the form backing object?
When I try this, it fails because Long does not have a default constructor new Long().
I've worked around it by creating a dummy holder class
class DummyLong {
private Long value;
...
}
making the list in the formbacking object a List<DummyLong> and changing the form tag to <form:input path="formValues[0].value" /> but this seems unnecessarily hideous and I'm sure there must be a better way. Haven't been able to find it though.
Use List<Long> formValues with <form:input path="formValues" />
I have an object MainObject with a list of objects, SubObjects, among other things. I am trying to have the user click a link on the View to add a new SubObject to the page. However, I am unable to pass the MainObject I am working with into the Action method. The MainObject I currently receive is empty, with all its values set to null. How do I send my controller action the MainObject that was used to render the View originally?
The relevant section of the view looks like this:
<div class="editor-list" id="subObjectsList">
<%: Html.EditorFor(model => model.SubObjects, "~/Views/MainObject/EditorTemplates/SubObjectsList.ascx")%>
</div>
<%: Ajax.ActionLink("Add Ajax subObject", "AddBlanksubObjectToSubObjectsList", new AjaxOptions { UpdateTargetId = "subObjectsList", InsertionMode = InsertionMode.Replace })%>
The relevant function from the controller looks like this:
public ActionResult AddBlanksubObjectToSubObjectsList(MainObject mainobject)
{
mainobject.SubObjects.Add(new SubObject());
return PartialView("~/Views/MainObject/EditorTemplates/SubObjectsList.acsx", mainobject.SubObjects);
}
I ended up with the following:
View:
<div class="editor-list" id="subObjectsList">
<%: Html.EditorFor(model => model.SubObjects, "~/Views/MainObject/EditorTemplates/SubObjectsList.ascx")%>
</div>
<input type="button" name="addSubObject" value="Add New SubObject" onclick="AddNewSubObject('#SubObjectList')" />
Control:
public ActionResult GetNewSubObject()
{
SubObject subObject= new SubObject();
return PartialView("~/Views/TestCase/EditorTemplates/SubObject.ascx", subObject);
}
And, finally, I added this JQuery script:
function AddNewSubObject(subObjectListDiv) {
$.get("/TestCase/GetNewSubObject", function (data) {
//there is one fieldset per SubObject already in the list,
//so this is the index of the new SubObject
var index = $(subObjectListDiv + " > fieldset").size();
//the returned SubObject prefixes its field namess with "[0]."
//but MVC expects a prefix like "SubObjects[0]" -
//plus the index might not be 0, so need to fix that, too
data = data.replace(/name="\[0\]/g, 'name="SubObject[' + index + "]");
//now append the new SubObject to the list
$(subObjectListDiv).append(data);
});
}
If someone has a better way to do this than kludging the MVC syntax for nested objects onto a returned View using JQuery, please post it; I'd love to believe that there is a better way to do this. For now, I'm accepting my answer.
In MVC, SelectList derives from MultiSelectList. I can't tell a difference between them though. For both, I have to tell it to select multiple items (I expected to not have to do this since the name has "multi" in it).
If you substitute "SelectList" with "MultiSelectList" in the code below, it will generate the same HTML:
<%
var leftSelectList = new SelectList(Model.LeftSide,"Key","Value");
var attrs = new SortedDictionary<string, object> {{"class", "ui-widget"}};
MvcHtmlString disabledStyle = MvcHtmlString.Create(Html.Encode("'width:50px;'"));
attrs.Add("style", disabledStyle);
attrs.Add("multiple", "multiple");
attrs.Add("size", "5"); /*-- how many items to show--*/
var leftItems = Html.DropDownList("ddlLeftItems", leftSelectList, attrs); %>
<%= leftItems.ToHtmlString()%>
The generated HTML is:
<select class="ui-widget" id="ddlLeftItems" multiple="multiple" name="ddlLeftItems" size="5" style="'width:50px;'">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="5">E</option>
<option value="9">I</option>
</select>
So, which one should I use? Thank you.
The SelectList object doesn't generate HTML. It creates a list of items that can then be used elsewhere. The DropDownList helper function is what generates the HTML used on the page, which is why you see the exact same HTML.
The SelectList object is derived from MultiSelectList, but provides you with a property to get the single selected value (called SelectedValue). The MultiSelectList just has a property called SelectedValues that holds all selected values.
So if you are doing a multi-select list, then it doesn't really matter which one you use, but if you are doing a single-select list, then you should use SelectList because it makes it easier to get the selected value.
MultiSelectList is used with Html.ListBox and Html.ListBoxFor methods. These helpers generate this: HTML select multiple Attribute