I am having a problem in accessing my viewmodel and its partial view model data in controller
My Model
public class SearchRequest : BaseRequest
{
public SearchOptions SearchBy{ get; set; }
// and other properties also there
}
[KnownType(typeof(SearchByAirport))]
[KnownType(typeof(SearchByCity))]
[KnownType(typeof(SearchByProductCodes))]
[KnownType(typeof(SearchByGeocode))]
public abstract class SearchOptions
{
}
public class SearchByProductCodes : SearchOptions
{
public List<string> Codes { get; set; }
}
public class SearchByGeocode : SearchOptions
{
// few more properties
}
My View
View has model reference for SearchRequest and has a drop down for selecting search category (i.e. search by product codes , geo code, city etc. etc.) and on change of drop down i load my partial view
One of my partial view
#model Tavisca.Catapult.External.DataContract.Common.SearchByProductCodes
<div class="form-group">
#Html.LabelFor(model => model.Codes, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Codes)
</div>
</div>
Controller
[HttpPost]
public ActionResult Create(SearchRequest hotelSearchRequest)
{
return View();
}
i am getting SearchBy Null here, What is the best approach to arrange my view and get all fields from view to controller.
The model binder will try and match Codes in the form values with your viewmodel, but it is called SearchBy in there, so it will fail.
try doing this
<div class="form-group">
#Html.LabelFor(model => model.Codes, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Codes, new {Name="SearchBy" })
</div>
</div>
That will give the model binder the right field name to pull out.
The other way is to get it manually from the form in your controller action like this:
Request.Form["Codes"]
Personally, I'd opt for option #1.
Related
Building a dynamic list in MVC5. Form will post to the controller and I can see the StudentList correctly populated in chrome dev tools but in the controller, the StudentList is empty.
Model:
public class Student
{
public int id { get; set; }
public string Name { get; set; }
}
public class StudentViewModel
{
public Student student { get; set; }
public List<Student> StudentList { get; set; }
}
View:
#model TaskTrack.ViewModels.StudentViewModel
#using (Html.BeginForm("Create", "Timesheet", FormMethod.Post, new { #id = "addTaskForm" }))
{
<div id="task-row">
//Partial view renders here.
</div>
<button class="btn save-day" type="submit" >Save Day</button>
}
Partial view:
#model TaskTracker.ViewModels.StudentViewModel
#using (Html.BeginCollectionItem("StudentList"))
{
<div class="form-row">
<div class="form-group col-2">
#Html.EditorFor(model => model.Student.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Student.Name, "", new { #class = "text-danger" })
</div>
</div>
}
If I take out the Student instance from the ViewModel and replace it with the student model properties, then change the partial view to bind directly to the Name property, it will work.
#Html.EditorFor(model => model.Student.Name, new { htmlAttributes = new { #class = "form-control" } })
to
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
Controller post:
[HttpPost]
public ActionResult Create(StudentViewModel model)
When I intercept the post before it hits the controller, I can see it has bound correctly, but in the controller StudentList is empty.
I am trying to avoid having the student model duplicated in the view model because it's duplicate and all the validation rules are already in the Student model, so I would have to duplicate all that in the viewmodel as well, which seems wrong.
I have the following entity models:
public class AssetLabel
{
public string QRCode { get; set; }
public string asset { get; set; }
public virtual IEnumerable<Conversation> Conversations { get; set; }
}
public class Conversation
{
public int ID { get; set; }
public virtual AssetLabel AssetLabel{ get; set; }
public string FinderName { get; set; }
public string FinderMobile { get; set; }
public string FinderEmail { get; set; }
public ConversationStatus Status{ get; set; }
public IEnumerable<ConversationMessage> Messages { get; set; }
}
public class ConversationMessage
{
public int ID { get; set; }
public DateTime MessageDateTime { get; set; }
public bool IsFinderMessage { get; set; }
public virtual Conversation Conversation { get; set; }
}
public enum ConversationStatus { open, closed };
public class FinderViewModel : Conversation
{/*used in Controllers->Found*/
}
My MVC application will prompt for a QRCode on a POST request. I then validate this code exists in the database AssetLabel and some other server-side logic is satisfied. I then need to request the user contact details to create a new Conversation record.
Currently I have a GET to a controller action which returns the first form to capture the Code. If this is valid then I create a new FinderViewModel, populate the AssetLabel with the object for the QRCode and return a view to consume the vm and show the fields for the Name, Mobile and Email.
My problem is that although the AssetLabel is being passed to the view as part of the FinderViewModel and I can display fields from the AssetLabel; graphed object the AssetLabel does not get passed back in the POST. I know I could modify the FinderViewModel so that it takes the Conversation as one property and set up the QRCode as a separate property that could be a hidden field in the form and then re-find the the AssetLabel as part of the processing of the second form but this feels like a lot of work seeing as I have already validated it once to get to the point of creating the second form (this is why I am moving away from PHP MVC frameworks).
The first question is HOW?, The second question is am I approaching this design pattern in the wrong way. Is there a more .NETty way to persist the data through multiple forms? At this point in my learning I don't really want to store the information in a cookie or use ajax.
For reference the rest of the code for the 1st form POST, 2nd view and 2nd form POST are shown below (simplified to eliminate irrelevant logic).
public class FoundController : Controller
{
private ApplicationDbContext db = new ApplicationDbContext();
// GET: Found
public ActionResult Index()
{
AssetLabel lbl = new AssetLabel();
return View(lbl);
}
[HttpPost]
public ActionResult Index(string QRCode)
{
if (QRCode=="")
{
return Content("no value entered");
}
else
{
/*check to see if code is in database*/
AssetLabel lbl = db.AssetLables.FirstOrDefault(q =>q.QRCode==QRCode);
if (lbl != null)
{
var vm = new FinderViewModel();
vm.AssetLabel = lbl;
vm.Status = ConversationStatus.open;
return View("FinderDetails", vm);
}
else
{/*Label ID is not in the database*/
return Content("Label Not Found");
}
}
}
[HttpPost]
public ActionResult ProcessFinder(FinderViewModel vm)
{
/*
THIS IS WHERE I AM STUCK! - vm.AssetLabel == NULL even though it
was passed to the view with a fully populated object
*/
return Content(vm.AssetLabel.QRCode.ToString());
//return Content("Finder Details posted!");
}
FinderView.cshtml
#model GMSB.ViewModels.FinderViewModel
#{
ViewBag.Title = "TEST FINDER";
}
<h2>FinderDetails</h2>
#using (Html.BeginForm("ProcessFinder","Found",FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Finder Details</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.ID)
#Html.HiddenFor(model => model.AssetLabel)
<div class="form-group">
#Html.LabelFor(model => model.FinderName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FinderName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FinderName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FinderMobile, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FinderMobile, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FinderMobile, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FinderEmail, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FinderEmail, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FinderEmail, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
Rendered HTML snippet for AssetLabel
<input id="AssetLabel" name="AssetLabel" type="hidden"
value="System.Data.Entity.DynamicProxies.AssetLabel_32653C4084FF0CBCFDBE520EA1FC5FE4F22B6D9CD6D5A87E7F1B7A198A59DBB3"
/>
You cannot use #Html.HiddenFor() to generate a hidden output for a complex object. Internally the method use .ToString() to generate the value (in you case the output is System.Data.Entity.DynamicProxies.AssetLabel_32653C4084FF0CBCFDBE520EA1FC5FE4F22B6D9CD6D5A87E7F1B7A198A59DBB3 which cannot be bound back to a complex object)
You could generate a form control for each property of the AssetLabel - but that would be unrealistic in your case because AssetLabel contains a property with is a collection of Conversation which in turn contains a collection of ConversationMessage so you would need nested for loops to generate an input for each property of Conversation and ConversationMessage.
But sending a whole lot of extra data to the client and then sending it all back again unchanged degrades performance, exposes unnecessary details about your data and data structure to malicious users, and malicious users could change the data).
The FinderViewModel should just contain a property for QRCode (or the ID property of AssetLabel) and in the view
#Html.HiddenFor(m => m.QRCode)
Then in the POST method, if you need the AssetLabel, get it again from the repository just as your doing it in the GET method (although its unclear why you need to AssetLabel in the POST method).
As a side note, a view model should only contain properties that are needed in the view, and not contain properties which are data models (in in your case inherit from a data model) when editing data. Refer What is ViewModel in MVC?. Based on your view, it should contain 4 properties FinderName, FinderMobile, FinderEmail and QRCode (and int? ID if you want to use it for editing existing objects).
Thanks Stephen. The QRCode is the PK on AssetLabel and the FK in Conversation so it needs to be tracked through the workflow. I was trying to keep the viewModel generic so that is can be used for other forms rather than tightly coupling it to this specific form and I was trying to pass the AssetLabel around as I have already done a significant amount of validation on it's state which I didn't want to repeat. I worked out what I need to do - If you use #Html.Hidden(model => model.AssetLabel.QRCode) then the form field name becomes AssetLabel_QRCode and is automatically mapped to the correct place in the POST viewmodel. To promote code reuse and avoid any rework later I have created this logic in a display template with the fields defined as hidden and then #Html.Partial() using the overload method that allows me to define the model extension to the form names
#Html.Partial
(
"./Templates/Assetlabel_hidden",
(GMSB.Models.AssetLabel)(Model.AssetLabel),
new ViewDataDictionary()
{
TemplateInfo = new TemplateInfo()
{
HtmlFieldPrefix = "AssetLabel"
}
}
)
But you are absolutely right, this exposes additional fields and my application structure. I think I will redraft the viewModel to only expose the necessary fields and move the AssetLabel validation to a separate private function that can be called from both the initial POST and the subsequent post. This does mean extra code in the controller as the flat vm fields need to be manually mappped to the complex object graph.
I have this viewmodel
public class ProductViewModel : BaseViewModel
{
public ProductViewModel()
{
Categories = new List<Categorie>
}
[Required(ErrorMessage = "*")]
public int Code{ get; set; }
[Required(ErrorMessage = "*")]
public string Description{ get; set; }
[Required(ErrorMessage = "*")]
public int CategorieId { get; set; }
public List<Categorie> Categories
}
My controller like this
[HttpGet]
public ActionResult Create(ProductViewModel model)
{
model.Categories = //method to populate the list
return View(model);
}
The problem is, as soon as the view is exhibited, the validation is fired.
Why this is happening?
Thanks in advance for any help.
Update
The view is like this
#using (Html.BeginForm("Create", "Product", FormMethod.Post, new { #class = "form-horizontal", #role = "form" }))
{
<div class="form-group">
<label for="Code" class="col-sm-2 control-label">Code*</label>
<div class="col-sm-2">
#Html.TextBoxFor(x => x.Code, new { #class = "form-control"})
</div>
</div>
<div class="form-group">
<label for="Description" class="col-sm-2 control-label">Desc*</label>
<div class="col-sm-2">
#Html.TextBoxFor(x => x.Description, new { #class = "form-control", maxlength = "50" })
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Categorie*</label>
<div class="col-sm-4">
#Html.DropDownListFor(x => x.CategorieId, Model.Categories, "Choose...", new { #class = "form-control" })
</div>
</div>
You GET method has a parameter for your model, which means that the DefaultModelBinder initializes and instance of the model and sets its properties based on the route values. Since your not passing any values, all the property values are null because they all have the [Required] attribute, validation fails and ModelState errors are added which is why the errors are displayed when the view is first rendered.
You should not use a model as the parameter in a GET method. Apart from the ugly query string it creates, binding will fail for all properties which are complex objects and collections (look at you query string - it includes &Categories=System.Collections.Generic.List<Categorie> which of course fails and property Categories will be the default empty collection). In addition, you could easily exceed the query string limit and throw an exception.
If you need to pass values to the GET method, for example a value for Code, then you method should be
[HttpGet]
public ActionResult Create(int code)
{
ProductViewModel model = new ProductViewModel
{
Code = code,
Categories = //method to populate the list
};
return View(model);
}
I'm working in ASP.NET MVC 5 (but this most likely applies to previous versions also). Best way to ask this question is to show you the code:
Here is the View Model:
public class PersonCreateViewModel
{
public SelectList cities {get; set;}
public String Name { get; set; }
public String Address { get; set; }
}
Here is the http Post method from the controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(PersonCreateViewModel viewmodel)
{
if (ModelState.IsValid)
{
//Add to database here and return
}
//return back to view if invalid db save
return View(person);
}
Here is the View:
<div class="form-group">
#Html.LabelFor(model => model.person.name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.person.name)
#Html.ValidationMessageFor(model => model.person.name)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.person.address, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.person.address)
#Html.ValidationMessageFor(model => model.person.address)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.person.CityID, "CityID", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("cities")
#Html.ValidationMessageFor(model => model.person.CityID)
</div>
</div>
When the user clicks submit, the following error message is in the browser:
"No parameterless constructor defined for this object. "
I think it has something to do with the fact that I have a SelectList in my ViewModel. I think when the view passes the model back to the controller on form submission, it calls the constructor for the SelectList, but there is no parameterless constructor for SelectList. I'm not sure how to proceed. Any help is appreciated!!
I've always had better luck using IEnumerable
public class PersonCreateViewModel
{
public IEnumerable<SelectListItem> cities {get; set;}
public int CityId { get; set; }
public String Name { get; set; }
public String Address { get; set; }
}
Also, you are going to need a property on the view model to capture the selected value like CityId.
Then you can use:
Html.DropDownListFor(m => m.CityId, Model.cities)
I have a question about setting up a viewmodel when you use the strongly typed helpers (HTML.EditorFor, etc.) and a viewmodel in ASP.NET MVC. I am working with MVC5, but I would imagine my question is also applicable to other versions.
For this example, I'm working with the create of the CRUD process.
In the example, the user enters the name and address of a person and city is selected from a drop down.
Here is the model:
public class Person
{
[Key]
public int PersonID { get; set; }
[ForeignKey("City")]
public int CityID { get; set; }
public string Name {get; set;}
public string address {get; set;}
//Navigational property
public virtual City City { get; set; }
}
Here is the viewmodel:
public class PersonCreateViewModel
{
public SelectList cities {get; set;}
public Person person { get; set; }
}
Here is the Action Method from the controller used to pass back the view for the create page:
public ActionResult Create()
{
CreateViewModel viewmodel = new CreateViewModel();
viewmodel.cities = new SelectList(db.Cities, "CityID", "name");
return View(viewmodel);
}
Here is part of my view:
<div class="form-group">
#Html.LabelFor(model => model.person.name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.person.name)
#Html.ValidationMessageFor(model => model.person.name)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.person.address, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.person.address)
#Html.ValidationMessageFor(model => model.person.address)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.person.CityID, "CityID", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("cities")
#Html.ValidationMessageFor(model => model.person.CityID)
</div>
</div>
I declare the model for my view as such:
#model TestProjects.ViewModels.PersonCreateViewModel
And Lastly, the http post method in the controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include="PersonID,CityID,nameaddress")] Person person)
{
if (ModelState.IsValid)
{
//Add to database here and return
}
//return back to view if invalid db save
return View(person);
}
So at one point I had all of this working. Then I decided I wanted to use the ViewModel approach. I still don't have it working, but here are some questions:
In the view, I reference the properties of the model with model.person.address. Is this the proper way to do this? I noticed that when it generates the html, it names the field person_address, etc.
So should I just change the Bind properties in the http post controller mehtod to reflect this? But if I change this, the properties will no longer match up with the person object causing a disconnect.
Or should I change my view model? And instead of having a person type in my ViewModel, copy/paste all of the fields from the model into the ViewModel? I guess this would also work, but is that the typical way it is done? It seems redundant to list out every property of the model when I could just have an instance if the model in the viewmodel?
In the view, I reference the properties of the model with model.person.address. Is this the proper way to do this? I noticed that when it generates the html, it names the field person_address, etc.
Yes, that is the correct way to reference model properties. More accurately, since model in your helper expressions is a reference to the Func's input parameter, it could be anything. The following would work just as well:
#Html.EditorFor(banana => banana.person.address)
So should I just change the Bind properties in the http post controller mehtod to reflect this? But if I change this, the properties will no longer match up with the person object causing a disconnect.
You don't need the bind parameters at all. What you should do is take all reference to your data entities (i.e. Person) out of your view model completely (otherwise using the view model is a little pointless as it's tightly coupled with your data entities anyway) and give the view model properties that the view needs, e.g.:
public class PersonCreateViewModel
{
public SelectList Cities { get; set; }
public string Address { get; set; }
public string Name { get; set; }
...
}
They should then bind back by default to the same model, presuming your view is correct:
public ActionResult Create (PersonCreateViewModel model)
{
// Map PersonCreateViewModel properties to Person properties
}