MVC5 Adding values to Bind - asp.net-mvc

First, sorry for my bad English. I am from Brazil. And I am a beginner in .NET MVC5.
I had a model class Task with ID plus 4 editable columns. When creating a new Task, the user must fill out only 2 of them (TaskType and Subject). The remaining two columns (UserID and CreationDate) must be populated with information obtained from the system: user ID and current date.
Then, in the Create Get, I put this two information in the ViewBag:
public ActionResult Create()
{
ViewBag.TaskTypeID = new DAO.TaskTypesDAO().ListOfTypes();
ViewBag.ApplicationUserId = User.Identity.GetUserId();
ViewBag.CreationDate = DateTime.Now;
return View();
}
And in View Create I tried to include this information first, without showing it:
First, I tried HiddenFor() and after with DisplayFor()
#Html.LabelFor(model => model.CreationDate, "Creation Date")
#Html.DisplayFor(model => model.CreationDate)
#Html.HiddenFor(model => model.CreationDate)
#Html.LabelFor(model => model.ApplicationUserId, "Creator")
#Html.DisplayFor(model => model.User.Id)
#Html.HiddenFor(model => model.ApplicationUserId)
DisplayFor() doesn't show anything.
And when I submit the Post Create method
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "ID,TaskTypeID,Subject,CreationDate,ApplicationUserId")] Task task)
{
if (ModelState.IsValid)
{
db.Tasks.Add(task);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.TaskTypeID = new DAO.TaskTypesDAO().ListOfTypes();
ViewBag.ApplicationUserId = User.Identity.GetUserId();
ViewBag.CreationDate = DateTime.Now;
return View(tarefa);
}
The ModelState is invalid and task.CreationDate and task.ApplicationUserId are empty.
How can include this two information before the create post bind????
or else, How can include after and revalidate ModelState??
or .....

I don't understand why are you sending CreationDate and ApplicationUserId to the view through ViewBag and posting it back, this doesn't make any sense. Someone could easily edit the html and forge the ApplicationUserId or CreationDate.
I think your life would be much easier if you just use a strong typed view for this. My 2 cents for you would be:
Put everything you want to display inside a view model (dropdowns, lists, etc.).
Here you could propably use fill a SelectListItem to show your tasks types on a dropdown (or a enum if it's simple enough).
[HttpGet]
public ActionResult Create()
{
var viewModel = new CreateTaskViewModel
{
// [...] Put info that you need to display on the view here
}
return View(viewModel);
}
Get current date and user id when creating the task, that way the user can't forge this information. After creating the task, if you want to show it to the user, just use a Show view.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(CreateTaskViewModel createTaskViewModel)
{
// If validation fails return to the view showing the errors
if (!ModelState.IsValid) { return View(createTaskViewModel); }
// [...] Create task object using info from viewModel
// and what else is necessary
db.Tasks.Add(task);
db.SaveChanges();
// [...] Fills view model to show info and redirect
return RedirectToAction("Show", showViewModel);
}
Use a model on the view and don't put sensitive information hidden on your html.
#model CreateTaskViewModel
#Html.LabelFor(model => model.TaskType)
// Or a dropdown list
#Html.TextBoxFor(model => model.TaskType)
#Html.LabelFor(model => model.Subject)
#Html.TextBoxFor(model => model.Subject)
Another thing that can be really usefull for you to study is the PRG (Post Redirect Get) pattern. It comes in handy when you have more complex action/ views.

Related

How do I choose which column from the "foreign" table is displayed in the view?

I am building a simple ASP.NET MVC app with Entity Framework Database First that allows a user to edit tables in a database. One table has a foreign key to another table. I want the user to be able to change the foreign key value.
My question: How do I choose which column from the "foreign" table is displayed to the user in the view? I scaffolded the view out, but it is displaying the wrong column.
The foreign key is in the DealerAuto table, which has columns: DealerAutoID, DealerID, DealerMakeName, DealerModelName. For some reason, the dropdown in the view for DealerAutoID is pulling in DealerMakeName. I want it to pull in DealerModelName.
View.cshtml:
#model ModelYearChange.Models.DealerAutoTrim
[...]
<div class="form-group">
#Html.LabelFor(model => model.DealerAutoID, "DealerAutoID", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DealerAutoID", String.Empty)
#Html.ValidationMessageFor(model => model.DealerAutoID)
</div>
</div>
DealerAutoTrimController.cs:
public ActionResult Create()
{
ViewBag.DealerAutoID = new SelectList(db.DealerAutoes, "DealerAutoID", "DealerMakeName");
ViewBag.DealerModelName = new SelectList(db.DealerAutoes, "DealerModelName", "DealerModelName");
return View();
}
// POST: /DealerAutoTrim/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "DealerAutoTrimID,DealerAutoID,DealerTrimName,DealerTrimMSRP,DealerTrimMPG_City,DealerTrimMPG_Highway,DealerTrimBulletPoints,Year")] DealerAutoTrim dealerautotrim)
{
if (ModelState.IsValid)
{
db.DealerAutoTrims.Add(dealerautotrim);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.DealerAutoID = new SelectList(db.DealerAutoes, "DealerAutoID", "DealerMakeName", dealerautotrim.DealerAutoID);
return View(dealerautotrim);
}
Your list binding is kind of messed up :)
Firstly, you only need one SelectList parsed to the View. So in your controller, simply have
ViewBag.DealerAutoes = SelectList(db.DealerAutoes, "DealerModelId", "DealerModelName");
Note: the second SelectList parameter specifies what field becomes the "value" of the dropdown, with the third parameter defining what field becomes the "text" value.
Then in your view, you can simply have:
#Html.DropDownListFor(m => m.DealerAutoId, (SelectList)ViewBag.DealerAutoes)

Return model from Partial View issue

I have created a partial view (even though the editor template), I pass a sub model to the view, however, when I clicked "submit", I always get "null" from the partial view. I can get Main model's properties values except the sub model one.
Main Model
public class PetModel
{
public string name {get; set;}
public long SpeciesID {get; set;}
public long BreedID {get; set;}
public Calendar DOB {get; set;}
}
Sub Model
public class Calendar
{
public string Year{get; set;}
public string Month{get; set;}
public string Day{get; set;}
}
Main View
#model Application.Models.PetModel
#using (Html.BeginForm("CatchPetContent", "Quote",Model))
{
#Html.TextBoxFor(x => x.Name)
#Html.DropDownListFor(x=>x.SpeciesID,new List<SelectListItem>(),"select")
#Html.DropDownListFor(x=>x.BreedID,new List<SelectListItem>(),"select")
#Html.EditorFor(Model => x.DOB)
<input type="submit" value="submit" />
}
Editor template
#model Application.Models.Calendar
#Html.DropDownListFor(Model => Model.Day, new List<SelectListItem>())
#Html.DropDownListFor(Model => Model.Month,new List<SelectListItem>())
#Html.DropDownListFor(Model => Model.Year, new List<SelectListItem>())
"CatchPetContent" action
[HttpPost]
public ActionResult CatchPetContent(PetModel Model)
{
PetModel pet = new PetModel();
pet.Name = Model.Name;
pet.SpeciesID = Model.SpeciesID;
pet.BreedID = Model.BreedID;
pet.DOB = Model.DOB;// always null
RouteValueDictionary redirectTargetDictionary = new RouteValueDictionary();
redirectTargetDictionary.Add("Controller", "Home");
redirectTargetDictionary.Add("Action", "Index");
return new RedirectToRouteResult(new RouteValueDictionary(redirectTargetDictionary));
}
When I debugged it, "Model.DOB" is always null
You should add the sub-property as an extra parameter on your action:
[HttpPost]
public ActionResult CatchPetContent(PetModel Model, Calendar Bob)
{
** snip **
}
The default ModelBinder doesn't nest the objects. It does however find the values if you include it as a second parameter.
If you want to nest them, you'd have to create your own modelbinder.
The following question had a similar issue: List count empty when passing from view to model in ASP.Net MVC
The default model binder will bind nested objects, you do not need to create your own model binder for this scenario.
See:
http://lostechies.com/jimmybogard/2011/09/07/building-forms-for-deep-view-model-graphs-in-asp-net-mvc/
and on SO
DefaultModelBinder not binding nested model
I suspect your problem is that your editor template is not returning anything via the post back so the nested object is null. The lines in your editor template:
#Html.DropDownListFor(Model => Model.Day, new List<SelectListItem>())
#Html.DropDownListFor(Model => Model.Month,new List<SelectListItem>())
#Html.DropDownListFor(Model => Model.Year, new List<SelectListItem>())
Will give you three controls with empty drop downs, you will not be able to select anything from these drop downs as you have not supplied any values to them. If there is no value then they are not sent across the wire and cannot be model bound. To start of with change you editor template to:
#Html.TextBoxFor(Model => Model.Day)
#Html.TextBoxFor(Model => Model.Month)
#Html.TextBoxFor(Model => Model.Year)
This will allow you to actually enter some data onto to form. Once this is working you can then change the text boxes back to drop downs but you will need to supply values for the select lists, again, just creating new empty lists will not allow you to select any values.
instead of
#Html.EditorFor(Model => x.DOB)
try render partial view
#Html.Partial("partialViewName", Model.DOB)
I think in your Main View you have a typo, it looks like you should change
#Html.EditorFor(Model => x.DOB)
to
#Html.EditorFor(x => x.DOB)

Successful Model Editing without a bunch of hidden fields

In Short: How do I successfully edit a DB entry without needing to include every single field for the Model inside of the Edit View?
UPDATE
So I have an item in the DB (an Article). I want to edit an article. The article I edit has many properties (Id, CreatedBy, DateCreated, Title, Body). Some of these properties never need to change (like Id, CreatedBy, DateCreated). So in my Edit View, I only want input fields for fields that can be changed (like Title, Body). When I implement an Edit View like this, Model Binding fails. Any fields that I didn't supply an input for gets set to some 'default' value (like DateCreated gets set to 01/01/0001 12:00:00am). If I do supply inputs for every field, everything works fine and the article is edited as expected. I don't know if it's correct in saying that "Model Binding fails" necessarily, so much as that "the system fills in fields with incorrect data if no Input field was supplied for them in the Edit View."
How can I create an Edit View in such a way that I only need to supply input fields for fields that can/need editing, so that when the Edit method in the Controller is called, fields such as DateCreated are populated correctly, and not set to some default, incorrect value? Here is my Edit method as it currently stands:
[HttpPost]
public ActionResult Edit(Article article)
{
// Get a list of categories for dropdownlist
ViewBag.Categories = GetDropDownList();
if (article.CreatedBy == (string)CurrentSession.SamAccountName || (bool)CurrentSession.IsAdmin)
{
if (ModelState.IsValid)
{
article.LastUpdatedBy = MyHelpers.SessionBag.Current.SamAccountName;
article.LastUpdated = DateTime.Now;
article.Body = Sanitizer.GetSafeHtmlFragment(article.Body);
_db.Entry(article).State = EntityState.Modified;
_db.SaveChanges();
return RedirectToAction("Index", "Home");
}
return View(article);
}
// User not allowed to edit
return RedirectToAction("Index", "Home");
}
And the Edit View if it helps:
. . .
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Article</legend>
<p>
<input type="submit" value="Save" /> | #Html.ActionLink("Back to List", "Index")
</p>
#Html.Action("Details", "Article", new { id = Model.Id })
#Html.HiddenFor(model => model.CreatedBy)
#Html.HiddenFor(model => model.DateCreated)
<div class="editor-field">
<span>
#Html.LabelFor(model => model.Type)
#Html.DropDownListFor(model => model.Type, (SelectList)ViewBag.Categories)
#Html.ValidationMessageFor(model => model.Type)
</span>
<span>
#Html.LabelFor(model => model.Active)
#Html.CheckBoxFor(model => model.Active)
#Html.ValidationMessageFor(model => model.Active)
</span>
<span>
#Html.LabelFor(model => model.Stickied)
#Html.CheckBoxFor(model => model.Stickied)
#Html.ValidationMessageFor(model => model.Stickied)
</span>
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Body)
</div>
<div class="editor-field">
#* We set the id of the TextArea to 'CKeditor' for the CKeditor script to change the TextArea into a WYSIWYG editor. *#
#Html.TextAreaFor(model => model.Body, new { id = "CKeditor", #class = "text-editor" })
#Html.ValidationMessageFor(model => model.Body)
</div>
</fieldset>
. . .
If I were to leave out these two inputs:
#Html.HiddenFor(model => model.CreatedBy)
#Html.HiddenFor(model => model.DateCreated)
when the Edit method is called, they're set to default values. CreatedBy is set to Null, Created is set to 01/01/0001 12:00:00am
Why are they not set to the values as they are currently set to in the DB?
After yet some more research I came upon some tools that assist in the ViewModel process - one being AutoMapper & the other InjectValues. I went with InjectValues primarily because it can not only "flatten" objects (map object a -> b) but it can also "unflatten" them (map object b -> a) - something that AutoMapper unfortunately lacks out-of-the-box - something I need to do in order to update values inside of a DB.
Now, instead of sending my Article model with all of its properties to my views, I created an ArticleViewModel containing only the following properties:
public class ArticleViewModel
{
public int Id { get; set; }
[MaxLength(15)]
public string Type { get; set; }
public bool Active { get; set; }
public bool Stickied { get; set; }
[Required]
[MaxLength(200)]
public string Title { get; set; }
[Required]
[AllowHtml]
public string Body { get; set; }
}
When I Create an Article, instead of sending an Article object (with every property) I send the View a 'simpler' model - my ArticleViewModel:
//
// GET: /Article/Create
public ActionResult Create()
{
return View(new ArticleViewModel());
}
For the POST method we take the ViewModel we sent to the View and use its data to Create a new Article in the DB. We do this by "unflattening" the ViewModel onto an Article object:
//
// POST: /Article/Create
public ActionResult Create(ArticleViewModel articleViewModel)
{
Article article = new Article(); // Create new Article object
article.InjectFrom(articleViewModel); // unflatten data from ViewModel into article
// Fill in the missing pieces
article.CreatedBy = CurrentSession.SamAccountName; // Get current logged-in user
article.DateCreated = DateTime.Now;
if (ModelState.IsValid)
{
_db.Articles.Add(article);
_db.SaveChanges();
return RedirectToAction("Index", "Home");
}
ViewBag.Categories = GetDropDownList();
return View(articleViewModel);
}
The "missing pieces" filled in are Article properties I didn't want to set in the View, nor do they need to be updated in the Edit view (or at all, for that matter).
The Edit method is pretty much the same, except instead of sending a fresh ViewModel to the View we send a ViewModel pre-populated with data from our DB. We do this by retrieving the Article from the DB and flattening the data onto the ViewModel. First, the GET method:
//
// GET: /Article/Edit/5
public ActionResult Edit(int id)
{
var article = _db.Articles.Single(r => r.Id == id); // Retrieve the Article to edit
ArticleViewModel viewModel = new ArticleViewModel(); // Create new ArticleViewModel to send to the view
viewModel.InjectFrom(article); // Inject ArticleViewModel with data from DB for the Article to be edited.
return View(viewModel);
}
For the POST method we want to take the data sent from the View and update the Article stored in the DB with it. To do this we simply reverse the flattening process by 'unflattening' the ViewModel onto the Article object - just like we did for the POST version of our Create method:
//
// POST: /Article/Edit/5
[HttpPost]
public ActionResult Edit(ArticleViewModel viewModel)
{
var article = _db.Articles.Single(r => r.Id == viewModel.Id); // Grab the Article from the DB to update
article.InjectFrom(viewModel); // Inject updated values from the viewModel into the Article stored in the DB
// Fill in missing pieces
article.LastUpdatedBy = MyHelpers.SessionBag.Current.SamAccountName;
article.LastUpdated = DateTime.Now;
if (ModelState.IsValid)
{
_db.Entry(article).State = EntityState.Modified;
_db.SaveChanges();
return RedirectToAction("Index", "Home");
}
return View(viewModel); // Something went wrong
}
We also need to change the strongly-typed Create & Edit views to expect an ArticleViewModel instead of an Article:
#model ProjectName.ViewModels.ArticleViewModel
And that's it!
So in summary, you can implement ViewModels to pass just pieces of your Models to your Views. You can then update just those pieces, pass the ViewModel back to the Controller, and use the updated information in the ViewModel to update the actual Model.
View model example:
public class ArticleViewModel {
[Required]
public string Title { get; set; }
public string Content { get; set; }
}
Binding example
public ActionResult Edit(int id, ArticleViewModel article) {
var existingArticle = db.Articles.Where(a => a.Id == id).First();
existingArticle.Title = article.Title;
existingArticle.Content = article.Content;
db.SaveChanges();
}
That is simple example, but you should look at ModelState to check if model doesn't have errors, check authorization and move this code out of controller to service classes, but
that is another lesson.
This is corrected Edit method:
[HttpPost]
public ActionResult Edit(Article article)
{
// Get a list of categories for dropdownlist
ViewBag.Categories = GetDropDownList();
if (article.CreatedBy == (string)CurrentSession.SamAccountName || (bool)CurrentSession.IsAdmin)
{
if (ModelState.IsValid)
{
var existingArticle = _db.Articles.First(a => a.Id = article.Id);
existingArticle.LastUpdatedBy = MyHelpers.SessionBag.Current.SamAccountName;
existingArticle.LastUpdated = DateTime.Now;
existingArticle.Body = Sanitizer.GetSafeHtmlFragment(article.Body);
existingArticle.Stickied = article.Stickied;
_db.SaveChanges();
return RedirectToAction("Index", "Home");
}
return View(article);
}
// User not allowed to edit
return RedirectToAction("Index", "Home");
}
another good way without viewmodel
// POST: /Article/Edit/5
[HttpPost]
public ActionResult Edit(Article article0)
{
var article = _db.Articles.Single(r => r.Id == viewModel.Id); // Grab the Article from the DB to update
article.Stickied = article0.Stickied;
// Fill in missing pieces
article.LastUpdatedBy = MyHelpers.SessionBag.Current.SamAccountName;
article.LastUpdated = DateTime.Now;
if (ModelState.IsValid)
{
_db.Entry(article0).State = EntityState.Unchanged;
_db.Entry(article).State = EntityState.Modified;
_db.SaveChanges();
return RedirectToAction("Index", "Home");
}
return View(article0); // Something went wrong
}
Use ViewModels.
Through my continued research of finding a solution to this issue I believe that using these things called "ViewModels" is the way to go. As explained in a post by Jimmy Bogard, ViewModels are a way to "show a slice of information from a single entity."
asp.net-mvc-view-model-patterns got me headed on the right track; I'm still checking out some of the external resources the author posted in order to further grasp the ViewModel concept (The blog post by Jimmy being one of them).
In addition to the answer, AutoMapper can also be used to unflatten it.
Using AutoMapper to unflatten a DTO

Set input column value in code in MVC

I created my first MVC application in ASP.NET today. I have a datetime column "CreatedAt" which should be filled by current date without being visible in the input form. But the generated code has this code:
<div class="editor-field">
#Html.EditorFor(model => model.CreatedAt)
#Html.ValidationMessageFor(model => model.CreatedAt)
</div>
It displays a textbox in input form. I don't want to display it, instead it should be set in code behind. How can I do that?
ASP.NET MVC doesn't have a concept of a 'code-behind'. Quite simply, you send data from your View, and it's processed in your Controller.
So if this is an action that POSTs, then we can send data back to the controller, and even better, we can keep that data 'hidden' from the textbox view.
In your view, you should replace that with the following line:
#Html.HiddenFor(m => m.CreatedAt, DateTime.Now);
Then when the model is POSTed to the controller, the CreatedAt property will have the DateTime.Now filled in.
When you POST something, it has to go to an Action Method:
public class MyController : Controller
{
//other stuff
[HttpPost]
public ActionResult Edit(Product product)
{
product.CreatedAt // should equal the DateTime.Now set when you created the View
}
}
or you could set it in the controller after it POSTs:
public class MyController : Controller
{
//other stuff
[HttpPost]
public ActionResult Edit(Product product)
{
product.CreatedAt = DateTime.Now;
}
}
You may run into issues with Html.Hidden in this context, if you do, make sure to use the work around in place.

Binding to a SelectList in MVC

Once again I'm confronted with a "This shouldn't be this ?*!# hard" situation.
Problem: I want to use a form in MVC for creation of an object. One of the elements of the object is a set of limited choices - a perfect candidate for a drop down list.
But if I use a SelectList in my model, and a drop down list in my View, and then try to post the Model back to my Create method, I get the error "Missing Method Exception:No Parameterless constructor for this object". Exploring the MVC source code, it appears that in order to bind to a model, the Binder has to be able to create it first, and it can't create a SelectList because there is no default constructor for it.
Here's the simplified code:
For the model:
public class DemoCreateViewModel
{
public SelectList Choice { get; set; }
}
For the controller:
//
// GET: /Demo/Create
public ActionResult Create()
{
DemoCreateViewModel data = new DemoCreateViewModel();
data.Choice = new SelectList(new string[] { "Choice1", "Choice2", "Choice3" });
ViewData.Model = data;
return View();
}
//
// POST: /Demo/Create
[HttpPost]
public ActionResult Create(DemoCreateViewModel form)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
And for the View:
<fieldset>
<legend>Fields</legend>
<%= Html.LabelFor(model => model.Choice) %>
<%= Html.DropDownListFor(model => model.Choice, Model.Choice) %>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
Now, I know I can MAKE this work by dropping back 10 yards and punting: bypass model binding and drop back to the FormCollection and validate and bind all the fields myself, but there's got to be a simpler way. I mean, this is about as simple a requirement as it gets. Is there a way to make this work within the MVC ModelBinding architecture? If so, what is it? And if not, how come?
Edit: Well, I have egg on my face, but maybe this will help someone else. I did some more experimenting and found a simple solution that seems to work.
Provide a simple value (string or integer, depending on what your select list value type is), and name that as the model element that you bind to. Then provide a second element as the select list of choices, and name it something else. So my model became:
public class DemoCreateViewModel
{
public string Choice { get; set; }
public SelectList Choices { get; set; }
}
And then the DropDownListFor statement in the View becomes:
<%= Html.DropDownListFor(model => model.Choice, Model.Choices) %>
When I do this, the submit button correctly binds the choice made in the form to the string Choice, and submits the model back to the second Create method.
Here is one approach:
#Html.DropDownListFor(model => model.Choice,
ViewBag.Choices as SelectList,
"-- Select an option--",
new { #class = "editor-textbox" })
Notice that I use ViewBag to contain my SelectList. This way when you post back, the client doesn't send the entire select list up to the server as part of the model.
In your controller code, you just need to set the view bag:
ViewBag.Choices = new SelectList(....
Consider creating a different view model for your post action without the SelectList property:
public class DemoCreateViewModelForUpdate
{
public string Choice { get; set; }
}
Then you can always map from the DemoCreateViewModelPost instance to an DemoCreateViewModel instance if the model state is invalid and you want to re-show the view. I tend to prefer everything needed by the view to be in my display view model class, so using a separate update only view model let's me keep things slim and trim for the trip back to the server.
In your view, you'd do:
#Html.DropDownListFor(m => m.Choice, Model.Choices)
as in the previous answer, so no unnecessary data would round trip.

Resources