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:

Web Forms :: Hide All Wizard Navigation Buttons?

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

Web Forms :: Wizard Control Navigation Links

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

Web Forms :: How To Stop Wizard Control Next Step Navigation

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

Web Forms :: Wizard Control Navigation - Button For Options?

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

Dynamically Show / Hide Wizard Navigation Controls

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

Implement Dynamic Navigation System?

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

Web Forms :: Implement Wizard - Best Approach?

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

Web Forms :: How To Work With Navigation Menu And Assign Pages In Navigation Menu In Master Page

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

Implement The Live Chat - Support Type In Web Application?

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

Want To Create A Webpage Which Can Handle User Events Like Page Navigation And Page Close

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

Visual Studio :: Navigation To New Page Causes Change The Size Of Aspx Page?

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

AJAX :: Wizard In Update Panel - When Click Any Button The Wizard Disappearing

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

Breadcrumb Navigation On Page

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

MVC :: Dynamic Navigation Page In 2 Or 3

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

C# - Restrict A Page Navigation To One Control?

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

Web Forms :: Navigation Menu Disappears From Page

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

AJAX :: The Navigation Bar Disappears While Switching Tab In The Page

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

Web Forms :: Using A Slide Out Navigation Page With Masterpage?

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

Web Forms :: Page Navigation And Menu Using IFrame

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

Jquery UI Tabs - Perform Page Navigation Without Ajax?

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

C# - MVC Can Create Dynamic Navigation Sub-menu On The Master Page?

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

Web Forms :: Navigation Menu With Current Page Highlighted?

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

Maintain Gridview Page Index While Navigation From The Form?

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

How To Save The Selectednode In Treeview And Scrollbar State After Page Navigation

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







Copyrights 2005-15 www.BigResource.com, All rights reserved