Hidden fields have the wrong value after first POST - c#

I have a view on which the user can log time spent on an Activity using an HTML form. So that view loops through a list of all Activities and generates a log time form (contained in the _LogTime partial view) for each one. The only piece of information passed to the partial view from the Index view is the ActivityId, which is placed in a hidden form. The rest of the required information is provided via the from by the user.
The problem I'm having is that once I submit one of the forms, the hidden field for all of the forms is set to the ActivityId of the form I just submitted. It's worth noting that when the page first loads (before I submit any forms), the hidden fields are correct, and when I submit a form for the first time, the correct Activity gets time logged to it (and none of the others erroneously get time logged). But any form submissions after that will only log time to the Activity I first submitted the form for.
Any idea what's going on here? Why are all of the hidden fields being set to the same ActivityId? And why only after the first POST? Let me know if you need any clarification of the problem.
Models:
public class Activity
{
public int ActivityId { get; set; }
public string Name { get; set; }
}
public class UserActivity
{
public int UserId { get; set; }
public int ActivityId { get; set; }
public int Duration { get; set; }
public DateTime Date { get; set; }
}
Views:
// Index View
#foreach (Activity activity in Model)
{
#Html.Partial("_LogTime", new UserActivity(activity.ActivityId))
}
// _LogTime Partial View
#using (Html.BeginForm())
{
<fieldset>
#Html.HiddenFor(model => model.ActivityId)
#Html.EditorFor(model => model.Duration)
#Html.EditorFor(model => model.Date)
<input type="submit" value="LOG TIME" />
</fieldset>
}
Controller:
public class ActivityController : Controller
{
private readonly DbContext _db = new DbContext();
public ActionResult Index()
{
return View(_db.Activities.ToList());
}
[HttpPost]
public ActionResult Index(UserActivity activity)
{
if (ModelState.IsValid)
{
_db.UserActivities.Add(activity);
_db.SaveChanges();
}
return View(_db.Activities.ToList());
}
}


What you are experiencing is due to the fact that the html helper methods automatically update form elements with post variables of the same name. The values are stored in ModelState. One way to fix this is to remove the offending entry from ModelState.
Another possible fix is to do a redirect instead.
[HttpPost]
public ActionResult Index(UserActivity activity)
{
if (ModelState.IsValid)
{
_db.UserActivities.Add(activity);
_db.SaveChanges();
}
// Remove the ActivityId from your ModelState before returning the View.
ModelState.Remove("ActivityId")
return View(_db.Activities.ToList());
}
As witnessed by the comments below, use of the Remove method can indicate a deeper issue with the flow of your application. I do agree with Erik on that point. As he points out, redesigning the flow of an application can be a time consuming task.
When encountering the behavior indicated by the question, if there is a way to solve the problem without modifying ModelState, that would be a preferred solution. A case in point might be where more than a single element were affected by this issue.
For completeness, here is an alternate solution:
[HttpPost]
public ActionResult Index(UserActivity activity)
{
if (ModelState.IsValid)
{
_db.UserActivities.Add(activity);
_db.SaveChanges();
}
return RedirectToAction("Index");
}
Towards the end of silencing my critic, here is the rewrite that he could not come up with.
// Index View
#using (Html.BeginForm())
{
#for (var i = 0; i < Model.Count; i++)
{
<div>
#Html.HiddenFor(model => model[i].ActivityId)
#Html.EditorFor(model => model[i].Duration)
#Html.EditorFor(model => model[i].Date)
</div>
}
<input type="submit" value="LOG TIME ENTRIES" />
}
// Controller Post Method
[HttpPost]
public ActionResult Index(List<UserActivity> activities)
{
if (ModelState.IsValid)
{
foreach( var activity in activities )
{
var first = _db.UserActivities
.FirstOrDefault(row => row.ActivityId == activity.ActivityId );
if ( first == null ) {
_db.UserActivities.Add(activity);
} else {
first.Duration = activity.Duration;
first.Date = activity.Date;
}
}
_db.SaveChanges();
return RedirectToAction("index");
}
// when the ModelState is invalid, we want to
// retain posted values and display errors.
return View(_db.Activities.ToList());
}


I never use global variables in my Controller.
I rather put all my hidden values, also those in the foreach partial view, in the form.
That way, you pass the entire list and add one after that.
Now I think that you pass an empty row and add the last one to that.
To be sure, you can put a breakpoint in the post function.
#using (Html.BeginForm())
{
// Index View
#foreach (Activity activity in Model)
{
#Html.Partial("_LogTime", new UserActivity(activity.ActivityId))
}
// _LogTime Partial View
<fieldset>
#Html.HiddenFor(model => model.ActivityId)
#Html.EditorFor(model => model.Duration)
#Html.EditorFor(model => model.Date)
<input type="submit" value="LOG TIME" />
</fieldset>
}

Related

Binding Model of PartialViews on a POST

I have a complex model class like:
public class Client
{
public string Name { get; set; }
public Address Address { get; set; }
}
public class Address
{
public string AddressLine { get; set; }
}
My View is made of several Partial's on which I pass parts of the model into them and dispose some fields for edition:
In Index.cshtml
#using (Html.BeginForm("Index"))
{
#Html.DisplayNameFor(modelItem => model.Name)
#Html.DisplayFor(modelItem => model.Name)
<div id="divAddress">
#Html.Action("_Address", model.Address)
</div>
<div>RESULT MESSAGE GOES HERE!</div>
<input type="submit" value="Submit" />
}
In _Address.cshtml
#Html.DisplayNameFor(modelItem => model.AdressLine)
#Html.EditorFor(modelItem => model.AdressLine)
On the code-behind my Actions consist of two simple ActionResults methods:
[HttpGet]
public ActionResult Index()
{
Client = new Client();
Client.Name = "António Fonseca"
return View(model);
}
[HttpPost]
public ActionResult Index(Client model)
{
return View(model);
}
public ActionResult _Address(Address model)
{
return View(model);
}
When I submit the form, I need to call a WebService with the full Client structure and display it's resulting message.
What happens is that when hitting Index(model) -> model.Address is null.
It's only bound back when it hits _Address(model) method.
Is there a way to bind the full class structure in main Action using PartialViews?

Change the model in _Address.cshtml to be the same as the model in your main view and use #Html.Action("_Address", model) so that the form controls are correctly named - i.e. name="Address.AdressLine" (its currently just name="AdressLine" but you model does not contain a property named AdressLine).
#model Client
#Html.DisplayNameFor(m => m.Address.AdressLine)
#Html.EditorFor( m=> m.Address.AdressLine)
However using #Html.Action() is not the correct approach for this. You should be using an EditorTemplate. Rename _Address.cshtml to Address.cshtml (to match the name of your class name) and place it in the /Views/Shared/EditorTemplates folder and then in the view use
#Html.EditorFor(m => m.Address)
which will correctly name your form controls.

Passing value for required property at Controller, but still ModelState.IsValid is false

I have a partial view to post comment for my article module on my main view for article detail. Model for comment has three required fields, ID (identity field), ArticleId and CommentText. (I am using Razor syntax)
I tried to pass ArticleId at controller in Create Action.
public ActionResult Create(ArticleComment articlecomment, string AID)
{
articlecomment.ArticleId = AID; //this is required
if (User.Identity.IsAuthenticated)
{
articlecomment.UserId = WebSecurity.CurrentUserId.ToString();
}
else
{
articlecomment.UserId = Constants.Anonymus;
}
articlecomment.CommentDate = DateTime.Now;
if (ModelState.IsValid)
{
db.ArticleComment.Add(articlecomment);
int success = db.SaveChanges();
if (success > 0)
{
return Content("<script language='javascript' type='text/javascript'>alert('Comment added successfully.');window.location.href='" + articlecomment.ArticleId + "';</script>");
}
else
{
return Content("<script language='javascript' type='text/javascript'>alert('Posting comment has failed, please try later.');window.location.href='" + articlecomment.ArticleId+ "';</script>");
}
}
return PartialView(articlecomment);
}
But still ModelState.IsValid is returning false. I have used following code and find that ModelState is getting ArticleId as null.
foreach (var modelStateValue in ViewData.ModelState.Values)
{
foreach (var error in modelStateValue.Errors)
{
// Do something useful with these properties
var errorMessage = error.ErrorMessage;
var exception = error.Exception;
}
}
I have also thought to set value for ArticleId using Hidden field using ViewBag but have not find any working code. I tried following:
#Html.HiddenFor(model => model.ArticleId, new { #value = ViewBag.Article })
and
#Html.HiddenFor(model => model.ArticleId, (object)ViewBag.Article)
My 'ParticalView' to post comment is:
#model Outliner.Models.ArticleComment
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="editor-label">
#* #Html.HiddenFor(model => model.ArticleId, new { #value = ViewBag.Article })
#Html.HiddenFor(model => model.ArticleId, (object)ViewBag.Article)*#
#Html.LabelFor(model => model.Comment)
<span class="error">#Html.ValidationMessageFor(model => model.Comment)</span>
</div>
#Html.TextAreaFor(model => model.Comment)
<input type="submit" value="Post" />
}
And this is how I am calling this partial view on 'ArticalDetail' view (my main view):
#Html.Action("Create", "ArticleComment")
I have passed required field value at controller for a View before, but I am facing issue for PartialView. What I am doing wrong and how can I make this work?
Edit After a try
As Satpal and Fals lead me to a direction, I tried their suggestions, and tried following:
TryUpdateModel(articlecomment);
and also
TryUpdateModel<ArticleComment>(articlecomment);
and also
TryValidateModel(articlecomment);
but I was still getting same validation error for ArticleId, then I checked in Watch and all tree methods I tried are returning False.
I also tried following:
UpdateModel(articlecomment);
and
UpdateModel<ArticleComment>(articlecomment);
above methods are generating an exception :
The model of type 'Outliner.Models.ArticleComment' could not be
updated.
Here is my model:
[Table("ArticleComments")]
public class ArticleComment
{
[Key]
[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
public int Id { get; set; }
[Required]
public string ArticleId { get; set; }
public string UserId { get; set; }
[Required]
[Display(Name = "Comment")]
public string Comment { get; set; }
[Required]
[Display(Name = "Commented On")]
public DateTime CommentDate { get; set; }
}
I don't get it, why my model is not updating ... :(

It is quite late answer, but it should work.
Before ModelState.IsValid, add following
ModelState.Remove("ArticleId");
It will remove that field from validation.

You can try TryUpdateModel(articlecomment) once before checking ModelState.IsValid. However I have not tested it

After update any requerid field after the ModelBind you must call another method to update the validation.
You can use:
TryValidateModel(articlecomment);
or
TryUpdateModel<ArticleComment>(articlecomment);

To me it seems that your #Html.Action(...) code it invoking the action to create the partial view, like you said. If you are doing this it isn't the correct way to invoke a partial view. While it isn't uncommon for a action to return a partial view, it is normally via AJAX, in my experience, so you can just insert it into the DOM after it returns.
You can use the following method to render a partial view:
#{
Html.RenderPartial("_myPartialView",
new ArticleComment {ArticleId = model.Id});
}
This should render your partial view, pass your model to it so it can render properly. Then when the form is POST'ed to the server it should create the model from the form data. You shouldn't need the AID parameter as it is part of your ArticleComment model.

MVC 4 ViewModel not being sent back to Controller

I can't seem to figure out how to send back the entire ViewModel to the controller to the 'Validate and Save' function.
Here is my controller:
[HttpPost]
public ActionResult Send(BitcoinTransactionViewModel transaction)
{
}
Here is the form in the view:
<li class="check">
<h3>Transaction Id</h3>
<p>#Html.DisplayFor(m => m.Transaction.TransactionId)</p>
</li>
<li class="money">
<h3>Deposited Amount</h3>
<p>#Model.Transaction.Amount.ToString() BTC</p>
</li>
<li class="time">
<h3>Time</h3>
<p>#Model.Transaction.Time.ToString()</p>
</li>
#using (Html.BeginForm("Send", "DepositDetails", FormMethod.Post, new { transaction = Model }))
{
#Html.HiddenFor(m => m.Token);
#Html.HiddenFor(m => m.Transaction.TransactionId);
#Html.TextBoxFor(m => m.WalletAddress, new { placeholder = "Wallet Address", maxlength = "34" })
<input type="submit" value="Send" />
#Html.ValidationMessage("walletAddress", new { #class = "validation" })
}
When i click on submit, the conroller contains the correct value of the walletAddress field but transaction.Transaction.Time, transaction.Transaction.Location, transaction.Transaction.TransactionId are empty.
Is there a way i could pass the entire Model back to the controller?
Edit:
When i dont even receive the walletAddress in the controller. Everything gets nulled!
When i remove this line alone: #Html.HiddenFor(m => m.Transaction.TransactionId);
it works and i get the Token property on the controller, but when i add it back, all the properties of the transaction object on the controller are NULL.
Here is the BitcoinTransactionViewModel:
public class BitcoinTransactionViewModel
{
public string Token { get; set; }
public string WalletAddress { get; set; }
public BitcoinTransaction Transaction { get; set; }
}
public class BitcoinTransaction
{
public int Id { get; set; }
public BitcoinTransactionStatusTypes Status { get; set; }
public int TransactionId { get; set; }
public decimal Amount { get; set; }
public DateTime Time { get; set; }
public string Location { get; set; }
}
Any ideas?
EDIT: I figured it out, its in the marked answer below...

OK, I've been working on something else and bumpend into the same issue all over again.
Only this time I figured out how to make it work!
Here's the answer for anyone who might be interested:
Apparently, there is a naming convention. Pay attention:
This doesn't work:
// Controller
[HttpPost]
public ActionResult Send(BitcoinTransactionViewModel transaction)
{
}
// View
#using (Html.BeginForm("Send", "DepositDetails", FormMethod.Post, new { transaction = Model }))
{
#Html.HiddenFor(m => m.Token);
#Html.HiddenFor(m => m.Transaction.TransactionId);
.
.
This works:
// Controller
[HttpPost]
public ActionResult Send(BitcoinTransactionViewModel **RedeemTransaction**)
{
}
// View
#using (Html.BeginForm("Send", "DepositDetails", FormMethod.Post, new { **RedeemTransaction** = Model }))
{
#Html.HiddenFor(m => m.Token);
#Html.HiddenFor(m => m.Transaction.TransactionId);
.
.
In other words - a naming convention error! There was a naming ambiguity between the Model.Transaction property and my transaction form field + controller parameter. Unvelievable.
If you're experiencing the same problems make sure that your controller parameter name is unique - try renaming it to MyTestParameter or something like this...
In addition, if you want to send form values to the controller, you'll need to include them as hidden fields, and you're good to go.

The signature of the Send method that the form is posting to has a parameter named transaction, which seems to be confusing the model binder. Change the name of the parameter to be something not matching the name of a property on your model:
[HttpPost]
public ActionResult Send(BitcoinTransactionViewModel model)
{
}
Also, remove the htmlAttributes parameter from your BeginForm call, since that's not doing anything useful. It becomes:
#using (Html.BeginForm("Send", "DepositDetails", FormMethod.Post))
Any data coming back from the client could have been tampered with, so you should only post back the unique ID of the transaction and then retrieve any additional information about it from your data source to perform further processing. You'll also want to verify here that the user posting the data has access to the specified transaction ID since that could've been tampered with as well.

This isn't MVC specific. The HTML form will only post values contained within form elements inside the form. Your example is neither inside the form or in a form element (such as hidden inputs). You have to do this since MVC doesn't rely on View State. Put hidden fields inside the form:
#Html.HiddenFor(x => x.Transaction.Time)
// etc...
Ask yourself though.. if the user isn't updating these values.. does your action method require them?

Model binding hydrates your view model in your controller action via posted form values. I don't see any form controls for your aforementioned variables, so nothing would get posted back. Can you see if you have any joy with this?
#using (Html.BeginForm("Send", "DepositDetails", FormMethod.Post, new { transaction = Model }))
{
#Html.TextBoxFor(m => m.WalletAddress, new { placeholder = "Wallet Address", maxlength = "34" })
#Html.Hidden("Time", Model.Transaction.Time)
#Html.Hidden("Location", Model.Transaction.Location)
#Html.Hidden("TransactionId", Model.Transaction.TransactionId)
<input type="submit" value="Send" />
#Html.ValidationMessage("walletAddress", new { #class = "validation" })
}

Try to loop with the folowing statement not with FOREACH
<table>
#for (var i = 0; i < Model.itemlist.Count; i++)
{
<tr>
<td>
#Html.HiddenFor(x => x.itemlist[i].Id)
#Html.HiddenFor(x => x.itemlist[i].Name)
#Html.DisplayFor(x => x.itemlist[i].Name)
</td>
</tr>
}
</table>

Try Form Collections and get the value as. I think this may work.
public ActionResult Send(FormCollection frm)
{
var time = frm['Transaction.Time'];
}

Put all fields inside the form
#using (Html.BeginForm("Send", "DepositDetails", FormMethod.Post))
and make sure that the model
BitcoinTransactionViewModel
included in view or not?

Can you just combine those 2 models you have? Here's how I do it with one model per view...
1. I use Display Templates from view to view so I can pass the whole model as well as leave data encrypted..
2. Setup your main view like this...
#model IEnumerable<LecExamRes.Models.SelectionModel.GroupModel>
<div id="container">
<div class="selectLabel">Select a Location:</div><br />
#foreach (var item in Model)
{
#Html.DisplayFor(model=>item)
}
</div>
3. Create a DisplayTemplates folder in shared. Create a view, naming it like your model your want to pass because a DisplayFor looks for the display template named after the model your using, I call mine GroupModel. Think of a display template as an object instance of your enumeration. Groupmodel Looks like this, I'm simply assigning a group to a button.
#model LecExamRes.Models.SelectionModel.GroupModel
#using LecExamRes.Helpers
#using (Html.BeginForm("Index", "Home", null, FormMethod.Post))
{
<div class="mlink">
#Html.AntiForgeryToken()
#Html.EncryptedHiddenFor(model => model.GroupKey)
#Html.EncryptedHiddenFor(model => model.GroupName)
<p>
<input type="submit" name="gbtn" class="groovybutton" value=" #Model.GroupKey ">
</p>
</div>
}
4. Here's the Controller.
*GET & POST *
public ActionResult Index()
{
// Create a new Patron object upon user's first visit to the page.
_patron = new Patron((WindowsIdentity)User.Identity);
Session["patron"] = _patron;
var lstGroups = new List<SelectionModel.GroupModel>();
var rMgr = new DataStoreManager.ResourceManager();
// GetResourceGroups will return an empty list if no resource groups where found.
var resGroups = rMgr.GetResourceGroups();
// Add the available resource groups to list.
foreach (var resource in resGroups)
{
var group = new SelectionModel.GroupModel();
rMgr.GetResourcesByGroup(resource.Key);
group.GroupName = resource.Value;
group.GroupKey = resource.Key;
lstGroups.Add(group);
}
return View(lstGroups);
}
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult Index(SelectionModel.GroupModel item)
{
if (!ModelState.IsValid)
return View();
if (item.GroupKey != null && item.GroupName != null)
{
var rModel = new SelectionModel.ReserveModel
{
LocationKey = item.GroupKey,
Location = item.GroupName
};
Session["rModel"] = rModel;
}
//So now my date model will have Group info in session ready to use
return RedirectToAction("Date", "Home");
}
5. Now if I've got alot of Views with different models, I typically use a model related to the view and then a session obj that grabs data from each model so in the end I've got data to submit.

The action name to which the data will be posted should be same as the name of the action from which the data is being posted. The only difference should be that the second action where the data is bein posted should have [HttpPost] and the Posting method should serve only Get requests.

How do I keep the clicked state of a checkbox in asp.net

I'm really having problems with keeping the state of my checkbox in my mvc4 application. I'm trying to send its value down to my controller logic, and refresh a list in my model based on the given value, before I send the model back up to the view with the new values. Given that my checkbox is a "show disabled elements in list" type function, I need it to be able to switch on and off. I've seen so many different solutions to this, but I can't seem to get them to work :(
Here's a part of my view:
#model MyProject.Models.HomeViewModel
<div class="row-fluid">
<div class="span12">
<div class="k-block">
<form action="~/Home/Index" name="refreshForm" method="POST">
<p>Include disabled units: #Html.CheckBoxFor(m => m.Refresh)</p>
<input type="submit" class="k-button" value="Refresh" />
#* KendoUI Grid code *#
</div>
</div>
HomeViewModel:
public class HomeViewModel
{
public List<UnitService.UnitType> UnitTypes { get; set; }
public bool Refresh { get; set; }
}
The HomeViewController will need some refactoring, but that will be a new task
[HttpPost]
public ActionResult Index(FormCollection formCollection, HomeViewModel model)
{
bool showDisabled = model.Refresh;
FilteredList = new List<UnitType>();
Model = new HomeViewModel();
var client = new UnitServiceClient();
var listOfUnitsFromService = client.GetListOfUnits(showDisabled);
if (!showDisabled)
{
FilteredList = listOfUnitsFromService.Where(unit => !unit.Disabled).ToList();
Model.UnitTypes = FilteredList;
return View(Model);
}
FilteredList = listOfUnitsFromService.ToList();
Model.UnitTypes = FilteredList;
return View(Model);
}

You return your Model to your view, so your Model properties will be populated, but your checkbox value is not part of your model! The solution is to do away with the FormCollection entirely and add the checkbox to your view model:
public class HomeViewModel
{
... // HomeViewModel's current properties go here
public bool Refresh { get; set; }
}
In your view:
#Html.CheckBoxFor(m => m.Refresh)
In your controller:
[HttpPost]
public ActionResult Index(HomeViewModel model)
{
/* Some logic here about model.Refresh */
return View(model);
}
As an aside, I can't see any reason why you'd want to add this value to the session as you do now (unless there's something that isn't evident in the code you've posted.

Getting the Child Collection for Parent Model HttpPost Update

This question might be a reiteration of a previous question, if it is please post the link. Either way I'll still go through with this post.
I have this model:
public class Employee {
//omitted for brevity
public virtual ICollection<ProfessionalExperience> ProfessionalExperiences { get; set; }
public virtual ICollection<EducationalHistory> EducationalHistories { get; set; }
}
public class ProfessionalExperience {
// omitted for brevity
}
public class EducationalHistory {
// omitted for brevity
}
I'm displaying on my View with this Action:
[HttpGet]
public ActionResult Edit(int id) {
using(var context = new EPMSContext()) {
var employees = context.Employees.Include("ProfessionalExperiences").Include("EducationalHistories");
var employee = (from item in employees
where item.EmployeeId == id && item.IsDeleted == false
select item).FirstOrDefault();
return View(employee);
}
}
Here is my View:
#using(Html.BeginForm()) {
<div class="editor-label">First Name:</div>
<div class="editor-field">#Html.TextBoxFor(x => x.FirstName)</div>
<div class="editor-label">Middle Name:</div>
<div class="editor-field">#Html.TextBoxFor(x => x.MiddleName)</div>
#foreach(var item in Model.ProfessionalExperiences) {
Html.RenderPartial("ProfExpPartial", item);
}
#foreach(var item in Model.EducationalHistories) {
Html.RenderPartial("EducHistPartial", item);
}
<input type="submit" value="Save" />
}
I display the child collection on the view using a foreach and using a partial view for each collection.
When calling my Post Edit Action the employee model has the child collections set to null.
[HttpPost]
public ActionResult Edit(Employee employee) {
using(var context = new EPMSContext()) {
}
return View();
}
What am I missing to get the child collections to correctly?
Thank you!

I think the problem is related to the way MVC expects collection elements to be built (their names in the html).
Take a look at this SO answer: https://stackoverflow.com/a/6212877/1373170, especially the link to Scott Hanselman's post.
Your problem lies in the fact that if you manually iterate and do individual RenderPartial() calls, the input fields will not have indexes, and the DefaultModelBinder will not know how to construct your collection.
I would personally create Editor Templates for your two ViewModel types, and use #Html.EditorFor(model => model.EducationalHistories) and #Html.EditorFor(model => model.ProfessionalExperiences).

Categories