ASP .NET Core MVC Documentation
Getting Started
jqxScrollView represents a UI component with sliding views.Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.
jqxScrollView requires the following files:
CSS
jqx.base.css
Javascript
jqxcore.js
jqxbuttons.js
jqxscrollbar.js
jqxlistbox.js
jqxScrollView.js
To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.<script src="~/jqwidgets/jqxscrollview.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
@{
ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
.photo {
width: 600px;
height: 450px;
background-color: #000;background-position: center;background-repeat: no-repeat;}</style><jqx-scroll-view ><div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div></jqx-scroll-view>
To bind to an event of a UI Component, you can use<script src="~/jqwidgets/jqxscrollview.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
@{
ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
.photo {
width: 600px;
height: 450px;
background-color: #000;background-position: center;background-repeat: no-repeat;}</style><jqx-scroll-view instance="getInstance()"><div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div></jqx-scroll-view>@section scripts {<script type="text/javascript">function getInstance(instance) {instance["back"]();}</script>}
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxscrollview.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
@{
ViewData["Title"] = "ASP .NET MVC ScrollView Example";
}
<style type="text/css">
.photo {
width: 600px;
height: 450px;
background-color: #000;background-position: center;background-repeat: no-repeat;}</style><jqx-scroll-view on-page-changed="eventHandler()"><div><div class="photo" style="background-image: url(/images/imageNature1.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature2.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature3.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature4.jpg)"></div></div><div><div class="photo" style="background-image: url(/images/imageNature5.jpg)"></div></div></jqx-scroll-view>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}