ASP.NET Core Blazor [Preview]
Search results

Getting Started for ASP.NET Core Razor Splitter in Visual Studio 2019

The section explains step-by-step process to create a Splitter in ASP.NET Core Razor with building and publishing using Visual Studio 2019.

Setup the application

Follow the steps, which is given in the Getting started page to setup the application and render the ASP.NET Core Razor components.

Initialize the ASP.NET Core Razor Splitter component

Initialize the Essential JS 2 Splitter component in any web page (razor) in the Pages folder. For example, the Splitter component is added in the ~/Pages/Index.razor page.

The following code explains how to initialize a simple horizontal Splitter in ASP.NET Razor page.

@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.Layouts

<div class="control-section">
    <div class="control_wrapper">
        <div id="pane-heading">Horizontal Splitter</div>
        <EjsSplitter id="splitter1" height="110px" width="100%" separatorSize="4">
            <SplitterPanes>
                <SplitterPane Content="<div class='content'><div>Left pane<div id='panetext'>size: 25%</div><div id='panetext'>min: 60px</div></div></div>" size="25%" min="60px"></SplitterPane>
                <SplitterPane Content="<div class='content'><span>Middle pane<div id='panetext'>size: 50%</div><div id='panetext'>min: 60px</div></span></div>" size="50%" min="60px"></SplitterPane>
                <SplitterPane Content="<div class='content'><span>Right pane<div id='panetext'>size: 25%</div><div id='panetext'>min: 60px</div></span></div>" size="25%" min="60px"></SplitterPane>
            </SplitterPanes>
        </EjsSplitter>
    </div>
</div>

Render Vertical Splitter

The following code explains how to initialize a simple vertical Splitter in ASP.NET Razor page.

@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.Layouts

<div class="control-section">
    <div class="control_wrapper">
        <div id="pane-heading">Vertical Splitter</div>
        <EjsSplitter id="splitter2" height="240px" width="100%" orientation="@Orientation.Vertical" separatorSize="4">
            <SplitterPanes>
                <SplitterPane Content="<div class='content'><span>Top pane<div id='panetext'>size: 30%</div><div id='panetext'>min: 60px</div></span></div>" size="25%" min="60px"></SplitterPane>
                <SplitterPane Content="<div class='content'><span>Middle pane<div id='panetext'>size: 45%</div><div id='panetext'>min: 60px</div></span></div>" size="50%" min="60px"></SplitterPane>
                <SplitterPane Content="<div class='content'><span>Bottom pane<div id='panetext'>size: 25%</div><div id='panetext'>min: 60px</div></span></div>" size="25%" min="60px"></SplitterPane>
            </SplitterPanes>
        </EjsSplitter>
    </div>
</div>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

splitter Sample