Skip to main content

Basic Tutorials

Tutorial Home

Switch to view by URL

Create and configure views

To make the views accessible through URL first follow the standard creation process...

  1. Create a new view using FAB on the views panel.
  2. In the view configuration enter a view name.
  3. Create and or select a template file.

Requirements
Resources

Specify the URL path

See example configuration on the image to the right/bottom:

The option Hidden in View Selection isn't relevant for this example.
Make sure to specify a key value pair to follow the query string conventions to make passing parameters easier.

For example you could set items/page as value for Name in URL Path. Using this example the view would be only accessible through the specified name.
To access the view regardless of the second parameter you can use the wildcard view1/.* as shown in the example. The wildcard can also become useful for specifying parameters which define the views content/behaviour as for example a detail view.

Screenshot from view configuration

Make URL pointing to view

For this tutorial we have set up two example views, see: View 1, View 2.
As seen in the example above we've made two views with the routes view1/.* and view2/.*.
To generate the URL we'll use Link.To(parameters: ...) which will build the url from the specified parameters.

Link to view1 https://kendev.co/2sxc-Apps/2sxc-Tutorial/view1/page

Link to view2 https://kendev.co/2sxc-Apps/2sxc-Tutorial/view2/hello


@{
  // Name of route view1 using query string conventions
  var view1Parameters = "view1=page";

  // Name of route view2 using query string conventions
  var view2Parameters = "view2=hello";
}

<p>Link to view1 <a target="blank" href="@Link.To(parameters: view1Parameters)">@Link.To(parameters: view1Parameters)</a></p>
<p>Link to view2 <a target="blank" href="@Link.To(parameters: view2Parameters)">@Link.To(parameters: view2Parameters)</a></p>

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->


@{
  // Name of route view1 using query string conventions
  var view1Parameters = "view1=page";

  // Name of route view2 using query string conventions
  var view2Parameters = "view2=hello";
}

<p>Link to view1 <a target="blank" href="@Link.To(parameters: view1Parameters)">@Link.To(parameters: view1Parameters)</a></p>
<p>Link to view2 <a target="blank" href="@Link.To(parameters: view2Parameters)">@Link.To(parameters: view2Parameters)</a></p>



<!-- unimportant stuff, hidden -->