0

私は Web 開発に非常に慣れておらず、VS2013、ASP.net 4.5.1 WebForms、および C# を使用しています。

私はアプリケーションの開発を開始し、多くの進歩を遂げました。ウィザードのデザイン要素を使用したいと考えており、FuelUX wizardを試しています。ブートストラップ テーマのAce - Responsive Admin Templateを使用しているときに、これに遭遇しました。

私のサイトではマスター ページを使用しているため、FuelUX.wizard JavaScript ファイルへの参照をタグに追加しました。ここが正しい場所なのか、それとも最適な場所なのかわかりません。

また、サイトのマスター ページから CSS を参照し、結果として提供されるコンテンツ ページのデザインに満足しています。

私の問題は、次のボタンと前のボタンの背後に何らかのアクションを配置しようとしたときに発生します。|達成したいことは、ユーザーが「次へ」をクリックするとウィザードの次の段階に移動し、ユーザーが「前へ」をクリックすると前の段階に移動することです。私は多くの同様の質問を読みましたが、私がしていることは何でも間違っているので、何かが欠けています:-(

質問:

  1. FuelUX.wizard.js への参照はどこに行けばよいですか? 私はそれを持っているか、コンテンツページなどで参照していますか?
  2. 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>
4

2 に答える 2

0

Ace は Fuel UX 2 を使用していると思います。ここでドキュメントを参照できます。

ASP .net には慣れていませんが、Fuel UX Wizard には慣れています。JavaScript イベント内から「分離コード」またはサーバー側コードをトリガーする必要があります。change次または前のボタンがクリックされたときにトリガーされるウィザードイベントがあります。ただし、ページをリロードする場合 (ポストバックの仕組みと考えられます)。表示したいステップでウィザードを保存して再初期化する必要があります。Fuel UX は、主に「シングル ページ アプリ」またはページをリロードしない Web アプリケーション向けに設計されました。

このようなものを見るかもしれませんasp:ScriptManage でサービス参照を作成します

于 2014-08-30T13:46:25.733 に答える
0

ウィザードの前後のアクションをカスタマイズしようとしている場合は、最近同じことをしなければなりませんでした。ウィザードの最初に隠しフィールドを追加すると、次のようになります。

Fuelux によって提供されるデフォルトのものよりも優れたウィザードの動きを制御するカスタム js 関数を作成することが可能です。私がしたことは、次の 2 つのことを行う GoNext(index) と GoPrev(index) でした。

  1. ウィザードの選択項目を変更しました。調べる

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

  1. 非表示フィールドを更新して、ポストバックを通じて現在のタブを保存します。document.getElementById('<%=stepState.ClientID%>').value = NewIndex;

各タブ内では、次のタブのインデックス値を使用して適切な関数を呼び出すだけでよく、これらの関数呼び出しを通常の ASP:Buttons 内に OnClientClick として配置できます。

それが役に立てば幸い。

于 2015-07-13T13:31:35.050 に答える