Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/html-helpers/editors/dropdownlist/binding/razor-page.md

@@ -6,68 +6,86 @@ slug: htmlhelpers_dropdownlist_razorpage_aspnetcore
 position: 3
 ---
 
-# ASP.NET Core Razor DropDownList
-
+# DropDownList in Razor Pages 
 Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a `cshtml` file and a `cshtml.cs` file (by design, the two files have the same name). 
-
 You can seamlessly integrate the Telerik UI DropDownList for {{ site.framework }} in Razor Pages applications.
+This article describeshow to configure the DropDownList component in a Razor Pages scenario.
+For the complete project, refer to the [DropDownList in Razor Pages example](https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/DropDownList).
 
-This article describes how to configure the ASP.NET Core Razor DropDownList in a Razor Pages scenario.
-
-For the complete project, refer to the [DropDownList in Razor Pages example](https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/DropDownList/DropDownListCrudOps.cshtml).
-
+## Getting Started
 In order to set up the Razor DropDownList component bindings, you need to configure the `Read` method of its `DataSource` instance. The URL in this method should refer the name of the method in the PageModel. In this method, you can also pass additional parameters, such as filter string and antiforgery token (see `dataFunction`).
 
-```tab-HtmlHelper(csthml)        
-    @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
-    @Html.AntiForgeryToken()
-
-    @(Html.Kendo().DropDownList()
-            .Name("products")
-            .DataTextField("ShipName")
-            .DataValueField("ShipCity")
-            .HtmlAttributes(new { style = "width:300px;" })
-            .AutoBind(false)
-            .Filter(FilterType.Contains)      
-            .DataSource(ds => ds
-                .Custom()
-                .Transport(transport => transport
-                    .Read(read => read
-                        .Url("/DropDownList/DropDownListCrudOps?handler=Read").Data("dataFunction")
-                    ))
-                    .ServerFiltering(true)
+    ```tab-HtmlHelper(csthml)    
+    
+        @(Html.Kendo().DropDownList()
+                .Name("products")
+                .DataTextField("ShipName")
+                .DataValueField("ShipCity")
+                .HtmlAttributes(new { style = "width:300px;" })
+                .AutoBind(false)
+                .Filter(FilterType.Contains)      
+                .DataSource(ds => ds
+                    .Custom()
+                    .Transport(transport => transport
+                        .Read(read => read
+                            .Url("/DropDownList/DropDownListCrudOps?handler=Read").Data("dataFunction")
+                        ))
+                        .ServerFiltering(true)
                 )
-            )
-```
+        )
+    ```
 {% if site.core %}
-```TagHelper
-
-<kendo-dropdownlist name="products"
-                    datatextfield="ShipName"
-                    datavaluefield="ShipCity"
-                    auto-bind="false"
-                    filter="FilterType.Contains">
-    <datasource server-filtering="true">
-        <transport>
-            <read url="@Url("/DropDownList/DropDownListCrudOps?handler=Read")" data="dataFunction" />
-        </transport>
-    </datasource>
-</kendo-dropdownlist>
-```
+    ```TagHelper
+    
+        <kendo-dropdownlist name="products"
+                            datatextfield="ShipName"
+                            datavaluefield="ShipCity"
+                            auto-bind="false"
+                            filter="FilterType.Contains">
+            <datasource server-filtering="true">
+                <transport>
+                    <read url="@Url("/DropDownList/DropDownListCrudOps?handler=Read")" data="dataFunction" />
+                </transport>
+            </datasource>
+        </kendo-dropdownlist>
+    ```
 {% endif %}
-```script
-    <script>
-        function dataFunction() {
-            var value = $("#products").getKendoDropDownList().filterInput.val();
-            return {
-                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
-                filterValue: value
-            };
-        }   
-    </script>
-```
-```tab-PageModel(cshtml.cs)
-   public JsonResult OnGetRead(string filterValue)
+
+1. Add an `AntiForgeryToken` at the top of the page.
+
+    ```
+        @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+        @Html.AntiForgeryToken()
+    ```
+
+1. Send the `AntiForgeryToken` with the [Read, Create, Update, Destroy] request.
+
+    ```
+        <script>
+            function forgeryToken() {
+                return kendo.antiForgeryTokens();
+            }
+        </script>
+    ```
+
+    Additional parameters can also be supplied.
+
+    ```
+        <script>
+            function dataFunction() {
+                var value = $("#products").getKendoDropDownList().filterInput.val();
+                return {
+                    __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
+                    filterValue: value
+                };
+            }   
+        </script>
+    ```
+
+1. Within the `cshtml.cs` file, add a handler method for the Read operation that returns the dataset.
+
+    ```tab-PageModel(cshtml.cs)
+        public JsonResult OnGetRead(string filterValue)
         {
             if (filterValue != null)
             {
@@ -77,10 +95,13 @@ In order to set up the Razor DropDownList component bindings, you need to config
             }
             return new JsonResult(orders);
         }
-```
+    ```
 
 ## See Also
+* [Using Telerik UI for ASP.NET Core in Razor Pages](https://docs.telerik.com/aspnet-core/getting-started/razor-pages#using-telerik-ui-for-aspnet-core-in-razor-pages)
+* [Client-Side API of the DropDownList](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist)
+* [Server-Side HtmlHelper API of the DropDownList](/api/dropdownlist)
+* [Server-Side TagHelper API of the DropDownList](/api/taghelpers/dropdownlist)
+* [Knowledge Base Section](/knowledge-base)
 
-* [Razor Pages Support]({% slug razor_pages_integration_aspnetmvc6_aspnetmvc %})
-* [DataBinding Overview]({% slug htmlhelpers_dropdownlist_databinding_aspnetcore %})