How To Implement Wizard Type Page Navigation
Jul 2, 2010
I am using ASP.NET MVC 2 & .Net 3.5 with Visual Studio 2008. Ok, what I am referring to by 'Wizard type page navigation', is a site where you have a list of stages in a given process or workflow. There is some kind of visual denotation to indicate which part of the stage you are at. I have already implemented this part (albeit, it smells like a hack) via the following:
css class current denotes active page.
css class notcurrent denotes in-active page (i.e. page you are not on)
I declared the following method in a class called NavigationTracker.
public static String getCss(String val, String currView) {
String result = String.Empty;
String trimmedViewName = currView.Substring(currView.LastIndexOf("/") + 1).Replace(".aspx", "");
if (val.ToLower().Equals(trimmedViewName.ToLower()))
result = "current"; else result = "notcurrent"; return result; }
I have my stages in a control like this:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="TheProject.Models" %>
<link href="../../Content/custom.css" rel="stylesheet" type="text/css" />
<% String currentView = ((WebFormView)ViewContext.View).ViewPath; %>
<table width="100%"> <tr>
<td class="<%= NavigationTracker.getCss("LogIn",currentView)%>" style="width:18%;">Log In</td>
<td class="<%= NavigationTracker.getCss("YearSelect",currentView)%>" style="width:18%;">Year Section</td>
<td class="<%= NavigationTracker.getCss("GoalEntry",currentView)%>" style="width:18%;">Goals</td>
<td class="<%= NavigationTracker.getCss("AssessmentEntry",currentView)%>" style="width:18%;">Assessment</td>
<td class="<%= NavigationTracker.getCss("SummaryEntry",currentView)%>" style="width:18%;"> Summary</td> </tr> </table>
To supplement this process, I'd like to create a user control that just has Previous & Next buttons to manage going through this process. So far, one snag I've hit is that this control cannot be put in the master page, but would have to be included in each view, before the form ends. I don't mind that so much. Clicking either the Previous or Next button submit the containing form to the appropriate action; however, I'm unsure on how to do the following:
1) Detect whether the Previous or Next button was clicked
2) Show/Hide logic of Previous & Next buttons at the beginning & end of the process respectively.
Another oddity I'm noticing with my application in general is that, after going through several pages of the process, if I click the back button, some values from my model populate on the page and others do not. For example, the text entered for a text area shows, but the value that had been chosen for a radio button is not selected, yet when inspecting the model directly, the appropriate object does have a value to be bound to the radio button. I may just need to put that last part in a new question. My main question here is with the navigation control. Any pointers or tips on handling that logic & detecting whether Next or Previous was clicked would be most helpful.
I had a thought to put a hidden field in the control that displays the Previous & Next buttons. Depending on what button was clicked, I would use javascript to update the hidden fields value. The problem now seems to be that the hidden field is never created nor submitted with the form. I've amended the controller post arguments to accept the additional field, but it never gets submitted, nor is it in the FormCollection. Here is the code for the hidden field. Note that its being generated in a user control that is called inside of the form on the parenting view (hope that makes sense).
<% Html.Hidden("navDirection", navDirection); %>
In short, the solution was to have a Navigation class like the one suggested with logic to determine the next or previous page based on the current view & a string list of all views. A partial view / user control was created to display the Previous / Next buttons. The user control had 2 hidden fields: 1) One with the value of the current view 2) a field indicating navigation direction (previous or next). Javascript was used to update the hidden navigation field value depending on what button was clicked. Logic in the user control determined whether or not to display the 'Previous' or 'Next' buttons depending on the first and last views in the wizard when compared to the current view. All said, I'm pretty happy with the results. I'll probably find some code smell issues when I return to this, but, for now, it works.
Here is the code for the control I built to display the 'Next' & 'Previous' navigation buttons:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="Project.Models" %>
<link href="../../Content/custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" > function setVal(val) {
var nav = document.getElementById("NavigationDirection"); nav.value = val;
} </script> <% String currentView = ((WebFormView)ViewContext.View).ViewPath;
String navDirection = "empty"; currentView = NavigationTracker.getShortViewName(currentView); %>
<input type="hidden" value="<%= currentView %>" name="CurrentView" id="CurrentView" />
<input type="hidden" value="<%= navDirection %>" name="NavigationDirection" id="NavigationDirection" /> <% if( currentView != NavigationTracker.FirstPage) { %>
<div style="float:left;"> <input type="submit" value="Previous" onclick="setVal('previous')" />
<!-- On click set navDirection = "previous" --> </div> <% } %>
<% if (currentView != NavigationTracker.LastPage) { %>
<div style="float:right;"> <input type="submit" value="Next" onclick="setVal('next')" /> <!-- On click set navDirection = "next" --> </div> <% } %>
From there, you render the control just before the closing tag of a form on views you want it like so:
<% Html.RenderPartial("BottomNavControl"); %> <% } %>
Now I can't really post all of the NavigationTracker code, but the meat of how it works can be deduced from the selected answer and the following snippet that returns the name of the view, based on the current view and the direction (previous or next).
public String NextView { get {
if (String.IsNullOrEmpty(this.NavigationDirection)) return string.Empty;
int index = this.MyViews.IndexOf(this.CurrentView); String result = string.Empty;
if (this.NavigationDirection.Equals("next") && (index + 1 < MyViews.Count ) {
result = this.MyViews[index + 1]; }
else if (this.NavigationDirection.Equals("previous") && (index > 0)) {
result = this.MyViews[index - 1]; } return result; } }
Now, doing all of this has a few side effects that could easily be considered code smell. Firstly, I have to amend all of my controller methods that are marked [HTTPPOST] to accept a NavigationTracker object as a parameter. This object contains helper methods and the CurrentView & NavigationDirection properties. Once this is done, I can get the next view the same way in all of my actions:
return RedirectToAction(nav.NextView);
where nav is of type NavigationTracker.
Another note is that the FirstPage & LastPage properties of NavigationTracker are static so I'm actually using NavigationTracker.FirstPage in my global.asax.cs file for my routing. This means I can go to my NavigationTracker class and change the flow in one place for the entire application.
View 3 Replies
Similar Messages:
Jan 14, 2010
I have created a wizard control. Now i would like hide all the Navigationbuttons, for example
- stepPreviousButton
- FinishPreviousButton etc.
How can i do than in my code-behind?
View 6 Replies
Jan 24, 2011
I am using the Wizard control to create a webshop with steps. The wish is for horizontal navigation on top and the links should not link (plain text) yet but the links to previous steps should become links. My sidebartemplate:
[Code]....
View 5 Replies
Aug 11, 2010
I am using Wizard control for password recovery. at first step I am checking the UserName with chkUserName(UserName.Text) function if UserName presents, the function will return the User Id and will navigate to next step, if UserName is wrong the function will return 0 and should not navigate to next step, but should stop at index 0 i.e. at the same step.
I have tried some solutions but it is navigating to next step in both the conditions.
in aspx the code is like:
[Code]....
View 5 Replies
Apr 8, 2010
I have a wizard control, which has 3 steps and the last is a complete step. I put on him a button in order to enable the user the option to return to the first step. How could I navigate back to the fist step?
View 1 Replies
Oct 15, 2010
I have a <asp:Wizard> control with 6 or so steps. In the first 3 steps, I want to hide the default Wizard navigation (Next button, etc.), as each WizardStep's contents will handle that. For the last 3 or so steps, if possible, I want to use the built-in navigation. I've modified the <StepNavigationTemplate> contents, but that alone doesn't cut it, because it affects all steps. Here are my options:
Find a way to dynamically show or hide the StepNavigation from the codebehind. (I feel like this might be best -- is it possible?)
Use StepType with <StartNavigationTemplate>, <StepNavigationTemplate>, and <FinishNavigationTemplate> to switch between navigation options (marking multiple steps as "start" or "finish" feels like it's abusing the mechanism)
Switch to a <asp:MultiView> and handle navigation manually (I'd rather not do this)
View 1 Replies
May 29, 2010
im am trying to write a forum using asp.net at the moment i have threads -> topics -> comments i realised that at the moment if users try to go back (from comments to topics and to threads), they can only use the back button in the browsers i am now trying to creat a menu like the one used in this forum (at the top "home >asp.net forums > general asp.net > getting started") as at anytime you can go back to see other topics at the moment i have tried to implement the following :
[Code]....
i thought that if i store get the topic_id from the address bar once, and store it in the session - then when i navigate to ..?comment_id - the topic_id would remain in the seesion i thought that in theory it kind of works, but now that i am trying to explain it here, i know that the session would then = to null. So i wondering is their any way to implement this navigation system
View 3 Replies
Oct 1, 2010
I am looking to implement a Wizard for my Web Form, please could somebody give me suggestions as to which approach would be best jQuery or ASP.NET Wizard control? give links describing the implementation, if possible.
View 1 Replies
Aug 25, 2010
Iam using masterpage and i want to use navigation menu ,but i don't want to use sitemap concept
how to work with navigation menu and assign the pages in navigation menu in master page
View 2 Replies
Jun 21, 2010
I have to implement the Live chat - support type in my asp.net web application
I m working framework 3.5
How can i do this.
View 1 Replies
Sep 13, 2010
I would like to create a webpage which can handle user events like page navigation and page close. And also I would like to handle the event on server-side coding.
View 1 Replies
Jan 6, 2011
Do you have any idea about the problem causes change the size of my nested aspx pages which are included in master page... When I click on my menu items, it navigates to new aspx pages which is in the content-placeholder .but new pages are getting smaller so my page contents, images, tables, text are moving. And my internet explorer is shutting down.
View 2 Replies
Jul 14, 2010
I am trying to use wizard in an update panel but the wizard is disappearing when I click for the next or prev step button. I only want to close wizard , when I click the finish button. How can I do this ?
View 1 Replies
Mar 22, 2010
I have a question for the navigation and I don't know how. For example when the users access the product page, on the top of the page it will display home > product, if the user access one product in the pens category, it will display home>product>pens.
View 6 Replies
Dec 4, 2010
I've been tasked with managing the re-write of a very large enterprise application's UI. The existing UI was built upon an infrastructure which leverages the EntLib 3's PageFlow application block and the Web Client Software Factory. It performs horribly - part of the reason we need this upgrade so badly.
The problem is that these pageflows are very complex, using extensive conditional page transitions. When editing a data form, selection of a single value can determine not only what page you will reach when you click "Next", but whether a sub-pageflow is entered upon navigation instead, or a new pageflow is opened in parallel, etc. We deploy our UI in such a way where we control our API, but we allow certain licenses to purchase our UI code and extend/modify it as they deem fit. One of our selling points is that we allow the customer to "configure" or redefine pageflows using the VS designer.
In transitioning to MVC2 (or 3), we'd like to continue to offer configurable, conditional navigation throughout our various data entry page sequences. However, although I have developed the beginnings of our app in MVC2, I'm not sure the best way of implementing this data-entry pageflow "conversion". Sure, I've had my resources produce some solid designs - but all of them seem to require implementation of a complex controllerfactory. But one of the main attractions of MVC2 for me was its lightweight codebase and resultant performance gains - and I'm afraid that bypassing portions of MVC2 functionality by writing custom factories and the like will drastically reduce the performance of the app, making our UI refresh virtually worthless.
My initial thought was to write a custom filter that would implement the OnActionExecuted method. Every controller's primary POST methods would be marked with this attribute. Upon execution it would evaluate what view the user was on and look up the navigation event for that view in configuration. This config would have a default "next page"/"previous page" mapping, and can also allow for defining a type which would use conditional logic to determine the next page based on the posted model data. The actionfilter would use this type to find what route to navigate to next. I'd like to pick you experts' brains on this - does this seem like a solid design? Is it using best practices? And will it indeed perform better than a controller factory, or am I completely off-base here?
View 3 Replies
Nov 12, 2010
I am making an online exam website where a user is taken to a page where there are multiple choice questions. I want to set it up so that once a user navigates to this exam page, he cannot navigate back. The only way he can get out of it is by clicking the submit button and then he cannot access that page again. The questions on the exam page are in an sql database. restricting the navigation of the page.
View 2 Replies
Nov 14, 2010
I am having a problem with my menu. My navigation menu gets created with data from different tables in a database. When the page loads after a few minutes the navigation menu disappears from page. Does anyone have had this problem or knows how to fix it?
View 3 Replies
Jan 12, 2010
I'm getting following error in Firefox while switching tab in the page Error: clientActiveTabChanged is not defined The following code I'm using in the master page
<cc1:TabContainer runat="server" ID="TabContainerMain" OnClientActiveTabChanged="clientActiveTabChanged">
<cc1:TabPanel runat="server" ID="TabPanelEmployee" Enabled="true" HeaderText="Employee">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanelEmployee" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="buttonEmployee" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" ID="TabPanelAdmin" Enabled="true" HeaderText="Admin"
Width="100%">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanelAdmin" runat="server" UpdateMode="Conditional">
<Triggers>..........................
View 7 Replies
May 18, 2010
Im using a masterpage with my site and I would like to use an extra navigation pane which slides out. I currently have it working using an Ajax collapsible panell extender. At the moment, the navigation panel is outside of the main contentplaceholder, although it works it isn;t what I need.I need the user to be able to click the expand image and the navigation pane to slide out over the content on the page
View 1 Replies
May 20, 2013
How to achieve the below using frames in asp.net?
[URL] ....
The menu in the navigation bar is static.
View 1 Replies
Feb 2, 2011
How can you perform page navigation with Jquery tabs without the ajax events firing? Following the tutorial, I added
$("#tabs").tabs({
select: function (event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if (url) {
location.href = url;
return false;
}
return true;
}
});
And I added hrefs to the tabs going to other pages. The problem is, I have ajax used on the page and onload it posts to the url with an ajax call. I was hoping to disable ajax altogether for the tabs and just use them for straight navigation so I can leverage the styles.
View 2 Replies
May 16, 2010
I'm trying to create an ASP.NET MVC master page so the site navigation on it will look like this:
Main Menu:Home | About | News
Sub Menu: Home_Page1 | Home_Page2
The Sub Menu section should always show sub-menu for the currently selected Main Menu page (on the example above 'Home' page is selected) unless a user hovers the mouse on another Main Menu item (then it shows that item's sub-menu instead).
View 2 Replies
Jan 15, 2010
Im building a navigation and want to display the current page (Default.aspx, OtherPage.aspx) the user is on with a class.Right now I just have a bunch of links as <a> tags.Here is a my menu:
[Code]....
As you can see the Default.aspx has the class active, but that is just something I put in.How do I do this dynamically?I know I can use Path.GetFileName(Request.FilePath) to get what page the user is on.
View 3 Replies
Mar 12, 2011
How can I maintain gridview page index while navigating away from the form and getting back by either the browser's back button or custom navigation button?
View 1 Replies
Jun 27, 2010
I've done my research about how will i save the selectednode in treeview and scrollbar state after page navigation but i can't find any solution. Is there a way or alternative way on how to do this?
View 6 Replies