Upgrade MVC1/xVal project to MVC2 and compatibilities with client side validation - asp.net-mvc

I am currently looking here to migrate a project from MVC1 to MVC2. We are using xVal for client side validation.
From what I understand, I only have to remove references to xVal and replace by MVC2 EnableClientSideValidation and it should do the trick. Anything else would be required ?
Also, with xVal could not validate on client side a list of models, is it still the case with MVC2 + ClientSideValidation ? (what I mean with the "list of models" is doing validation on a List<TypeOfModel>)
Example of this is :
controller:
public ActionResult Index()
{
Models.Model1 model = new Models.Model1();
model.Usernames = new List<Models.Model2>();
model.Usernames.Add(new Models.Model2 { });
model.Usernames.Add(new Models.Model2 { });
model.Usernames.Add(new Models.Model2 { });
model.Usernames.Add(new Models.Model2 { });
return View(model);
}
Model1:
class Model1 {
public List<Model2> Usernames { get; set; }
}
Model2:
class Model2 {
[Required]
public string Username { get; set; }
}
View:
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm()) { %>
<% foreach (var username in Model.Usernames) { %>
<% Html.RenderPartial("View2", username); %>
<br /><br />
<% } %>
<input type="submit" />
<% } %>
View2:
<%= Html.EditorFor(f => f.Username) %>
<%= Html.ValidationMessageFor(a => a.Username)%>
This is a POC where MVC2 client side validation is failing since it validates by field id...

Been there, done that, got the T-Shirt. And wish I never went there -- MVC2 validation is frankly not on par with xVal once you've got xVal properly implemented. In addition, MVC3 validation is much, much better done. So, if I were jumping off xVal, I would vector towards making it work with MVC3 which is a much different beast.

Though I subscribe somewhat to what Wyatt said here especially the part about MVC3, but I have been using MVC2 client side validation and it has not been a bad experience at all.
To answer your question, you need to do the following:
1. Include MicrosoftAjax.js and MicrosoftMvcValidation.js in your view.
2. Then simply call the helper <% Html.EnableClientValidation(); %>
It should pickup your DataAnnotation model validation rules and give you client side validation without much effort.

Related

Can't figure out why model is null on postback?

I'm new to ASP.NET MVC and I'm trying to create a very simple blog type site as a means of learning how everything works. But, I'm having a problem when posting from a comment form to a model which is null and I can't tell why.
On a blog post page, I have an "add comment" link which calls some JQuery to render a partial view that is strongly typed to the CommentModel. The link passes in the ID of the blog post as well and the partial is coded like:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Blog.Models.CommentModel>" %>
<% using (Html.BeginForm())
{ %>
<%: Html.HiddenFor(x => x.Post.ID) %>
<%: Html.HiddenFor(x => x.CommentID) %>
<%: Html.TextBoxFor(x => x.Name) %><br />
<%: Html.TextBoxFor(x => x.Email) %><br />
<%: Html.TextBoxFor(x => x.Website) %><br />
<%: Html.TextAreaFor(x => x.Comment) %><br />
<input type="submit" value="submit" />
<% } %>
The CommentsModel is simple and looks like this (I haven't applied any validation or anything yet):
public class CommentModel
{
public BlogPost Post { get; set; }
public int CommentID { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Website { get; set; }
public string Comment { get; set; }
}
This is then supposed to post to a simple controller action which will add the comment to the database and return the user to the page. For the sake of simplicity, I've stripped out most of the code but it looks similar to:
[HttpPost]
public ActionResult CommentForm(CommentModel model)
{
if (ModelState.IsValid)
{
}
else
{
}
}
Everything works as expected, except that when posting the comment form, the comment model is null. I can't figure out why this is null. When I view the source of the rendered partial view, I can see that the "Post.ID" is populated with the correct ID, but this is lost when the form is submitted.
Am I missing something obvious here? I've set up forms similar to this in the past and it's worked fine, I can't understand why its not now. Thanks in advance.
Later Edit:
I had typed the code incorrectly and changed the public ActionResult CommentForm(CommentModel model) from public ActionResult CommentForm(CommentModel comment) which was causing the problem.
Thanks for the help.
Similar kind of question has been answered yesterday. Check out : MVC3 - Insert using ViewModel - Object reference not set to an instance of an object
The problem I can see is , when the form is posted, the Post.ID and CommentID are passed, whereas your action is expecting a full blown object of type "CommentModel". The model binder is unable to map the post data, into the corresponding model object.
Add:
public int PostID {get; set;}
...to your model, and populate that in your controller as a hidden input. The Post object is not going to parse easily.

Client Side Validation fails when moving to viewmodel

This seems to a common question for lots of reasons that do not seem to apply to this situation. I have create page using ASP.NET MVC 2 and I was using a strongly typed view to a class generated from DataEnities framework.
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MVC_EDI.Models.wysCustomerEndPoint>"" %>
I made validation class that I bound back to the the data class.
[MetadataType(typeof(EndPointValidation))]
public partial class wysCustomerEndPoint
{
}
[Bind()]
public class EndPointValidation
{
[Required(ErrorMessage = "Please enter the end point name")]
public string CustName { get; set; }
And I was able to use client side validation on my create page. I had a requirement to add a dropdown list box on the create page, so I switched my view to use a viewmodel instead of the data class I was using.
public class CreateEditCustomerEndPointsViewModel
{
public wysCustomerEndPoint CustomerEndPoint {get; set;}
public List<SelectListItem> DefaultLocationList { get; set; }
}
and here is the view header using the new viewmodel.
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MVC_EDI.ViewModles.CreateEditCustomerEndPointsViewModel>" %>
But now when this view gets loaded I am getting an error that my formElement is null when it tries to set a value ? I error out here inteh MicrosofyMvcValidation.js file and the formElement array is null.
formElement['__MVC_FormValidation'] = this
I suspect I need to add some sort of data annotation or attribute to either my view model or something like that. But I am not sure where? And surprisingly it seems to work out just fine in FireFox 5 but bombs in IE9?
Edit: thanks for the reply. Yes I believe I am instantiating the object before adding to the ViewModel and using the Html.Helper objects? Here is the code.
wysCustomerEndPoint ep = new wysCustomerEndPoint();
ep.BuyerID = id;
var viewModel = new CreateEditCustomerEndPointsViewModel()
{
CustomerEndPoint = ep
};
return View(viewModel);
and in the view
<div class="editor-label">
<%: Html.Label("Name") %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.CustomerEndPoint.CustName) %>
<%: Html.ValidationMessageFor(model => model.CustomerEndPoint.CustName) %>
</div>
cheers
bob
You're maybe doing this, but without seeing the relevant bits of code I don't want to assume. So, make sure you are instantiating the wysCustomerEndPoint object and sending to your view from the Controller method. Also that you are using the Html Helpers for the input elements that you are validating on. Eg.
Html.TextboxFor(model => model.wysCustomerEndPoint.CustName)

Mvc2 validation summary and required metadata

source code...
Thing is, if i specify required metadata using fluent modelmetadata provider like this=>
public class Foo
{
public string Bar { get; set; }
}
public class FooModelMetadataConfiguration : ModelMetadataConfiguration<Foo>
{
public FooModelMetadataConfiguration()
{
Configure(x => x.Bar)
.Required("lapsa") ;
}
}
And write this into my view =>
<% Html.BeginForm(); %>
<%= Html.ValidationSummary() %>
<%= Html.TextBoxFor(x=>x.Bar) %>
<% Html.EndForm(); %>
And add this to home controller =>
[HttpPost]
public ActionResult Index(Foo foo)
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View(foo);
}
It will output this html =>
<div class="validation-summary-errors">
<ul>
<li>lapsa</li>
<li>The Bar field is required.</li>
</ul>
</div>
I can't understand why 2nd error is rendered and how to omit it.
Author of System.Web.Mvc.Extensibility framework replied with =>
I think this is a known issue of asp.net mvc, i could not remember the exact location where I have read it, I suggest you post the issue in asp.net mvc issue tracker over codeplex.
But before i post anything on issue tracker - i would like to understand first what exactly is wrong.
Any help with that?
It's fixed now.

ASP.NET MVC and ViewState

Now I've seen some questions like this, but it's not exactly what I want to ask, so for all those screaming duplicate, I apologize :).
I've barely touched ASP.NET MVC but from what I understand there is no ViewState/ControlState... fine. So my question is what is the alternative to retaining a control's state? Do we go back to old school ASP where we might simulate what ASP.NET ViewState/ControlState does by creating hidden form inputs with the control's state, or with MVC, do we just assume AJAX always and retain all state client-side and make AJAX calls to update?
This question has some answers, Maintaining viewstate in Asp.net mvc?, but not exactly what I'm looking for in an answer.
UPDATE: Thanks for all the answers so far. Just to clear up what I'm not looking for and what I'm looking for:
Not looking for:
Session solution
Cookie solution
Not looking to mimic WebForms in MVC
What I am/was looking for:
A method that only retains the state on postback if data is not rebound to a control. Think WebForms with the scenario of only binding a grid on the initial page load, i.e. only rebinding the data when necessary. As I mentioned, I'm not trying to mimic WebForms, just wondering what mechanisms MVC offers.
The convention is already available without jumping through too many hoops. The trick is to wire up the TextBox values based off of the model you pass into the view.
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult CreatePost()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreatePost(FormCollection formCollection)
{
try
{
// do your logic here
// maybe u want to stop and return the form
return View(formCollection);
}
catch
{
// this will pass the collection back to the ViewEngine
return View(formCollection);
}
}
What happens next is the ViewEngine takes the formCollection and matches the keys within the collection with the ID names/values you have in your view, using the Html helpers. For example:
<div id="content">
<% using (Html.BeginForm()) { %>
Enter the Post Title: <%= Html.TextBox("Title", Model["Title"], 50) %><br />
Enter the Post Body: <%= Html.TextArea("Body", Model["Body"]) %><br />
<%= Html.SubmitButton() %>
<% } %>
</div>
Notice the textbox and textarea has the IDs of Title and Body? Now, notice how I am setting the values from the View's Model object? Since you passed in a FormCollection (and you should set the view to be strongly typed with a FormCollection), you can now access it. Or, without strongly-typing, you can simply use ViewData["Title"] (I think).
POOF Your magical ViewState. This concept is called convention over configuration.
Now, the above code is in its simplest, rawest form using FormCollection. Things get interesting when you start using ViewModels, instead of the FormCollection. You can start to add your own validation of your Models/ViewModels and have the controller bubble up the custom validation errors automatically. That's an answer for another day though.
I would suggest using a PostFormViewModel instead of the Post object, but to each-his-own. Either way, by requiring an object on the action method, you now get an IsValid() method you can call.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult CreatePost(Post post)
{
// errors should already be in the collection here
if (false == ModelState.IsValid())
return View(post);
try
{
// do your logic here
// maybe u want to stop and return the form
return View(post);
}
catch
{
// this will pass the collection back to the ViewEngine
return View(post);
}
}
And your Strongly-Typed view would need to be tweaked:
<div id="content">
<% using (Html.BeginForm()) { %>
Enter the Post Title: <%= Html.TextBox("Title", Model.Title, 50) %><br />
Enter the Post Body: <%= Html.TextArea("Body", Model.Body) %><br />
<%= Html.SubmitButton() %>
<% } %>
</div>
You can take it a step further and display the errors as well in the view, directly from the ModelState that you set in the controller.
<div id="content">
<%= Html.ValidationSummary() %>
<% using (Html.BeginForm()) { %>
Enter the Post Title:
<%= Html.TextBox("Title", Model.Title, 50) %>
<%= Html.ValidationMessage("Title") %><br />
Enter the Post Body:
<%= Html.TextArea("Body", Model.Body) %>
<%= Html.ValidationMessage("Body") %><br />
<%= Html.SubmitButton() %>
<% } %>
</div>
What is interesting with this approach is that you will notice I am not setting the validation summary, nor the individual validation messages in the View. I like to practice DDD concepts, which means my validation messages (and summaries) are controlled in my domain and get passed up in the form of a collection. Then, I loop throught he collection (if any errors exist) and add them to the current ModelState.AddErrors collection. The rest is automatic when you return View(post).
Lots of lots of convention is out. A few books I highly recommend that cover these patterns in much more detail are:
Professional ASP.NET MVC 1.0
Pro ASP.NET MVC 1.0 Framework
And in that order the first covers the raw nuts and bolts of the entire MVC framework. The latter covers advanced techniques outside of the Microsoft official relm, with several external tools to make your life much easier (Castle Windsor, Moq, etc).
The View is supposed to be dumb in the MVC pattern, just displaying what the Controller gives it (obviously we do often end up with some logic there but the premise is for it not to be) as a result, controls aren't responsible for their state, it'll come from the controller every time.
I can't recommend Steven Sanderson's book Pro ASP.NET MVC by Apress enough for getting to grips with this pattern and this implementation of it.
In Web Forms, control values are maintained in the viewstate so you (theoretically) don't need to reinitialize and such with each postback. The values are (again theoretically) maintained by the framework.
In ASP.NET MVC, if you follow the paradigm, you don't need to maintain state on form elements. The form element values are available on post where your controller can act on them (validation, database updates, etc.). For any form elements that are displayed once the post is processed, you (the developer) are responsible for initializing them - the framework doesn't automatically do that for you.
That said, I have read about a mechanism called TempData that allows your controller to pass data to another controller following a redirect. It is actually a session variable (or cookie if you configure it as such) but it is automatically cleaned up after the next request.
The answer really depends on the types of controls you are trying to maintain state for. For basic Html controls then it is very easy to maintain state with your Models, to do this you need to create a strongly typed view.
So if we had a User model with the properties: Username, FullName, Email, we can do the following in the view:
<%= Html.ValidationSummary() %>
<% using (Html.BeginForm()) { %>
<fieldset>
<legend>User details</legend>
<%= Html.AntiForgeryToken() %>
<p>
<label for="Username">Username:</label>
<%= Html.Textbox("Username", Model.Username, "*") %>
</p>
<p>
<label for="FullName">FullName:</label>
<%= Html.Textbox("FullName", Model.FullName, "*") %>
</p>
<p>
<label for="Email">Email:</label>
<%= Html.Textbox("Email", Model.Email, "*") %>
</p>
<p>
<input type+"submit" value="Save user" />
</p>
</fieldset>
<% } %>
We would then have two controller actions that display this view, one for get and another for post:
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult User()
{
return View(new User())
}
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult User([Bind(Include = "Username,FullName,Email")]User user)
{
if (!ModelState.IsValid()) return View(user);
try
{
user.save()
// return the view again or redirect the user to another page
}
catch(Exception e)
{
ViewData["Message"] = e.Message;
return View(user)
}
}
Is this what you are looking for? Or do you want to maintain the state of Models that are not being displayed in a form between requests?
The key thing to remember is that your code executes on the server for the duration of the request and ends, the only information you can pass between your requests is basic html form data, url parameters and session information.
As other people have mentioned, I'd highly recommend Steve Sandersan's Pro ASP.NET MVC Framework for a complete understanding of working with the MVC Framework.
hidden fields, like:
<% using (Html.BeginForm<SomeController>(c=>c.SomeAction(null))) {%>
<%= Html.Hidden("SomeField", Model.SomeField)%>
<%= Html.Hidden("AnotherField", Model.AnotherField)%>
setting the specific model & not having any explicit fields (gives u hidden fields). In the example below, the Model is filled by the controller with values received from the last post, so this enables a no js option in the page that can filter based on a status:
Some Filter: <% using( Html.BeginForm<SomeController>(
c => c.SomeAction(model.SomeField, model.AnotherField, model.YetAnotherField, null, model.SomeOtherField)
)) { %>
<%= Html.DropDownList("status", Model.StatusSelectList)%>
<input type="submit" value="Filter" class="button" />
<% } %>
use extension methods to create fields, if u just want the fields to be filled with posted values when u are showing failed validation messages on the submitted form
on asp.net mvc 2 they introduced a way to save an instance in a hidden field ... encoded + (I think) signed
TempData if everything of the above doesn't do it (goes through session - cleaned on the next request)
as u mentioned, when using ajax the state is already in the previously loaded fields in the client site. If u l8r on need to do a full post, update any field u might need to with your js.
The above are all different independent options to achieve it that can be used in different scenarios. There are more options I didn't mention i.e. cookies, session, store stuff in db (like for a resumable multi step wizard), parameters passed to an action. There is no 1 single mechanism to rule them all, and there shouldn't be.
The best way to do this, i think, is to serialize your original model to a hidden field, then deserialize it and update the model on post. This is somewhat similair to the viewstate approach, only you have to implement it yourself. I use this:
first i need some methods that make things easier:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using LuvDaSun.Extensions;
using System.Web.UI;
namespace LuvDaSun.Web.Mvc
{
public static class HtmlHelperExtensions
{
static LosFormatter _losFormatter = new LosFormatter();
public static string Serialize(this HtmlHelper helper, object objectInstance)
{
var sb = new StringBuilder();
using (var writer = new System.IO.StringWriter(sb))
{
_losFormatter.Serialize(writer, objectInstance);
}
return sb.ToString();
}
}
[AttributeUsage(AttributeTargets.Parameter)]
public class DeserializeAttribute : CustomModelBinderAttribute
{
public override IModelBinder GetBinder()
{
return new DeserializeModelBinder();
}
}
public class DeserializeModelBinder : IModelBinder
{
static LosFormatter _losFormatter = new LosFormatter();
public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
if (bindingContext.ModelType.IsArray)
{
var type = bindingContext.ModelType.GetElementType();
var serializedObjects = (string[])bindingContext.ValueProvider.GetValue(bindingContext.ModelName).ConvertTo(typeof(string[]));
var deserializedObjects = Array.CreateInstance(bindingContext.ModelType.GetElementType(), serializedObjects.Length);
for (var index = 0; index < serializedObjects.Length; index++)
{
var serializedObject = serializedObjects[index];
var deserializedObject = _losFormatter.Deserialize(serializedObject);
deserializedObjects.SetValue(deserializedObject, index);
}
return deserializedObjects;
}
else
{
var serializedObject = (string)bindingContext.ValueProvider.GetValue(bindingContext.ModelName).ConvertTo(typeof(string));
var deserializedObject = _losFormatter.Deserialize(serializedObject);
return deserializedObject;
}
}
}
}
then in my controller i have something like this (to update a product)
public ActionResult Update(string productKey)
{
var model = _shopping.RetrieveProduct(productKey);
return View(model);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update([Deserialize]Shopping.IProduct _model, FormCollection collection)
{
UpdateModel(model);
model.Save();
return RedirectAfterPost();
}
and i need a hidden field that holds the serialized object in the form:
<%
using (Html.BeginRouteForm("Product", FormMethod.Post, new { id = UniqueID, }))
{
%>
<%= Html.Hidden("Model", Html.Serialize(Model)) %>
<h1>
Product bewerken</h1>
<p>
<label for="<%=UniqueID %>_Name">
Naam:</label>
<input id="<%=UniqueID %>_Name" name="Name" type="text" value="<%= Html.AttributeEncode(Model.Name) %>"
class="required" />
<br />
</p>
<p>
Omschrijving:<br />
<textarea id="<%= UniqueID %>_Description" name="Description" cols="40" rows="8"><%= Html.Encode(Model.Description) %></textarea>
<br />
</p>
<p>
<label for="<%=UniqueID %>_Price">
Prijs:</label>
<input id="<%= UniqueID %>_Price" name="Price" type="text" value="<%= Model.Price.ToString("0.00") %>"
class="required" />
<br />
</p>
<ul class="Commands">
<li>Annuleren</li>
<li>
<input type="submit" value="Opslaan" /></li>
</ul>
<%
}
%>
<script type="text/javascript">
jQuery('#<%= UniqueID %>').validate();
</script>
as you can see, a hidden field (Model) is added to the form. It contains the serialization information for the original object. When the form is posted, the hidden field is also posted (ofcourse) and the contents are deserialized by the custom modelbinder to the original object which is then updated and saved by the controller.
Do note that the object you are serializing needs to be decorated with the Serializable attribute or needs to have a TypeConverter that can convert the object to a string.
The LosFormatter (Limited Object Serialization) is used by the viewstate in webforms. It also offers encryptionn of the serialization data.
greets...
AJAX calls is what we do. If you're talking about grids in general, check out JQGrid and how they recommend the AJAX implementation.

ASP.NET MVC - MasterPageView and RenderPartials - Confusion

I'm a little confused with trying to do bring a list of Categories into a navigation bar on a MasterPageView in the latest release of the ASP.NET MVC framework.
I have 0 experience with Partials so far (this adds to the confusion).
Should I use this variant of the RenderPartial?
HtmlHelper.RenderPartial(string partialViewName, object model)
I wasn't able to find any good examples of this method. By convention there is no model associated with the MasterPageView right? So what is the proper way to push or pull data into a "partial" from the MasterPageView?
Assuming that this method is absolutely going down the wrong path:
<div id="navigation">
<%
CategoryRepository cr = new CategoryRepository();
IList<Category> lst = cr.GetCategories();
Html.RenderPartial("NavBar", lst);
%>
</div>
Do you not want your masterpage to have viewdata? You could solve it by having a base view data class that ALL your other viewdata classes inherit from...
BaseViewData.cs - this is a viewdata class that all other viewdata classes will inherit from
public class BaseViewData
{
public string Title { get; set; }
public string MetaKeywords { get; set; }
public string MetaDescription { get; set; }
IList<Category> NavCategoryList { get; set; }
}
Now in your Site.Master page simply have
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage<BaseViewData>" %>
<title><%=ViewData.Model.Title %></title>
<meta name="keywords" content="<%=ViewData.Model.MetaKeywords %>" />
<meta name="description" content="<%=ViewData.Model.MetaDescription %>" />
<%= Html.RenderPartial("NavBar", ViewData.Model.NavCategoryList) %>
This could significantly impact your application architecture, but its not necessarily a bad thing.
HTHs,
Charles
public ActionResult NavBar()
{
CategoryRepository cr = new CategoryRepository();
IList<Category> lst = cr.GetCategories();
return View(lst);
}
on your partial call
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%# Import Namespace="app.Models" %>
and do all your rendering ui here
<div id="navigation">
<%
Html.RenderPartial("NavBar");
%>
</div>
you can do ActionResult calls in your controllers
I would say that since it's the Master Page you would probably have to store your data that you are passing in ViewData with a string key. If it was a regular view page it would be better to have a strongly typed page, but this is a different case. So you would probably do something this in your controller:
ViewData["MasterPageData"] = FunctionToGetData();
And then on the Master Page something like this:
<%
if (ViewData["MasterPageData"] != null)
{
Html.RenderPartial("ControlName.ascx", ViewData);
}
%>
Then in the control, process like you would on a normal view page:
<% var categories = (CastIfNeeded)ViewData["MasterPageData"]; %>
process as normal...
I haven't had to pass data to a master page yet, but that's how I would think you'd do it. More info here.
EDIT: Changed it around a little to reflect what I'm doing in my current project.
I would use Html.RenderAction() instead and return a partial view from it.

Resources