Hello, world!
Welcome to your new app. 这是一个短页，但它包含了一些有趣的东西。这是一种传统剃须刀页面，这是很好地使用在C#世界，但与一些BLazor添加。如果您从未使用过Razor，您仍然可以很容易地理解它，因为它是一种典型的模板语言，与HTML混合使用。 选路 这，这个，那，那个@page指令用于配置路由。这意味着当主根目录(/)请求。还可以使用普通的ASP.NET路由参数，如下面的示例所示。 @page “/{name}” 此页面将URL中指定的值赋值给变量name。注意，目前不支持可选元素。因此，要支持带有可选参数的路由，您必须添加到页面指令中，一个带有可选参数，另一个没有。 // in normal ASP.NET you would write “/{name?}” for an optional parameter @page “/” @page “/{name}” 元素 这个页面的第二个有趣之处是最后一行，SurveyPrompt元素。它看起来和行为都像一个普通的HTML元素，但显然不是。实际上，它是BLazor所称的组件，它是在SurveyPrompt.cshtml页下的Shared文件夹。在BLazor中，任何页面都使用相同的名称定义相应的组件。@functions {
[Parameter]
string Title { get; set; } // Demonstrates how a parent component can supply parameters
}
在第3行中，我们看到了显示变量的语法。Title在HTMLUI中。这是标准的Razor语法。新的特定于BLazor的部分在末尾，其中functions指令。在这里，我们可以使用标准C#向页面添加功能。注意，Title属性，我们在索引页中使用了它，它在这个函数部分中被配置为一个参数。这是用[Parameter]注释
通航
最后，让我们看看BLazor应用程序的标准模板，页面NavMenu.cshtml.
- 这是一个菜单项的示例，该菜单项使用NavLink 组件，它基本上是一个添加css类的简单元素。active当元素被选中时。让我们进行一些清理，并从标准模板中删除一些我们不打算使用的内容。我们添加这个元素并删除已经存在的元素。然后删除相应的页面并添加一个名为Calendar.cshtml。所以，我们的页面现在应该是这样的。
创建我们的应用程序
在我们的应用程序中，我们希望在几个不同的日历中显示相同日期的页面。@page “/”
@page “/calendar”
我们将页面与默认路由和路由日历相关联。这一点很有用：在启动应用程序时，您将看到在更改页面时会发生什么。当访问其中一个页面时，底层数据将保持不变。因此，它们不是两个不同的页面，而是一个页面的同一个实例，而是一个对应于两个不同地址的实例。@page “/”
@page “/calendar”Date in Different Calendars
Select a date
Convert Date[..][..]Julian Calendar
@calendarDate.JulianDate
UI分为两部分：第一部分包含输入，第二部分以不同的日历显示用户提供的相同数据。第9行中的输入绑定到变量。date，同时，作为占位符，我们使用字段DateTime.Now。在第11行，我们使用标准的HTML语法将一个函数绑定到Click操作。这基本上就像它是一个JavaScript函数一样。
我们显示日历的部分在这里只显示了一部分，因为这是相当重复的。存储库中的最终版本包含三个行，每个行有三个日历，总共有九个日历。每个日历看起来都像这里显示的那样：一张卡片(卡片是一个引导元素)，显示日历的名称和日期本身。日期是我们创建的自定义类的字段。
@functions {
string date = DateTime.Today.ToString(“yyyy-MM-dd”);
CalendarDate calendarDate = new CalendarDate();
void ConvertDate()
{
if (!string.IsNullOrWhiteSpace(date))
{
calendarDate.StringDate = date;
}
}
}
包含functions指令没有任何意外：我们在UI中设置了我们需要的变量和函数。只需选择一个带有输入元素的日期，然后单击按钮，就可以在日历中显示的日期中转换输入日期。这是在C#中实现的动态行为，这正是我们所需要的。但那CalendarDate班级，等级C#宪兵级
这是一个我们可以创建的类：首先，我们需要添加一个新的根级C#文件，名为CalendarDate.cs.using System;
using System.Globalization;
using System.Text;
public class CalendarDate
{
private String stringDate = DateTime.Now.ToString();
public String StringDate {
get {
return stringDate;
}
set {
stringDate = value;
Date = DateTime.Parse(stringDate);
}
}
public DateTime Date { get; set; } = DateTime.Now;
private string GetDateForCalendar(Calendar cal)
{
if(Date > cal.MinSupportedDateTime && Date < cal.MaxSupportedDateTime)
return $”{cal.GetDayOfMonth(Date):d2}/{cal.GetMonth(Date):d2}/{cal.GetYear(Date):d4}”;
else
return “Invalid Date”;
}
public string JulianDate
{
get {
Calendar cal = new JulianCalendar();
return GetDateForCalendar(cal);
}
}
[..]
}
这是简单的C#代码，没有什么特别之处。当我们将一个值赋值给StringDate字段中，我们还自动将相应的值赋值给Date场。基本上，输入是String，但我们需要将其转换为DateTime变量。在第17行中，我们将默认值赋值给Date字段，以便最初的日历显示有效日期。这，这个，那，那个GetDateForCalendar如果选定的日期对该日历有效(第21行)，则确保将其转换为在指定日历中保存该日期表示的字符串(第22行)。如果日期无效，则返回一个字符串来表示该日期。这是必要的，因为并非所有日历都可以处理所有日期，有时是日历本身的问题，有时是.NET实现的问题，或者是我们不处理电子逆向拍卖的概念这一事实。
Image title
在我们在文件中添加了一些css之后www-root/css/site.css(未显示)，我们可以用dotnet run。最后的结果很好。
Image title
看看这个动态行为，没有任何JavaScript的暗示。
那么，我们能完全抛弃JavaScript吗？嗯，不完全是。您可能希望继续使用JavaScript来操作DOM。尽管在了解如何与JavaScript交互之前，让我们看看BLazor中的一些问题。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
