How to send datetime with route in Blazor

blazor redirect to another page
blazor urihelper
blazor multiple route parameters
blazor pass parameter to page
blazor optional route parameter
blazor dynamic routing
blazor get current route
blazor optional parameter

Im trying to create a route for one of my Blazor webpages that sends a date time. According to the documentation its supported but I can't seem to get it to work correctly. Heres how I am doing it.

Where Im trying to go:

@page "/routeTest/{number:int}/{date:datetime}"

@code {       
    [Parameter] public int number { get; set; }
    [Parameter] public DateTime date { get; set; }
}

How I am attempting to navigate there

NavigationManager.NavigateTo("routeTest/"+numberToSend+"/"+dateToSend);

Its navigating me to

https://localhost:44383/routeTest/123/12/11/2019%204:36:26%20PM

Which while technically correct doesn't work and I'm fairly certain its the dateTime objects fault. How am I suppose to be able to correctly send a dateTime object?

The problem is that your in your language dates use the slash separator, which makes Blazor think you're trying to access a different route.

Whenever sending dates as a URL parameter they need to be in invariant culture and use dashes.

NavigationManager.NavigateTo("routeTest/"+numberToSend+"/"+dateToSend.ToString("yyyy-MM-dd HH:mm:ss", System.Globalization.CultureInfo.InvariantCulture));

For reference, see the warning in the official documentation

How do I pass DateTime value as the route in Blazor?, Learn how to route requests in apps and about the NavLink component. You can optionally specify a DefaultLayout parameter with a layout class to to a CLR type (such as int or DateTime) always use the invariant culture. The most typical configuration is to route all requests to a Razor page, which acts as the host for the server-side part of the Blazor Server app. By convention, the host page is usually named _Host.cshtml. The route specified in the host file is called a fallback route because it operates with a low priority in route matching. The fallback

This can solve your issue:

@code{
    int numberToSend = 123;
    string dateToSend = DateTime.Now.ToString("yyyy-MM-dd");

    private void Naviagte()
    {
        NavigationManager.NavigateTo("routeTest/" + numberToSend + "/" + dateToSend);
    }

}

ASP.NET Core Blazor routing, Blazor server app uses ASP.net Core Endpoint Routing. Using MapBlazorHub It enforces type matching between route parameter and route data. Current version of No, {enabled:bool}. datetime, Yes, {birthdate:datetime}� News Blazor Roundup From .NET Conf 2019 1 October 2019. Last week was .NET Conf and it marked the release of .NET Core 3 and Blazor Server! In this post, I give a roundup of all the Blazor news from .NET Conf 2019 as well as some cool content from the online event.

As you've identified, the DateTime in the URL is affecting the routing due to the slashes.

Send the DateTime in ISO8601 format yyyy-MM-ddTHH:mm:ss.

You could use:

dateToSend.ToString("s", System.Globalization.CultureInfo.InvariantCulture)

where the format specifier s is known as the Sortable date/time pattern

Or

dateToSend.ToString("yyyy-MM-dd HH:mm:ss", System.Globalization.CultureInfo.InvariantCulture)

Use InvariantCulture since the Blazor routing page states:

Route constraints that verify the URL and are converted to a CLR type (such as int or DateTime) always use the invariant culture. These constraints assume that the URL is non-localizable.

Routing In Blazor, To define a constraint for a parameter it is suffixed with a colon and then the DateTime. 2001-01-01; 02-29-2000. 29-02-2000. :decimal, System.Decimal. The Blazor DateTime Picker component allows the user to choose both a date and a time from a visual list in a dropdown, or to type it into a date input that can accept only DateTime values. You can control the format shown in the input and respond to events. To use a Telerik DateTime Picker for Blazor, add the TelerikDateTimePicker tag.

Constraining route parameters – Blazor University, Route parameters help in sending a parameter to the components while they Blazor supports the following route constrains – bool, datetime,� Blazor provides rich routing. Blazor server app uses ASP.net Core Endpoint Routing. It provides almost all features including route parameters, route constraints. It also provides a built-in component like NavLink that helps to generate menu items. It provides built-in services that help us to navigate from one component to another component.

Explained : Routing in Blazor, Routing. Blazor comes with a router out of the box, similar to other SPA Currently it takes an AppAssembly parameter which is the assembly for the Blazor application. bool; datetime; decimal; double; float; guid; int; long� Today Jeff looks into some of the issues in the .volunteer scheduling application and works on making data entry for date and time fields easier with Blazor Web Assembly code -- Watch live at

Blazor Bites - Routing, And the user has to call DateTime. NET Core Blazor & MVC 5.0 Send a GET request to an endpoint with a UTC time string such as [Route("[controller]")] public class TimeController : Controller { public IActionResult� Pass Route Parameters between Blazor Pages January 23, 2020 October 21, 2019 by Bradley Wells In this tutorial, you will learn how to pass data as a route parameter from a Blazor component on one page to a component on another page.