在asp-route（参数）中使用javascript变量？答案

【问题标题】：using a javascript variable in asp-route (parameter)?在asp-route（参数）中使用javascript变量？
【发布时间】：2020-11-16 05:32:53
【问题描述】：

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

所以我正在做的是我目前正在尝试将输入的值（现在只尝试使用名字）存储在脚本标签中，然后在你的时候在 asp-route-firstname 中添加变量提交表格。但这似乎不起作用。这甚至是尝试解决此问题的正确方法，还是我应该以某种方式在顶部的 @{} 字段中执行此操作？

在这种情况下，它只是将 {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://docs.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>

提前一百万次感谢您！

【问题讨论】：

标签： c# .net-core razor-pages

【解决方案1】：

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

基本上你想看看模型绑定。您不需要按照您的示例使用 JS。

Razor Pages Docs

索引.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.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>

【讨论】：