如何在ASP.net Web表单中使用FuelUX向导

Question

I am very new to web development and using VS2013, ASP.net 4.5.1 WebForms and C#.

I have started developing an application and have made a lot of progress. I would like to use a wizard design element and have been trying FuelUX wizard . I came across this when using a bootstrap theme Ace - Responsive Admin Template .

As my site uses master pages I have added the reference to the FuelUX.wizard JavaScript file in the tag. I am not sure if this is the correct or best place.

I also reference the CSS from the sites master page and am happy with the resultant content pages design that is served up.

My problem comes when I try to put some action behind the next and previous buttons. What |I want to achieve is move to the next stage of the wizard when the use clicks 'Next' and the previous stage when the user clicks 'Prev'. I have read a lot of similar questions but I am missing something because whatever I am doing it is wrong :-(

Questions:

1. Where should the reference to the FuelUX.wizard.js go? as I have it or referenced in the content page or something else?
2. How is it best to consume a function contained in the JavaScript file - can this be done from code behind or does it need to be from the content page?

I hope this makes sense. Thanks everyone

Site.Master - ScriptManager

<asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
                <asp:ScriptReference Path="../Scripts/fuelux/fuelux.wizard.js" />

           </Scripts>

MyPage.aspx - partial Markup

<div id="my-wizard" data-target="#step-container">
    <ul class="wizard-steps">
        <li data-target="#step1" class="active">
            <span class="step">1</span>
            <span class="title">Some details</span>
        </li>
        <li data-target="#step2">
            <span class="step">2</span>
            <span class="title">Some more details</span>
        </li>
    </ul>
</div>
<div class="step-content pos-rel" id="step-container">
    <div class="step-pane active" id="step1">
        <h3 class="lighter block green">Enter the following information</h3>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Enter some details</h3>
            </div>
            <div class="panel-body">
                <div class="col-sm-12 form-group">
                    <label class=" control-label" for="aList">A List</label>
                    <select class="form-control" id="aList">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <div class="col-sm-12 form-group">
                    <label class=" control-label" for="something">Add Something</label>
                    <input class="form-control" id="something" type="text" placeholder="Enter Something">
                </div>
            </div>
        </div>

    </div>
   <div class="step-pane" id="step2">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Some more details</h3>
            </div>
            <div class="panel-body">
               <div class="col-sm-12 form-group">
                    <label class=" control-label" for="enterSomethingelse">Enter something else</label>
                    <input class="form-control" id="enterSomethingelse" type="text" placeholder="Enter something else here">
                </div>
           </div>
        </div>
    </div>
</div>
<div class="wizard-actions">
     <button class="btn btn-prev">
        <i class="ace-icon fa fa-arrow-left"></i>
        Prev
    </button>

    <button class="btn btn-success btn-next" data-last="Finish">
        Next
        <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
    </button>
</div>

Answer 1

I believe Ace is using Fuel UX 2. You can view the docs here .

I'm not familiar with ASP .net, but am familiar with Fuel UX Wizard. You will need to trigger "code behind" or the server side code from within a JavaScript event. There is a wizard change event that will trigger when the next or previous buttons are clicked. However if you are going to reload the page (which believe is how postbacks work). You will need to store and re-inititialize the wizard with the step you are wanting to show. Fuel UX was designed primarily for "single page apps" or web applications that don't reload pages.

You might look at something like this Make a service reference in an asp:ScriptManage

Answer 2

If you're trying to customize the previous and next actions of your wizard, I had to do the same thing recently. If you add a hidden field at the beginning of your wizard like so:

Its possible to create custom js functions that control the movement of the wizard better than the default ones given by Fuelux. What I did was a GoNext(index) and GoPrev(index) that did two things:

1. Changed the selected item of the wizard. Look into

$('#myWizard').wizard('selectedItem', { step: NewIndex});

2. Updated the hidden field to save the tab you're on through postbacks. document.getElementById('<%=stepState.ClientID%>').value = NewIndex;

Inside of each tab you would just have to call the appropriate function with the index value being that of the next tab, and you can place these function calls inside of regular ASP:Buttons as an OnClientClick.

Hope it helps.