One of the properties of my ViewModel is an array which, unfortunately, is null every time I post back to the controller. I figured a simple hack where I place the values into a coma-delimited string.
This works great for our paging plugin, which posts back to our Index method, using a RouteValueDictionary. However, it is not working in the Html.BeginForm helper which posts back to a different controller action (the Update method).
View
#*Since we can't send arrays or complex objects break array down into string for RouteValueDictionary*#
var channelCodes = "";
for (int i = 0; i < Model.searchChannelCode.Length; i++)
{
channelCodes += Model.searchChannelCode[i];
if (i + 1 < Model.searchChannelCode.Length)
{
channelCodes += ",";
}
}
#*The 'searchChannelCodesPagin' variable from this RouteValueDictionary always posts back as null
using (Html.BeginForm("Update", "ZipCodeTerritory", new RouteValueDictionary()
{
{"searchChannelCodesPaging", channelCodes }
}, FormMethod.Post, new {id = "UpdateForm"}))
{
#Html.HiddenFor(model => model.searchZip)
#Html.HiddenFor(model => model.searchTerritory)
#Html.HiddenFor(model => model.searchState)
#Html.HiddenFor(model => model.searchActiveOnly)
#Html.HiddenFor(model => model.zipCodeTerritory)
<div id="cloneBox">
<div id="rw1">
#Html.LabelFor(model => model.newTerritory)
#Html.TextBoxFor(model => model.newTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })
#Html.LabelFor(model => model.newDescription)
#Html.TextBoxFor(model => model.newDescription, new { style = "width: 250px;padding-left:10px;", maxLength = 30 })
#Html.LabelFor(model => model.newEffectiveDate)
#Html.TextBoxFor(model => model.newEffectiveDate, new { style = "width: 80px;padding-left:10px;" })
<div id="rw2" style="padding-top: 10px;">
#Html.LabelFor(model => model.newChannelCode)
#Html.DropDownListFor(model => model.newChannelCode, Model.ChannelCodes, " ")
#Html.LabelFor(model => model.newStateCode)
#Html.DropDownListFor(model => model.newStateCode, Model.StateCodes, " ")
#Html.LabelFor(model => model.newEndDate)
#Html.TextBoxFor(model => model.newEndDate, new { style = "width: 80px;" })
</div>
</div>
</div>
<br/>
<div id="buttonDiv">
<button type="submit" id="CloneButton" name="button" value="clone">Apply New Data</button>
<button type="submit" id="deleteButton" name="button" value="delete">Delete Selected Items</button>
<button type="submit" id="removeButton" name="button" value="removeErrors">Remove Selected Errors</button>
</div>
}
Controller
The forma above posts to this controller action. The searchChannelCodePaging variable is null each time.
[HttpPost]
public ActionResult Update(ZipCodeIndex updateZip, string button, string searchChannelCodesPaging)
{
Since you are doing a post, the simplest way to get it to the backend would be add a hidden field:
#Html.HiddenFor("searchChannelCodesPaging", searchChannelCodesPaging);
As a routing value, you may need to get it explicitly within the control via one of the two following approaches. These objects are directly accessible within the Controller class.
RouteData.Values("searchChannelCodesPaging")
Request.QueryString.Get("searchChannelCodesPaging");
You don't have to serialize a array type model parameter to a CSV string to get it to post to your controller. You can do this instead:
#for (var i = 0; i < Model.searchChannelCode.Length; i++)
{
#Html.HiddenFor(m => m.searchChannelCode[i]);
}
Related
I render a PartialView inside my main View
View:
#model FullProductViewModel
...
<div class="send-container">
#Html.Partial("_CommentForm", new CommentViewModel { ProductId = Model.Id, Title = "" , Context="" })
</div>
...
I have a filed with name "Title" in Both my classes "FullProductViewModel" and "CommentViewModel".
_CommentForm PartialView:
#model CommentViewModel
<p class="page-title">#Resources.SendComment</p>
#using (Html.BeginForm("Comment", "Home", FormMethod.Post, new { #class = "form-comment form-submit" }))
{
#Html.AntiForgeryToken()
<div class="input-group">
#Html.LabelFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="input-group">
#Html.LabelFor(model => model.Context)
#Html.ValidationMessageFor(model => model.Context, "", new { #class = "text-danger" })
#Html.TextAreaFor(model => model.Context, htmlAttributes: new { #class = "form-control", rows = "8" })
</div>
<div class="input-group">
#Html.LabelFor(model => model.CaptchaCode)
#Html.ValidationMessageFor(model => model.CaptchaCode, "", new { #class = "text-danger" })
#Html.EditorFor(model => model.CaptchaCode, new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="captcha-wrapper">
<img alt="Captcha" id="imgcaptcha" src="#Url.Action("Captcha", "Captcha")" />
</div>
<button class="btn btn-submit" type="submit">#Resources.SendMessage</button>
}
The problem is "Title" inside PartialView take its value form "FullProductViewModel" model but not "CommentViewModel ". i can easily change the field name "Title" inside one of models to solve problem... but why this happened and how i can fix it without change field name?
Your Title property is conflicting with the #{ ViewBag.Title = ".. line of code in your view (the ViewBag code is used by the _Layout.cshtml file to set the global <title> attribute for the page).
All the HtmlHelper methods that generate form controls set the value by checking (in order)
ModelState
The ViewDataDictionary (ViewData or ViewBag)
The value of the models property
In your case, nothing has been added to ModelState. But because a value for Title has been added to the ViewDataDictionary, its that value which is used for the value of your textbox. The method never gets to read the actual value you have set in your model.
The only realistic option (unless you want to modify the code in the _Layout and all views that use it) is to change the name of the property.
I am trying to return the results of a table back to the controller for further manipulation. Once returned to the controller the value shows as null. In the past I have been able to use #Html.HiddenFor to return the values but it doesn't seem to be working in this instance. Not sure what I am doing wrong here. Any help is greatly appreciated.
#model IEnumerable<Project.Models.Item>
#{
ViewBag.Title = "Welcome to The Project";
}
#using (Html.BeginForm("UpdateQuality", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div class="row">
<div class="form-group">
<table class="table table-bordered">
<tr>
<th>#Html.DisplayNameFor(m => m.Name)</th>
<th>#Html.DisplayNameFor(m => m.SellIn)</th>
<th>#Html.DisplayNameFor(m => m.Quality)</th>
</tr>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>#Html.DisplayFor(m => m.ElementAt(i).Name)</td>
<td>#Html.DisplayFor(m => m.ElementAt(i).SellIn)</td>
<td>#Html.DisplayFor(m => m.ElementAt(i).Quality)</td>
#Html.HiddenFor(m => m.ElementAt(i).Name)
#Html.HiddenFor(m => m.ElementAt(i).SellIn)
#Html.HiddenFor(m => m.ElementAt(i).Quality)
</tr>
}
</table>
<div class="form-group">
<div style="margin-top: 50px">
<input type="submit" class="btn btn-primary" value="Advance Day"/>
</div>
</div>
</div>
</div>
}
And here is the controller which returns null.
public ActionResult UpdateQuality(List<Item> Items )
{
return View("Index", (object)Items);
}
You cannot use ElementAt() in a HtmlHelper method that generates form controls (look at the name attribute your generating - it does not match your model).
Either change the model to be IList<T>
#model List<Project.Models.Item>
and use a for loop
#for (int i = 0; i < Model.Count; i++)
{
....
#Html.HiddenFor(m => m.[i].Name)
....
or change use a custom EditorTemplate for typeof Item, and in the main view, use #Html.EditorFor(m => m) to generate the correct html for each item in the collection.
I'm using bootstrap.datepicker to set a datepicker in one of my Asp.Net MVC 5 Views. I want to post the date whenever a new one is selected. My code looks as follows:
#using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post))
{
<div class="form-group form-horizontal">
#Html.LabelFor(model => model.Date)
#Html.TextBoxFor(model => model.Date, new { #class = "form-control datepicker", data_provide="datepicker", data_date_format="dd/mm/yyyy"})
#Html.ValidationMessageFor(model => model.Date)
</div>
}
Hoever, I don't know how to force the Post method when I select a new date.
You can subscribe to the datepicker's changedate event and post the form:
$('.datepicker').datepicker().on('changeDate', function () {
$(this).closest('form').submit(); // or this.form.submit();
});
I've done some research on this and seem to find posts that are either outdated or don't quite work in my situation. I may be using wrong keywords when searching though... =/
On my web page I have Tabs containing Group boxes that contain Lines which in turn contain Items.
So it is lists of lists 4 levels.
The problem:
When posting back, ViewModel.Tabs is null and I can't save anything.
Everything displays quite nicely, but nothing is posted back.
The code
Views/Shared/EditorTemplates/Tab.cshtml
#model AWMCCRM.Web.ViewModels.Tab
#Html.HiddenFor(vm => vm.Name)
<div id="tab-#Model.Name.Replace(" ", string.Empty)" class="tab-content two">
#Html.EditorFor(vm => vm.Groups)
</div>
Views/Shared/EditorTemplates/Group.cshtml
#model AWMCCRM.Web.ViewModels.Group
#Html.HiddenFor(vm => vm.Name)
<fieldset>
<legend>#Model.Name</legend>
#Html.EditorFor(vm => vm.Lines)
</fieldset>
Views/Shared/EditorTemplates/Line.cshtml
#model AWMCCRM.Web.ViewModels.Line
<div class="_100Max">
#Html.HiddenFor(vm => vm.Name)
#Html.EditorFor(vm => vm.Items)
</div>
Views/Shared/EditorTemplates/Item.cshtml
#model AWMCCRM.Web.ViewModels.Item
<div class="_#Model.DisplaySize" title="#Model.Description">
<p>
#Html.HiddenFor(x => x.DataType)
#Html.HiddenFor(x => x.Description)
#Html.HiddenFor(x => x.DisplaySize)
#Html.HiddenFor(x => x.DisplayType)
#Html.HiddenFor(x => x.IDsPiped)
#Html.HiddenFor(x => x.ItemType)
#Html.HiddenFor(x => x.Name)
#Html.LabelFor(vm => vm.Value, Model.Name)
#switch (Model.DisplayType.ToLower().Replace(" ", string.Empty))
{
case "checkbox":
#Html.CheckBoxFor(vm => Convert.ToBoolean(vm.Value))
break;
case "dropdownlist":
#Html.DropDownListFor(vm => vm.Value, Model.ValueOptionListItems)
break;
case "multiselectlist":
#Html.ListBoxFor(
x => x.SelectedValueList,
Model.ValueOptionListItems,
new { id = "itemValuesMultiSelect", multiple = "multiple", Size = 15 })
break;
case "radiobutton":
#Html.RadioButtonFor(vm => vm.Value, Model.Value)
break;
case "textarea":
#Html.TextAreaFor(vm => vm.Value)
break;
default:
#Html.TextBoxFor(vm => vm.Value)
break;
}
</p>
</div>
The ViewModel (cut down version)
namespace AWMCCRM.Web.ViewModels
{
public class PersonEditViewModel
{
public List<Tab> Tabs { get; set; }
//Other properties
//...
}
}
The View (cut down version)
#using (Html.BeginForm("Edit", "Person", FormMethod.Post, new { id = "validate-form", #class = "block-content form" }))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(x => x.PersonID)
#foreach (var tab in Model.Tabs)
{
#Html.EditorFor(vm => tab)
}
<input class="close-toolbox button" type="submit" value="Save">
}
Any suggestions?
Thanks
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
It's an old article, but it still applies.
I had this exact problem, but basically due to the model binding system you need to use an explicit for loop instead of a foreach loop, and reference your elements by their index.
#using (Html.BeginForm("Edit", "Person", FormMethod.Post, new { id = "validate-form", #class = "block-content form" }))
{
Html.AntiForgeryToken()
Html.HiddenFor(x => x.PersonID)
for (int i = 0; i<Model.Tabs.Count; i++)
{
Html.EditorFor(x => Model.Tabs[i])
}
<input class="close-toolbox button" type="submit" value="Save">
}
I am new to MVC, so please forgive me if I am being so noob :).
In my new project, I want to make a 'Create Song' page which, of course, creates a new song. In model design, one song can have many artists. So, on the create song page, a user should be able to search for artists and add artists from the search results by pressing the 'Add' links of artists in the search result.
Currently, I have two submit buttons in form which are "Submit" and "SearchArtist" and they call http POST "Create" action method. A ViewModel object(CreateSongScrnData) is used to post the screen data. And it's all working ok. But when I try to add an artist from Artist search result, using #Url.Action passing ViewModel data to "Create" http get method, the viewmodel object parameter is always null when it come into the actiona method. Please help me with some advice and enlighten me if I am missing some concepts. Thank you so much in advance.
Code is as follows.
public ActionResult Create(CreateSongScrnData modelData, Int32? artistIDToAdd)
{
if (modelData != null && artistIDToAdd != null)
{
var artist = db.Artists.Find(artistIDToAdd);
modelData.Song.Artists.Add(artist);
}
ViewBag.GenreID = new SelectList(db.Genres, "GenreID", "Name");
ViewBag.AlbumID = new SelectList(db.Albums, "AlbumID", "Name");
return View(modelData);
}
[HttpPost]
public ActionResult Create(CreateSongScrnData modelData)
{
switch (modelData.SubmitCommand)
{
case "AddNewSong":
if (ModelState.IsValid)
{
db.Songs.Add(modelData.Song);
db.SaveChanges();
return RedirectToAction("Index");
}
break;
default:
modelData.SearchResult = db.Artists.Where(a => a.Name.Contains(modelData.ArtistSearchString)).ToList();
break;
}
ViewBag.GenreID = new SelectList(db.Genres, "GenreID", "Name", modelData.Song.GenreID);
ViewBag.AlbumID = new SelectList(db.Albums, "AlbumID", "Name", modelData.Song.AlbumID);
return View(modelData);
}
Code snippet of search in the view is as follows:
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.LabelFor(model => model.Song.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Song.Name)
#Html.ValidationMessageFor(model => model.Song.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Song.MyanmarName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Song.MyanmarName)
#Html.ValidationMessageFor(model => model.Song.MyanmarName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Song.Genre)
</div>
<div>
#Html.DropDownList("GenreID", "Choose Genre")
#Html.ValidationMessageFor(model => model.Song.GenreID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Song.AlbumID, "Album")
</div>
<div class="editor-field">
#Html.DropDownList("AlbumID", "Choose Album")
#Html.ValidationMessageFor(model => model.Song.AlbumID)
</div>
<div class="editor-label">
<p>Sing by this artists:</p>
#if (Model.AddedArtists != null)
{
<table><tr><th>Name</th></tr>
#foreach (var item in Model.AddedArtists)
{
<tr><td>#item.Name</td></tr>
}
</table>
}
</div>
<div style=" border-top:1px solid #ccc; width: 400px; height:auto; margin-top:30px; margin-bottom:30px;"></div>
<div>
<p>Search and add artists</p>
#Html.TextBoxFor(model => model.ArtistSearchString)
<input type="submit" name="SubmitCommand" value="SearchArtist" class="cancel" />
#if (Model.SearchResult != null)
{
<div>
<table><tr><th>Name</th><th></th></tr>
#foreach (var item in Model.SearchResult)
{
<tr><td>#item.Name</td>
<td>Add</td>
</tr>
}
</table>
</div>
}
</div>
<div style=" border-top:1px solid #ccc; width: 400px; height:auto; margin-top:30px; margin-bottom:30px;"></div>
<p>
<input type="submit" name="SubmitCommand" value="AddNewSong" />
</p>
}
I think you are mixing too things in a single form.
Solution 1)
Create a first step where user insert data and create song.
Create a second step where user add artists to the song.
Solution 2)
Let to the submit button the function to store data.
For the search of artist use a ajax compnent like this:
http://harvesthq.github.com/chosen/