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:
- Where should the reference to the FuelUX.wizard.js go? as I have it or referenced in the content page or something else?
- 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>