Question

我是Web开发和使用VS2013，ASP.net 4.5.1 WebForms和C＃的新手。

我已经开始开发应用程序并取得了很多进展。我想使用向导设计元素，并一直在尝试FuelUX wizard。我在使用引导主题Ace - Responsive Admin Template时遇到过这种情况。

由于我的网站使用母版页，我在标签中添加了对FuelUX.wizard JavaScript文件的引用。我不确定这是不是正确或最好的地方。

我还从网站母版页中引用了CSS，并对提供的结果内容页面设计感到满意。

当我尝试在下一个和上一个按钮后面放置一些动作时，我的问题出现了。当用户单击“下一步”时，我想要实现的是移动到向导的下一个阶段;当用户单击“上一个”时，前进到上一个阶段。我已经阅读了很多类似的问题，但我遗漏了一些东西，因为无论我做什么都是错的： - （

问题：

对FuelUX.wizard.js的引用应该去哪里？正如我在内容页面或其他内容中所提到或引用的那样？
如何最好地使用JavaScript文件中包含的函数 - 可以这样做从代码后面完成，还是需要来自内容页面？

我希望这是有道理的。谢谢大家

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 - 部分标记

<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

我相信Ace正在使用Fuel UX 2.你可以view the docs here。

我不熟悉ASP .net，但熟悉Fuel UX向导。您需要在JavaScript事件中触发“代码隐藏”或服务器端代码。有一个向导change事件将在单击下一个或上一个按钮时触发。但是，如果您要重新加载页面（相信回发的工作原理）。您需要使用要显示的步骤存储并重新初始化向导。 Fuel UX主要设计用于“单页应用程序”或不重新加载页面的Web应用程序。

您可能会看到类似Make a service reference in an asp:ScriptManage

的内容

Answer 2

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

可以创建自定义js函数来控制向导的移动，而不是Fuelux给出的默认值。我做的是做了两件事的GoNext（索引）和GoPrev（索引）：

更改了向导的所选项目。查看

$（＆＃39;＃myWizard＆＃39;）。向导（＆＃39; selectedItem＆＃39;，{step：NewIndex}）;

更新了隐藏字段，以便通过回发保存您的标签。 document.getElementById（＆＃39;＆lt;％= stepState.ClientID％＆gt;＆＃39;）。value = NewIndex;

在每个选项卡的内部，您只需调用适当的函数，其索引值是下一个选项卡的索引值，您可以将这些函数调用放在常规ASP：按钮中作为OnClientClick。

希望它有所帮助。

如何在ASP.net webforms中使用FuelUX向导

2 个答案: