Как использовать мастер FuelUX в веб-формах ASP.net

Я новичок в веб-разработке и использую VS2013, ASP.net 4.5.1 WebForms и C#.

Я начал разрабатывать приложение и добился большого прогресса. Я хотел бы использовать элемент дизайна мастера и пытался использовать мастер FuelUX. Я столкнулся с этим при использовании темы начальной загрузки Ace – отзывчивый шаблон администратора.

Поскольку на моем сайте используются мастер-страницы, я добавил в тег ссылку на файл JavaScript FuelUX.wizard. Я не уверен, что это правильное или лучшее место.

Я также ссылаюсь на CSS с главной страницы сайта и доволен результирующим дизайном страниц контента, который обслуживается.

Моя проблема возникает, когда я пытаюсь выполнить какое-либо действие за кнопками «Далее» и «Предыдущий». Чего я хочу добиться, так это перейти к следующему этапу мастера, когда пользователь нажимает «Далее», и к предыдущему этапу, когда пользователь нажимает «Предыдущий». Я прочитал много подобных вопросов, но мне чего-то не хватает, потому что все, что я делаю, неправильно :-(

Вопросы:

1. Куда должна идти ссылка на FuelUX.wizard.js? как у меня это или указано в содержании страницы или что-то еще?
2. Как лучше всего использовать функцию, содержащуюся в файле JavaScript, — можно ли это сделать из исходного кода или это нужно делать со страницы с контентом?

Я надеюсь это имеет смысл. Всем спасибо

Site.Master — диспетчер сценариев

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