chore(demos): add razor page examples (#25)
* chore(examples): add diagram example * chore(demos): create listbox razor page example * chore(demos): create timeline razor page example
This commit is contained in:
Tsvetomir Milchev
GitHub
Родитель
a35f46c5c3
Коммит
ed48f37829
|
|
@ -0,0 +1,14 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Models
|
||||
{
|
||||
public class OrgDiagramConnection
|
||||
{
|
||||
public long Id { get; set; }
|
||||
public long? FromShapeId { get; set; }
|
||||
public long? ToShapeId { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Models
|
||||
{
|
||||
public partial class OrgDiagramShape
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Color { get; set; }
|
||||
public string JobTitle { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Models
|
||||
{
|
||||
public class TimelineEventModel
|
||||
{
|
||||
public string Title { get; set; }
|
||||
public string Subtitle { get; set; }
|
||||
public string Description { get; set; }
|
||||
|
||||
public DateTime EventDate { get; set; }
|
||||
|
||||
public string AltField { get; set; }
|
||||
|
||||
public List<TimelineEventModelImage> Images { get; set; }
|
||||
public List<TimelineEventModelAction> Actions { get; set; }
|
||||
}
|
||||
|
||||
public class TimelineEventModelImage
|
||||
{
|
||||
public string src { get; set; }
|
||||
}
|
||||
public class TimelineEventModelAction
|
||||
{
|
||||
public string text { get; set; }
|
||||
public string url { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
@page
|
||||
@using Telerik.Examples.RazorPages.Models
|
||||
@model Telerik.Examples.RazorPages.Pages.Diagram.DiagramEditingModel
|
||||
|
||||
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
|
||||
@Html.AntiForgeryToken()
|
||||
|
||||
@(Html.Kendo().Diagram<OrgDiagramShape, OrgDiagramConnection>()
|
||||
.Name("diagram")
|
||||
.DataSource(d => d
|
||||
.ShapeDataSource()
|
||||
.Model(m =>
|
||||
{
|
||||
m.Id(s => s.Id);
|
||||
m.Field(s => s.Id).Editable(false);
|
||||
m.Field(s => s.JobTitle);
|
||||
m.Field(s => s.Color);
|
||||
})
|
||||
.Read(r => r.Url("/Diagram/DiagramEditing?handler=ReadShapes").Data("forgeryToken"))
|
||||
.Create(r => r.Url("/Diagram/DiagramEditing?handler=CreateShape").Data("forgeryToken"))
|
||||
.Destroy(r => r.Url("/Diagram/DiagramEditing?handler=DestroyShape").Data("forgeryToken"))
|
||||
.Update(r => r.Url("/Diagram/DiagramEditing?handler=UpdateShape").Data("forgeryToken"))
|
||||
)
|
||||
.ConnectionsDataSource(d => d
|
||||
.Model(m =>
|
||||
{
|
||||
m.Id(c => c.Id);
|
||||
m.Field(c => c.Id).Editable(false);
|
||||
m.From(c => c.FromShapeId);
|
||||
m.To(c => c.ToShapeId);
|
||||
})
|
||||
.Read(r => r.Url("/Diagram/DiagramEditing?handler=ReadConnections").Data("forgeryToken"))
|
||||
.Create(r => r.Url("/Diagram/DiagramEditing?handler=CreateConnection").Data("forgeryToken"))
|
||||
.Destroy(r => r.Url("/Diagram/DiagramEditing?handler=DestroyConnection").Data("forgeryToken"))
|
||||
.Update(r => r.Url("/Diagram/DiagramEditing?handler=UpdateConnection").Data("forgeryToken"))
|
||||
)
|
||||
.Events(e => e.DataBound("onDataBound"))
|
||||
.Layout(l => l
|
||||
.Type(DiagramLayoutType.Tree)
|
||||
.Subtype(DiagramLayoutSubtype.Tipover)
|
||||
.UnderneathHorizontalOffset(140)
|
||||
)
|
||||
.ShapeDefaults(sd => sd
|
||||
.Visual("visualTemplate")
|
||||
.Content(c => c
|
||||
.Template("#= dataItem.JobTitle #")
|
||||
.FontSize(17)
|
||||
)
|
||||
)
|
||||
.ConnectionDefaults(cd => cd
|
||||
.Stroke(s => s
|
||||
.Color("#586477")
|
||||
.Width(2)
|
||||
)
|
||||
)
|
||||
.HtmlAttributes(new { style = "height: 600px;" })
|
||||
)
|
||||
|
||||
<script>
|
||||
function forgeryToken() {
|
||||
return kendo.antiForgeryTokens();
|
||||
}
|
||||
|
||||
function visualTemplate(options) {
|
||||
var dataviz = kendo.dataviz;
|
||||
var g = new dataviz.diagram.Group();
|
||||
var dataItem = options.dataItem;
|
||||
|
||||
if (dataItem.JobTitle === "President") {
|
||||
g.append(new dataviz.diagram.Circle({
|
||||
radius: 60,
|
||||
stroke: {
|
||||
width: 2,
|
||||
color: dataItem.Color || "#586477"
|
||||
},
|
||||
fill: "#e8eff7"
|
||||
}));
|
||||
} else {
|
||||
g.append(new dataviz.diagram.Rectangle({
|
||||
width: 240,
|
||||
height: 67,
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
fill: "#e8eff7"
|
||||
}));
|
||||
|
||||
g.append(new dataviz.diagram.Rectangle({
|
||||
width: 8,
|
||||
height: 67,
|
||||
fill: dataItem.Color,
|
||||
stroke: {
|
||||
width: 0
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
return g;
|
||||
}
|
||||
|
||||
function onDataBound(e) {
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.bringIntoView(that.shapes);
|
||||
}, 0);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Kendo.Mvc.Extensions;
|
||||
using Kendo.Mvc.UI;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||
using Telerik.Examples.RazorPages.Models;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Pages.Diagram
|
||||
{
|
||||
public class DiagramEditingModel : PageModel
|
||||
{
|
||||
public static IList<OrgDiagramShape> DiagramShapes;
|
||||
public static IList<OrgDiagramConnection> DiagramConnections;
|
||||
public void OnGet()
|
||||
{
|
||||
if (DiagramConnections == null)
|
||||
{
|
||||
DiagramConnections = new List<OrgDiagramConnection>();
|
||||
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 1, FromShapeId = 1, ToShapeId = 2 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 2, FromShapeId = 1, ToShapeId = 3 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 3, FromShapeId = 1, ToShapeId = 4 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 4, FromShapeId = 2, ToShapeId = 5 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 5, FromShapeId = 2, ToShapeId = 6 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 6, FromShapeId = 3, ToShapeId = 7 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 7, FromShapeId = 3, ToShapeId = 8 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 8, FromShapeId = 4, ToShapeId = 9 });
|
||||
DiagramConnections.Add(new OrgDiagramConnection() { Id = 9, FromShapeId = 4, ToShapeId = 10 });
|
||||
}
|
||||
|
||||
if (DiagramShapes== null)
|
||||
{
|
||||
DiagramShapes = new List<OrgDiagramShape>();
|
||||
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 1, Color = "", JobTitle = "President" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 2, Color = "#3399cc", JobTitle = "VP Finance" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 3, Color = "#3399cc", JobTitle = "VP Customer Relations" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 4, Color = "#3399cc", JobTitle = "VP Human Resources" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 5, Color = "#ff9900", JobTitle = "Accountant" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 6, Color = "#ff9900", JobTitle = "Budget Analyst" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 7, Color = "#ff9900", JobTitle = "Relations Manager" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 8, Color = "#ff9900", JobTitle = "Technical Support Manager" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 9, Color = "#ff9900", JobTitle = "Compensation Manager" });
|
||||
DiagramShapes.Add(new OrgDiagramShape() { Id = 10, Color = "#ff9900", JobTitle = "Payroll Specialist" });
|
||||
}
|
||||
}
|
||||
|
||||
public JsonResult OnPostReadShapes([DataSourceRequest] DataSourceRequest request)
|
||||
{
|
||||
return new JsonResult(DiagramShapes.ToDataSourceResult(request));
|
||||
}
|
||||
|
||||
public JsonResult OnPostReadConnections([DataSourceRequest] DataSourceRequest request)
|
||||
{
|
||||
return new JsonResult(DiagramConnections.ToDataSourceResult(request));
|
||||
}
|
||||
|
||||
public JsonResult OnPostCreateConnection([DataSourceRequest] DataSourceRequest request, OrgDiagramConnection connection)
|
||||
{
|
||||
connection.Id = DiagramConnections.Count + 1;
|
||||
DiagramConnections.Add(connection);
|
||||
|
||||
return new JsonResult(new[] { connection }.ToDataSourceResult(request, ModelState));
|
||||
}
|
||||
|
||||
public JsonResult OnPostCreateShape([DataSourceRequest] DataSourceRequest request, OrgDiagramShape shape)
|
||||
{
|
||||
shape.Id = DiagramShapes.Count + 2;
|
||||
DiagramShapes.Add(shape);
|
||||
|
||||
return new JsonResult(new[] { shape }.ToDataSourceResult(request, ModelState));
|
||||
}
|
||||
|
||||
public JsonResult OnPostUpdateConnection([DataSourceRequest] DataSourceRequest request, OrgDiagramConnection connection)
|
||||
{
|
||||
DiagramConnections.Where(x => x.Id == connection.Id).Select(x => connection);
|
||||
|
||||
return new JsonResult(new[] { connection }.ToDataSourceResult(request, ModelState));
|
||||
}
|
||||
|
||||
public JsonResult OnPostUpdateShape([DataSourceRequest] DataSourceRequest request, OrgDiagramShape shape)
|
||||
{
|
||||
DiagramConnections.Where(x => x.Id == shape.Id).Select(x => shape);
|
||||
|
||||
return new JsonResult(new[] { shape }.ToDataSourceResult(request, ModelState));
|
||||
}
|
||||
|
||||
public JsonResult OnPostDestroyConnection([DataSourceRequest] DataSourceRequest request, OrgDiagramConnection connection)
|
||||
{
|
||||
DiagramConnections.Remove(DiagramConnections.FirstOrDefault(x => x.Id == connection.Id));
|
||||
|
||||
return new JsonResult(new[] { connection }.ToDataSourceResult(request, ModelState));
|
||||
}
|
||||
|
||||
public JsonResult OnPostDestroyShape([DataSourceRequest] DataSourceRequest request, OrgDiagramShape shape)
|
||||
{
|
||||
DiagramShapes.Remove(DiagramShapes.FirstOrDefault(x => x.Id == shape.Id));
|
||||
|
||||
return new JsonResult(new[] { shape }.ToDataSourceResult(request, ModelState));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
@page
|
||||
@model Telerik.Examples.RazorPages.Pages.ListBox.ListBoxBindingModel
|
||||
|
||||
<label for="optional" id="employees">Employees</label>
|
||||
<label for="selected">Developers</label>
|
||||
<br />
|
||||
|
||||
@(Html.Kendo().ListBox()
|
||||
.Name("optional")
|
||||
.Toolbar(toolbar =>
|
||||
{
|
||||
toolbar.Position(ListBoxToolbarPosition.Right);
|
||||
toolbar.Tools(tools => tools
|
||||
.MoveUp()
|
||||
.MoveDown()
|
||||
.TransferTo()
|
||||
.TransferFrom()
|
||||
.TransferAllTo()
|
||||
.TransferAllFrom()
|
||||
.Remove()
|
||||
);
|
||||
})
|
||||
.DataSource(ds=>ds.Read(r=>r.Url("/ListBox/ListBoxBinding?handler=ReadOptional")))
|
||||
.ConnectWith("selected")
|
||||
)
|
||||
@(Html.Kendo().ListBox()
|
||||
.Name("selected")
|
||||
.BindTo(new List<string>())
|
||||
.Selectable(ListBoxSelectable.Multiple)
|
||||
)
|
||||
|
||||
<style>
|
||||
label {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.k-listbox {
|
||||
width: 236px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.k-listbox:first-of-type {
|
||||
width: 270px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Pages.ListBox
|
||||
{
|
||||
public class ListBoxBindingModel : PageModel
|
||||
{
|
||||
public static IList<string> ListBoxItems;
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
if (ListBoxItems == null)
|
||||
{
|
||||
ListBoxItems = new List<string>();
|
||||
|
||||
ListBoxItems.Add("Steven White");
|
||||
ListBoxItems.Add("Nancy King");
|
||||
ListBoxItems.Add("Nancy Davolio");
|
||||
ListBoxItems.Add("Robert Davolio");
|
||||
ListBoxItems.Add("Michael Leverling");
|
||||
ListBoxItems.Add("Andrew Callahan");
|
||||
ListBoxItems.Add("Michael Suyama");
|
||||
}
|
||||
}
|
||||
|
||||
public JsonResult OnGetReadOptional()
|
||||
{
|
||||
return new JsonResult(ListBoxItems);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@page
|
||||
@model Telerik.Examples.RazorPages.Pages.Timeline.TimelineBindingModel
|
||||
@using Telerik.Examples.RazorPages.Models
|
||||
|
||||
@(Html.Kendo().Timeline<TimelineEventModel>()
|
||||
.Name("Timeline")
|
||||
.DataDateField("EventDate")
|
||||
.DataDescriptionField("Description")
|
||||
.DataSubtitleField("Subtitle")
|
||||
.DataTitleField("Title")
|
||||
.DataImagesField("Images")
|
||||
.DataActionsField("Actions")
|
||||
.Orientation(TimelineOrientation.Vertical)
|
||||
.AlternatingMode()
|
||||
.CollapsibleEvents()
|
||||
.DataSource(dt => dt.Read(r=>r.Url("/Timeline/TimelineBinding?handler=Events")))
|
||||
)
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.Mvc.RazorPages;
|
||||
using Telerik.Examples.RazorPages.Models;
|
||||
|
||||
namespace Telerik.Examples.RazorPages.Pages.Timeline
|
||||
{
|
||||
public class TimelineBindingModel : PageModel
|
||||
{
|
||||
public static IList<TimelineEventModel> Events;
|
||||
|
||||
public void OnGet()
|
||||
{
|
||||
if (Events == null)
|
||||
{
|
||||
Events = new List<TimelineEventModel>();
|
||||
|
||||
Events.Add(new TimelineEventModel()
|
||||
{
|
||||
Title = "Barcelona \u0026 Tenerife",
|
||||
Subtitle = "May 25, 2008",
|
||||
Description = "Barcelona is an excellent place to discover world-class arts and culture. Bullfighting was officially banned several years ago, but the city remains rich with festivals and events. The sights in Barcelona are second to none. Don’t miss the architectural wonder, Casa Mila—otherwise known as La Pedrera. It’s a modernist apartment building that looks like something out of an expressionist painting. Make your way up to the roof for more architectural surprises. And if you like Casa Mila, you’ll want to see another one of Antoni Gaudi’s architectural masterpieces, Casa Batllo, which is located at the center of Barcelona.\r\nTenerife, one of the nearby Canary Islands, is the perfect escape once you’ve had your fill of the city. In Los Gigantes, life revolves around the marina.",
|
||||
EventDate = new System.DateTime(2008, 5, 25),
|
||||
Images = new List<TimelineEventModelImage>() {
|
||||
new TimelineEventModelImage() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&height=500" }
|
||||
},
|
||||
Actions = new List<TimelineEventModelAction>() {
|
||||
new TimelineEventModelAction() { text = "More info about Barcelona", url="https://en.wikipedia.org/wiki/Barcelona" }
|
||||
}
|
||||
});
|
||||
|
||||
Events.Add(new TimelineEventModel()
|
||||
{
|
||||
Title = "United States East Coast Tour 1",
|
||||
Subtitle = "Feb 27, 2007",
|
||||
Description = "Touring the East Coast of the United States provides a massive range of entertainment and exploration. To take things in a somewhat chronological order, best to begin your trip in the north, checking out Boston’s Freedom Trail, Fenway Park, the Statue of Liberty, and Niagara Falls. Bring your raincoat to Niagara Falls, which straddles the boarder between Canada and the United States—the majestic sight might have you feeling misty in every sense of the word.",
|
||||
EventDate = new System.DateTime(2007, 2, 27),
|
||||
Images = new List<TimelineEventModelImage>() {
|
||||
new TimelineEventModelImage() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&height=500" }
|
||||
},
|
||||
Actions = new List<TimelineEventModelAction>() {
|
||||
new TimelineEventModelAction() { text = "More info about New York City", url="https://en.wikipedia.org/wiki/New_York_City" }
|
||||
}
|
||||
});
|
||||
|
||||
Events.Add(new TimelineEventModel()
|
||||
{
|
||||
Title = "Malta, a Country of Кnights",
|
||||
Subtitle = "Jun 15, 2008",
|
||||
Description = "Home of the oldest-known human structures in the world, the Maltese archipelago is best described as an open-air museum. Malta, the biggest of the seven Mediterranean islands, is the cultural center of the three largest—only three islands that are fully inhabited. If you’re into heavy metal—swords, armor and other medieval weaponry—you’ll love the Grandmaster’s Palace.",
|
||||
EventDate = new System.DateTime(2008, 6, 15),
|
||||
Images = new List<TimelineEventModelImage>() {
|
||||
new TimelineEventModelImage() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&height=500" }
|
||||
},
|
||||
Actions = new List<TimelineEventModelAction>() {
|
||||
new TimelineEventModelAction() { text = "More info about Malta", url="https://en.wikipedia.org/wiki/Malta" }
|
||||
}
|
||||
});
|
||||
|
||||
Events.Add(new TimelineEventModel()
|
||||
{
|
||||
Title = "Wonders of Italy",
|
||||
Subtitle = "Jul 6, 2008",
|
||||
Description = "The Italian Republic is a history lover’s paradise with thousands of museums, churches and archaeological sites dating back to Roman and Greek times. Visitors will also find a hub for fashion and culture unlike anywhere else in the world. Explore Ancient history in Rome at the Colosseum and Rome’s Ruins.",
|
||||
EventDate = new System.DateTime(2008, 7, 6),
|
||||
Images = new List<TimelineEventModelImage>() {
|
||||
new TimelineEventModelImage() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Italy/Basilica-di-San-Pietro-in-Vaticano2_Lilia-Karakoleva.jpg?width=500&height=500" }
|
||||
},
|
||||
Actions = new List<TimelineEventModelAction>() {
|
||||
new TimelineEventModelAction() { text = "More info about Rome", url="https://en.wikipedia.org/wiki/Rome" }
|
||||
}
|
||||
});
|
||||
|
||||
Events.Add(new TimelineEventModel()
|
||||
{
|
||||
Title = "The Best of Western Europe",
|
||||
Subtitle = "Aug 11, 2009",
|
||||
Description = "Tour the best of Western Europe and take in the sights of Munich, Frankfurt, Meinz, Bruxel, Amsterdam, and Vienna along the way. Discover the amazing world of plants at Frankfurt Palmengarten, the botanical gardens in Frankfurt.",
|
||||
EventDate = new System.DateTime(2009, 8, 11),
|
||||
Images = new List<TimelineEventModelImage>() {
|
||||
new TimelineEventModelImage() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Western-Europe/Austrian-Parliament,-Vienna,-Austria_Gergana-Prokopieva.JPG?width=500&height=500" }
|
||||
},
|
||||
Actions = new List<TimelineEventModelAction>() {
|
||||
new TimelineEventModelAction() { text = "More info about Munich", url="https://en.wikipedia.org/wiki/Munich" }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
public JsonResult OnGetEvents()
|
||||
{
|
||||
return new JsonResult(Events);
|
||||
}
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче