Structuring complex web forms in ASP.NET MVC - asp.net-mvc

What is a good approach in ASP.NET MVC for implementing a complex form where sections of the form are shown and hidden based on a user's inputs?
My background is in Webforms. I am frequently asked to build forms where a user selects an option from a dropdown list, triggering a handful of new fields to appear. A different selection might cause a different set of fields to appear.
In the past, I would handle this scenario via an UpdatePanel and a wrapper Panel around the fields that I want to show or hide. Validation is automatically disabled when the fields are hidden.
Going forward, I'd like to make use of MVC's attribute-based model validation, but is it possible to make the validation conditional on the values of other properties?
Also, how can I handle the toggling of blocks of form fields? I know how to do it manually in jQuery, but I'm hoping there's an approach that ties in with validation and server-side code.
I am liking MVC much better overall, but I haven't figured out how to handle this type of scenario very well. Likely I just need to shift my thinking to fit better with the MVC approach.

Josh,
The first thing I's suggest is to make sure you use ViewModels for the pages that are mode complicated. A ViewModel is basically a Model you create for a specific View; for example, a ViewModel could be a composition of other classes.
As for dynamically changing the fields on your View, the best way is to use jQuery (or any other javascript library) to do it.
I also migrated from a web form environment and I know is difficult to change gears at the begining, but trust me, doing a simple jQuery even handler is much simpler than having to put in place a control panel and then the event handlers.
Not to mention that is much more efficient; update panels are after all making partial posts to the page, sometimes, with jQuery you don't even need to do that.
After a few projects with MVC, I actually now find it time consuming to go and do the Update Panels on web forms ;)
Hope this helps,
-Covo

I know this might not be the answer you're looking for, but I personally don't think complex forms are very user friendly in the first place and I always try to split them up into simpler forms where possible, or to simplify the form. I've come across many forms in websites where there are a raft of "fields" where there should really be a few questions for the user to answer. Simple stuff which gets to the point of what they want to achieve rather than the field values, along with a lot of application specific knowledge needed to set those fields to the right values.
If you still want to go ahead with a complex form, then as the other answers have already stated there are facilities provided by MVC to do that, but there isn't any set way. So, it's down to you to figure out what will work best for your users.

Traditional asp.net webforms did alot of "magic" for you whereas you have to be aware of the work that goes into creating the "magic" in asp.net MVC. The benefit is that with MVC you have more control over what is happening which can also enhance performance.
In asp.net webforms an UpdatePanel is used for ajax calls. If you need to got to the server asynchronously(without doing a full post back) then use ajax via JQuery. See below for example:
$.ajax({
type: "get",
url: "/YourController/YourAction",
success: function (obj) {
//any logic you want to do upon success
}
});
The above example will do an ajax HTTP GET call to /YourController/YourAction.
In order to handle "toggling of blocks", if you don't need to go to the server for data and you simply want to do it on the client, then use simple jquery. JQuery has a function for toggling items.
http://api.jquery.com/toggle-event/

Because of the way MVC works in contrast to Webforms you're stuck with the responsibility of really thinking about what happens on the client and what happens on the server separately as not a lot of meta-data is being passed back to give us that happy Webforms feeling.
However, there is a notion when using the built-in AJAX libraries when you render a form that you can have it auto do an update once it is posted. In a sense, it's saving you the JavaScript/JQuery because it "auto-wires" it up similar-ish to a Panel. In this way you could potentially look at progressively rendering your complex forms from the server as each section is edited, etc.
See MSDN: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx
The relevant code example to give you an idea (unfortunately, it's not in the more readable Razor syntax):
The relevant line is the Ajax.BeginForm where the form tag is rendered. Once the form is posted, the MS AJAX library will auto update the element specified in "UpdateTargetId" specified in the form's AjaxOptions. In this case, the response will be placed into the SPAN element "textEntered" upon reply from the server. Here, you could progressively render more content to the user to fill out, perhaps another form, etc.
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
</p>
<span id="status">No Status</span>
<br />
<%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
<br /><br />
<% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
<%= Html.TextBox("textBox1","Enter text")%>
<input type="submit" value="Submit"/><br />
<span id="textEntered">Nothing Entered</span>
<% } %>

Related

is it possible to nest one form inside another in razor?

I put the begin/end form statement in the layout page so that I don't have to repeat it on several pages. Below's a simplified version of the code.
#using(Html.BeginForm())
{
#RenderBody()
<input type = "submit" name = "nextButton" value = "Next-->" />
}
Things are working well. Unfortunately, I have a page that has several "Delete" buttons. I want to generate a form for each delete button so that it can send the id of the item to delete back to the controller.
Can I do that knowing that there's already another form on top of that?
Thanks for helping
As Mrchief says, the the HTML specs forbid nested forms. Since MVC just generates standard HTML, you have to work withinn the framework of the spec.
Why not just create two master layouts, and use the form based one most of the time, but use one without a form when you need more control over the embedded forms.
This is the why you should really only use forms exactly where they are needed, not just everywhere.
Do note that nesting of forms is not allowed as per the W3 specs
Every form must be enclosed within a FORM element. There can be
several forms in a single document, but the FORM element can't be
nested.
There is an interseting article about caveats of nesting forms here.
In this case, it is better to generate a form for each button instead of having a single form.
ASP.Net web forms restricted you from having multiple forms on the page by using runat=server attribute (and the framework ensuring that only one per page was allowed). MVC forms are pure HTML so you can have multiple of them.

ASP NET MVC: Dynamically adding or removing inputs on the form - unobtrusive validation

Before starting, I do have a very particular question and if you want to answer it go straight to the end. But I do welcome comments and advices hence the lengthy post.
OK, we deal with a lot of forms and some of these forms are quite lengthy and have many fields. We also have a requirement - in addition to top level fields - to be able to have variable number of repating rows - as we call them. For example, let's think of a customer which has name, surname and age while it can have zero or many addresses (say 0 to 10) so the user must be able to add or remove contacts from the form while filling it in. So typically user gets and "Add" button to add more addresses and next to each address, a delete button. Potentially there could be more than one repeating section in the same form but I am not going there. The point is, because of legal and historical reasons, all the forms must be saved at once so while the forms can be edited, we cannot accept a half-filled form and have another page for users to add and remove addresses, e.g.
I am using ASP NET MVC 2 (strongly typed views with a single generic controller) with client side validation and heavy jquery scripting for flashy features. We are probably going to migrate to ASP NET MVC 3 very soon and I am already playing with 3 for finding a good solution. These addresses are defined on the Model as List<Address>, e.g.
I currently have a working solution for this issue but I am not satisfied with it: I have an HTML Helper that names the add or delete buttons and a bit of JavaScript to disable validation and allow the form to be posted back (even invalid) and since I can find out the name of the button that was clicked, I have all the necessary logic to handle add or delete and works really well.
But I am posting back and the form is reloaded and I am looking for an aletrnative solution. Here are what I can do:
Do everything in the client side. "Add" button will clone one of such addresses and "Delete" button will remove() the element. I only have to rename the indexes which I have done. We were using jquery calendar and it was breaking on the new elements which I have also fixed. But the validation is not working which can probably work with ASP NET MVC but this solution looks like a very brittle one - a house of card which looks great before you add another card.
Post the whole page usin Ajax and then load it back again: This is probably better than my current solution but only slightly.
Use ajax to post the form and get back JSON and use the data to build the elements or remove them: Again a house of card because of extensive client side scripting
Serialize the form and post using Ajax to a particular action and get back only the repating section (as a partial view). The action on the controller can be reused and called from the view itself to return the partial view
OK last one is the one I am working on but there is an issue. ASP NET MVC 3 with unobtrusive validation works only if the form is engulfed in a BeginForm() while my top level view has a BeginForm() but not my partial view. It works well when I call it from the view but not on the ajax call to get just the repeating section.
(Question)
So is there a way to tell ASP NET MVC 3 to spit out validation data atttributes regardless being in a BeginForm() block?? To be honest if this is not a bug, this is definitely an important feature request. I have in fact used reflector to disassemble the code and the condition seems to be there.
Short Answer:
Add this to the partial view:
if (ViewContext.FormContext == null)
{
ViewContext.FormContext = new FormContext();
}
I don't think it is possible using the default unobtrusive libraries supplied. If you look at jquery.validate.js and jquery.validate.unobtrusive.js it looks like it only validates what is inside the form.
There's a few posts about it if Googled and a few work arounds.
I had a similar issue (although much simpler) where I had a validation summary at the top of the page and multiple forms but the unobtrusive javascript would only populate the view summary if its inside the form (jquery.validate.unobtrusive.js line 39 if interested...).
I'm not sure if the validation library is extendible but most things in jquery are so that might be an option if you want to go down that road.
As far a possible solution to your problem I'll put in my 2 cents for whats its worth.
You could have two actions that are posted to. The first action is you post your model with no js validation and all validation is handled in the code - this will catch all user with javascript turned off.
Your second action is you serialized the model. In mvc 3 using the Ajax.BeginForm has an AjaxOption for Url where you can specify an action for the jquery to call (where it serializes the form form you and you can decorate your action with your strongly typed model). Here you can check the model and return a json result and handle this in the javascript.

Ruby on Rails registration data?

I am trying to build a registration page, with two steps.
The first step displays a form with name, email, pass.
The second step will display a ReCaptcha.
The problem is how do I store the form data and display a new form with a captcha?
I was thinking sessions, but I know you're not supposed to store sensitive information in sessions.
I was thinking of using Ajax to render the ReCaptcha if the name, email, pass.. pass validations.
Any advice? Thank you.
My advice is that I think that two forms for a situation like this is unnecessarily complicated unless there is some application specific imperative to decouple the username/password capture and the CAPTCHA check.
You're probably right to be concerned about using the session to store the intermediate data but if you do want to go that way there's a great screencast showing the technique for a similar application here.
Personally I would go the Javascript route. Load both forms at the same time, step 1 being visible and and step 2 being hidden. Validate step 1 with an AJAX call to the server (if you need that) or client-side if you don't. If step 1 is valid then unhide the step 2 form (and optionally hide the step 1 form if you like).
UPDATE: Adding further info at questioner's request
There are lots of ways to hide and show page content but a common approach is to wrap it in a <div> block marked hidden using CSS and then use some Javascript (e.g. JQuery) to toggle it hidden or unhidden. Like this:
<div id="step2" style="display:none">
<% form_for .... %>
<% end %>
</div>
When the page is loaded for the first time the form will be hidden. Then in JQuery (for example) do:
$(function() {
$('#step2').show();
});
to unhide it. See the documentation for show, hide and toggle for more usage examples.
If you need something simple, you can retain the parameters in the second step using hidden fields.
If you need something more complicated (multiple steps, comming back to previous step, partial validations, etc) you may use a wizard plugin. Here is a list of wizard plugins from Ruby Toolbox.
There are lots of ways of doing this.
railscast #217, demostrates a generic way of dealing with multistep forms, capable of handling tricky things like going forwards and backwards multiple times. Give it a look.

ASP.NET MVC: add to querystring on form submit

I'm building a grid in ASP.NET MVC and I have the following issue:
Above the grid i have a column selector which lets people customize the columns being shown. This is a form with a submit button so that people can add/remove multiple columns at once without going trough multiple postbacks.
Below the grid I have paging. This is paging trough actionlinks (a href's).
alt text http://thomasstock.net/mvcget.jpg
What happens when a user add/removes columns is that the form gets submitted to http://localhost:56156/?columnsToDisplay=EmployeeId and ofcourse the grid jumps back to page 1. I'd like to keep the grid on the page the user was currently on. So I need a way to include the current querystring parameters into the form's action attribute.
The other way around too: I need a way to do the same with actionlinks. But this is less necessary as I could always replace the a href's with buttons and put them in a form. But I'd rather not do that.
I'm looking for a solution without javascript! I can do it myself in javascript, but I'd like my grid to work perfectly on javascript-disabled browsers.
Any help is appreciated.
Edit:
Oh yeah, to make it a bit harder, I'm also looking for a solution without cookies/session variables. :-)
You need to add the line below into your column selector form
<input type="hidden" name="page" value="<%=Request.QueryString["page"]%>" />

Is there a benefit to using the HtmlHelper in MVC?

Is there a specific reason why I should be using the Html.CheckBox, Html.TextBox, etc methods instead of just manually writing the HTML?
<%= Html.TextBox("uri") %>
renders the following HTML
<input type="text" value="" name="uri" id="uri"/>
It guess it saves you a few key strokes but other than that. Is there a specific reason why I should go out of my way to use the HtmlHelpers whenever possible or is it just a preference thing?
Another benefit is that if your ViewData contains a value matching the name of the field it will be populated.
e.g.
ViewData["FirstName"] = "Joe Bloggs";
<%=Html.TextBox("FirstName") %>
will render
<input type="text" value="Joe Bloggs" id="FirstName" />
There are huge benefits:
It has overloaded methods to pre-populate the values (formatted, and safe for HTML) just like the ViewState.
It allows built in support for the Validation features of MVC.
It allows you to override the rendering by providing your own DLL for changing the rendering (a sort of "Controller Adapter" type methodology).
It leads to the idea of building your own "controls" : http://www.singingeels.com/Articles/Building_Custom_ASPNET_MVC_Controls.aspx
One thing is for consistency...I for one always forget the name attribute. Plus, you can extend the functions for your own projects. They're not called helpers for nothing!
The upside to using an abstraction layer is future proofing your code in a pluggable way. Maybe today, you create HTML 4 pages but tomorrow you want to create XHTML pages or XAML or XUL. That's a lot of changes if you just hard code the tags everywhere, especially if you've got hundreds of pages. If everything is calling this library, then all you've got to do is rewrite the library. The downside is that it is usually considered to be slightly less readable by humans. So, it most probably increases the cognitive demand on your maintenance programmers. These advantages and disadvantages really have nothing to do with MVC.
It actually auto populates your textbox based upon first your ViewData.Model.uri and second by ViewData["uri"]. Doing it manually you'd need to do <input value="<%Html.Encode(ViewData.Model.Uri"%>" />
I haven't been doing MVC too long, but I've already written some extension methods to generate menu tabs based on Html.ActionLink. It allows me to be consistent with my usage and, if I decide to change how my CSS menus work, only modify a single method to output the new tab format.
The other use that I have made of them is in conditional output using ViewData to supply values to the controls.

Resources