在asp路由中使用javascript变量(参数)

Question

我对C#、.Net Core和Razor Pages非常陌生。我正在尝试创建一个超级简单的应用程序，在那里你可以将你的名字和姓氏提交到一个表单，它会将你重定向到一个接受参数firstname和姓氏的模板，并将它们打印出来。

因此，我目前正在尝试将输入的值存储在脚本标记中(现在只尝试使用名字(，然后在提交表单时将变量添加到asp路由的名字中。但这似乎不起作用。这是尝试解决这个问题的正确方式吗？还是我应该在顶部的@{}字段中这样做？

在这种情况下，它只是将{foo}打印为字符串和硬编码的姓氏Browder。

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<h1 class="display-4">Welcome @Model.FirstName</h1>
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
<form method="post"  asp-page="/nametemplate" asp-route-firstname="{foo}" asp-route-surname="Browder">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<script>
let foo = document.querySelector("#fname").value;

</script>

提前感谢您无数次！

Answer 1

这是一个非常基本的入门示例，但我强烈建议您阅读文档。

从本质上讲，您希望查看模型绑定。您不需要按照您的示例使用JS。

Razor Pages文档

索引.cshtml

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<form method="post">
<input asp-for="Firstname" />
<input asp-for="Lastname" />
<input type="submit" value="Submit" />
</form>

索引.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Policy;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
namespace RazorPageTest.Pages
{
public class IndexModel : PageModel
{
public string Firstname { get; set; }
public string Lastname { get; set; }
private readonly ILogger<IndexModel> _logger;
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
public void OnGet()
{
}
public IActionResult OnPost(string firstname, string lastname)
{
return RedirectToPage("Display", new { firstname, lastname });
}

}
}

Display.cshtml.cs(新页面(

using Microsoft.AspNetCore.Mvc.RazorPages;
namespace RazorPageTest.Pages
{
public class DisplayModel : PageModel
{
public string Firstname { get; set; }
public string Lastname { get; set; }
public void OnGet(string firstname, string lastname)
{
Firstname = firstname;
Lastname = lastname;
}
}
}

显示.cshtml

@page
@model RazorPageTest.Pages.DisplayModel
@{
ViewData["Title"] = "Display";
}
<h1>@Model.Firstname @Model.Lastname</h1>