getting-started-with-devextreme-drawer/ASP.NET Core/Views/Shared/_Layout.cshtml at 25.2.3+ · DevExpress-Examples/getting-started-with-devextreme-drawer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Getting Started with DevExtreme ASP.NET Core Form</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    @* Uncomment to use the HtmlEditor control *@
    @* <script src="https://unpkg.com/devextreme-quill/dist/dx-quill.min.js"></script> *@

    <link rel="stylesheet" href="~/css/vendor.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/Site.css" />
    <script src="~/js/vendor.js" asp-append-version="true"></script>
</head>

<body class="dx-viewport">
    @(Html.DevExtreme().Toolbar()
        .ID("layout-toolbar")
        .Items(items =>
        {
            items.Add().Widget(w => w.Button()
                .Icon("menu")
                .OnClick("button_clickHandler")
            ).Location(ToolbarItemLocation.Before);
        })
    )

    @(Html.DevExtreme().Drawer()
        .ID("layout-drawer")
        .MinSize(37)
        .Height("100%")
        .Opened(new JS("JSON.parse(sessionStorage.getItem('isDrawerOpen')) || true"))
        .RevealMode(DrawerRevealMode.Expand)
        .OpenedStateMode(DrawerOpenedStateMode.Overlap)
        .Template(@<text>
            @(Html.DevExtreme().List()
                .Width(200)
                .OnInitialized("list_onInitialized")
                .Items(items => {
                    items.Add().Text("Employee Form").Icon("user").Option("path", @Url.Action("Index"));
                    items.Add().Text("Inbox").Icon("message").Option("path", @Url.Action("Inbox"));
                    items.Add().Text("Sent Mail").Icon("check").Option("path", @Url.Action("Sent"));
                    items.Add().Text("Deleted").Icon("trash").Option("path", @Url.Action("Deleted"));
                    items.Add().Text("Spam").Icon("mention").Option("path", @Url.Action("Spam"));
                })
                .KeyExpr("path")
                .SelectionMode(ListSelectionMode.Single)
                .OnSelectionChanged("list_onSelectionChanged")
            )
        </text>)
        .Content(@<text>
            <div class="drawer-view-content">
                @RenderBody()
            </div>
        </text>)
    )

    <script type="text/javascript">
        function button_clickHandler() {
            const drawer = $("#layout-drawer").dxDrawer("instance");
            drawer.toggle();
            sessionStorage.setItem("isDrawerOpen", JSON.stringify(drawer.option("opened")));
        }

        function list_onSelectionChanged(e) {
            const drawer = $("#layout-drawer").dxDrawer("instance");
            drawer.hide();
            sessionStorage.setItem("isDrawerOpen", JSON.stringify(drawer.option("opened")));
            document.location.pathname = e.addedItems[0].path;
        }

        function list_onInitialized(e) {
            const currentPath = "@Url.Action()";
            e.component.option("selectedItemKeys", [currentPath]);
        }
    </script>
</body>

</html>