0

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>
4

2 回答 2

0

我相信 Ace 正在使用 Fuel UX 2。您可以在此处查看文档

我不熟悉 ASP .net,但熟悉 Fuel UX Wizard。您将需要从 JavaScript 事件中触发“代码隐藏”或服务器端代码。change单击下一个或上一个按钮时会触发一个向导事件。但是,如果您要重新加载页面(这就是回发的工作方式)。您将需要存储并使用要显示的步骤重新初始化向导。Fuel UX 主要是为“单页应用程序”或不重新加载页面的 Web 应用程序设计的。

您可能会看到类似这样的内容 Make a service reference in an asp:ScriptManage

于 2014-08-30T13:46:25.733 回答
0

如果您尝试自定义向导的上一个和下一个操作,我最近不得不做同样的事情。如果您在向导的开头添加一个隐藏字段,如下所示:

它可以创建自定义的 js 函数来更好地控制向导的移动,而不是 Fuelux 提供的默认函数。我所做的是做两件事的 GoNext(index) 和 GoPrev(index):

  1. 更改了向导的选定项目。调查

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

  1. 更新了隐藏字段以通过回发保存您所在的选项卡。document.getElementById('<%=stepState.ClientID%>').value = NewIndex;

在每个选项卡中,您只需调用适当的函数,索引值就是下一个选项卡的索引值,您可以将这些函数调用作为 OnClientClick 放置在常规 ASP:Buttons 中。

希望能帮助到你。

于 2015-07-13T13:31:35.050 回答