|
| 1 | +--- |
| 2 | +title: Razor Page |
| 3 | +page_title: Razor Page |
| 4 | +description: "An example on how to configure the Telerik UI Toolbar HtmlHelper for {{ site.framework }} in a Razor Page." |
| 5 | +slug: htmlhelpers_toolbar_aspnetcore_razor_page |
| 6 | +--- |
| 7 | + |
| 8 | +# Razor Page |
| 9 | + |
| 10 | +This article demonstrates how to add the Telerik UI Toolbar HtmlHelper for {{ site.framework }} to a RazorPage. |
| 11 | + |
| 12 | +For the full project with RazorPages examples, visit our [GitHub repository](https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages). |
| 13 | + |
| 14 | +```tab-RazorPage(csthml) |
| 15 | + @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf |
| 16 | + @Html.AntiForgeryToken() |
| 17 | +
|
| 18 | + @(Html.Kendo().ToolBar() |
| 19 | + .Name("ToolBar") |
| 20 | + .Items(items => |
| 21 | + { |
| 22 | + items.Add().Type(CommandType.Button).Text("Button"); |
| 23 | + items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true); |
| 24 | + items.Add().Type(CommandType.SplitButton).Text("Insert").MenuButtons(menuButtons => |
| 25 | + { |
| 26 | + menuButtons.Add().Text("Insert above").Icon("insert-up"); |
| 27 | + menuButtons.Add().Text("Insert between").Icon("insert-middle"); |
| 28 | + menuButtons.Add().Text("Insert below").Icon("insert-down"); |
| 29 | + }); |
| 30 | + items.Add().Type(CommandType.Separator); |
| 31 | + items.Add().Template("<label for='dropdown'>Format:</label>"); |
| 32 | + items.Add().Template("<input id='dropdown' style='width: 150px;' />").Overflow(ShowInOverflowPopup.Never); |
| 33 | + items.Add().Type(CommandType.Separator); |
| 34 | + items.Add().Type(CommandType.ButtonGroup).Buttons(buttons => |
| 35 | + { |
| 36 | + buttons.Add().Text("Left").Togglable(true).Group("text-align").Icon("align-left"); |
| 37 | + buttons.Add().Text("Center").Togglable(true).Group("text-align").Icon("align-center"); |
| 38 | + buttons.Add().Text("Right").Togglable(true).Group("text-align").Icon("align-right"); |
| 39 | + }); |
| 40 | + items.Add().Type(CommandType.ButtonGroup).Buttons(buttons => |
| 41 | + { |
| 42 | + buttons.Add().Text("Bold").Togglable(true).Icon("bold"); |
| 43 | + buttons.Add().Text("Italic").Togglable(true).Icon("italic"); |
| 44 | + buttons.Add().Text("Underline").Togglable(true).Icon("underline"); |
| 45 | + }); |
| 46 | + items.Add().Type(CommandType.Button).Text("Action").Overflow(ShowInOverflowPopup.Always); |
| 47 | + items.Add().Type(CommandType.Button).Text("Another Action").Overflow(ShowInOverflowPopup.Always); |
| 48 | + items.Add().Type(CommandType.Button).Text("Something else here").Overflow(ShowInOverflowPopup.Always); |
| 49 | + }) |
| 50 | + ) |
| 51 | +
|
| 52 | + <script> |
| 53 | + $(document).ready(function () { |
| 54 | + $("#dropdown").kendoDropDownList({ |
| 55 | + optionLabel: "Paragraph", |
| 56 | + dataTextField: "text", |
| 57 | + dataValueField: "value", |
| 58 | + dataSource: [ |
| 59 | + { text: "Heading 1", value: 1 }, |
| 60 | + { text: "Heading 2", value: 2 }, |
| 61 | + { text: "Heading 3", value: 3 }, |
| 62 | + { text: "Title", value: 4 }, |
| 63 | + { text: "Subtitle", value: 5 }, |
| 64 | + ] |
| 65 | + }); |
| 66 | + }); |
| 67 | + </script> |
| 68 | + |
| 69 | +``` |
| 70 | +```tab-PageModel(cshtml.cs) |
| 71 | + |
| 72 | + public void OnGet() |
| 73 | + { |
| 74 | +
|
| 75 | + } |
| 76 | + |
| 77 | +``` |
0 commit comments