Blogs

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

How to Create an ASP.NET Wizard Interface in ASP.NET MVC & WebForms

     

Check out this slick Code Central example on how to create a Wizard interface in ASP.NET using DevExpress ASP.NET controls. First, here's a glimpse of what it looks like:

DevExpress ASP.NET Wizard

Pretty cool, huh? And it works for both ASP.NET MVC and WebForms! Check out the Code Central solutions here:

How's it work?

This wizard interface is a great example because it uses several of the controls from the DXperience ASP.NET subscription:

  • ASPxPageControl, ASPxPopupControl, ASPxMenu (part of ASPxperience)
  • ASPxCheckBox, ASPxLabel, ASPxTextBox, ASPxDateEdit, ASPxComboBox, ASPxButton, ASPxValidationSummary (part of ASPxEditors)

At the heart of the sample, the ASPxPageControl controls the views before the end-user can move forward to the next view. And the DevExpress ASP.NET editors will ensure validation before the end-user can move forward.

AJAX Callbacks FTW!

DevExpress ASP.NET controls have AJAX callbacks built-in so there is no whole-page refresh. And the client-side API makes it seamless to do things like show the popup control. For example, here's the code for the final "Finish" button that displays the popup with the information entered on the previous views/screens:

function OnFinishClick(s, e) {
    if (ASPxClientEdit.ValidateGroup('groupTabContact')) {
        var str = '<b>Personal Info:</b><br />' + txtFirstName.GetValue() + '<br />' + txtLastName.GetValue() + '<hr />';
        str += '<b>Date Info:</b><br />' + getShortDate(deAnyDate.GetValue().toString()) + '<br />' + cbStates.GetValue() + '<hr />';
        str += '<b>Contact Info:</b><br />' + txtEmail.GetValue() + '<br />' + txtZipcode.GetValue() + '<hr />';
        popupControl.SetContentHtml(str);
        popupControl.ShowAtElement(pageControl.GetMainElement());
    }
}

Try out the wizard samples for ASP.NET MVC and WebForms today and then incorporate them into your ASP.NET websites. Thanks!

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

Comments

 

Luke Grews said:

Great Mehul...

How about ASP.NET Wizard control in 12.1 while at it... :-)

Like Winforms equivalent.

Regards,

Luke

April 24, 2012 5:21 PM
 

Mehul Harry (DevExpress) said:

Thanks for the feedback Luke. :)

I'll consider it for a future release.

April 24, 2012 5:43 PM
 

Christopher Todd said:

I submitted one a long time ago. www.devexpress.com/.../ViewIssue.aspx

April 25, 2012 12:43 PM
 

James Zhong said:

Thanks! Hope it will be available soon!

May 1, 2012 11:19 PM
 

VALTER LAUREANO JR said:

I'd like to do a Previous button, but without the fields validations. Can someone help me?

April 4, 2013 1:00 PM
 

Mehul Harry (DevExpress) said:

Hi Valter,

Please contact our support team and they can possibly help you:

www.devexpress.com/.../CreateIssue.aspx

April 4, 2013 1:07 PM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
More from DevExpress
Live Chat
Have a pre-sales question?
Need assistance with your evaluation?
We are here to help.
Chat is one of the many ways you can contact members of the DevExpress Team. We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.
If you need additional product information, require pre-sales assistance, or want help with your order, write to us at info@devexpress.com or call us at
+1 (818) 844-3383.