Razor Page

This article shows how to perform CRUD operations with the ScrollView component in Razor Pages.

To set up the ScrollView component bindings, you need to configure the Create, Read, Update, Delete methods of its DataSource instance. The URLs in these methods must refer to the method names in the PageModel.```

See the implementation details in the sample below. A complete project with Razor Pages examples is available in this ASP.NET Core Examples repository.

@page
@model Telerik.Examples.RazorPages.Pages.ScrollView.ScrollViewBindingModel

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

<h1>ScrollView Binding</h1>
<div id="example" style="margin:auto; width:60%">
    @(Html.Kendo().ScrollView()
                .Name("scrollView")
                .EnablePager(false)
                .ContentHeight("100%")
                .TemplateId("scrollview-template")
                .DataSource(d =>
                        d.Ajax()
                          .Read(r => r.Url("/ScrollView/ScrollViewBinding?handler=ReadOptional").Data("forgeryToken")).PageSize(3))

    .HtmlAttributes(new { style = "height:500px; width:890px; max-width: 100%;" })
    )
</div>

<script id="scrollview-template" type="text/x-kendo-template">
    <div class="img-wrapper">

        # for (var i = 0; i < data.length; i++) { #
        <div>
    <div ><img style="width: 140px; height: 140px;" src="@Url.Content("~/Images/ScrollViewImages/")#:data[i].ImageUrl# " /></div>
            <p>#= data[i].ProductName #</p>
        </div>

        # } #

    </div>
</script>

<script>

    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }

</script>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

 public static List<Product> ScrollViewItems { get; set; }
        public void OnGet()
        {
            if (ScrollViewItems == null)
            {
                ScrollViewItems = new List<Product>();

                ScrollViewItems.Add(new Product { ImageUrl = "image1.jpg", ProductName = "Chai" });
                ScrollViewItems.Add(new Product { ImageUrl = "image2.jpg", ProductName = "Chang" });
                ScrollViewItems.Add(new Product { ImageUrl = "image3.jpg", ProductName = "Aniseed Syrup" });
                ScrollViewItems.Add(new Product { ImageUrl = "image4.jpg", ProductName = "Ikura" });
                ScrollViewItems.Add(new Product { ImageUrl = "image5.jpg", ProductName = "Tofu" });
                ScrollViewItems.Add(new Product { ImageUrl = "image6.jpg", ProductName = "Konbu" });
                ScrollViewItems.Add(new Product { ImageUrl = "image7.jpg", ProductName = "Pavlova" });
                ScrollViewItems.Add(new Product { ImageUrl = "image8.jpg", ProductName = "Cloud" });
                ScrollViewItems.Add(new Product { ImageUrl = "image9.jpg", ProductName = "Sun" });
            }
        }

        public JsonResult OnPostReadOptional([DataSourceRequest] DataSourceRequest request)
        {
            return new JsonResult(ScrollViewItems.ToDataSourceResult(request));
        }

• Server-Side API