asp.net 返回页面但留下输入

wfveoks0  于 2023-04-08  发布在  .NET
关注(0)|答案(1)|浏览(139)

我正在创建一个简单的登录表单。单击按钮后,将触发此函数:

public async Task<IActionResult> OnPostButton_Login(IFormCollection data)
{
    var emailAddress = Request.Form["emailaddress"];     
    var pass = Request.Form["password"];

    if (String.IsNullOrEmpty(emailAddress)) return Page();
    if (String.IsNullOrEmpty(pass)) return Page();

    await GetUser(emailAddress , pass);

    return Page();
}

如果用户没有在电子邮件或密码下键入任何内容,页面将重新加载-但也会清除所有输入。
我怎样才能从这个函数返回而不改变任何东西(并且只返回一个alert?)

wmtdaxz3

wmtdaxz31#

我怎样才能从这个函数返回而不改变任何东西(并且只返回一个alert?)
[BindProperty]属性添加到要重新加载到返回页面中的属性。

[BindProperty]
public string emailaddress { get; set; }

[BindProperty]
public string password { get; set; }

使用ModelState.AddModelError方法向返回的页面添加一个字符串alert/message。

ModelState.AddModelError(string.Empty, "My message: Please provide an email address.");

下面是使用您的代码的登录页面的简化版本:
Login.cshtml.cs

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApplication1.Areas.Identity.Pages.Account
{
    public class LoginModel : PageModel
    {
    [BindProperty]
    public string emailaddress { get; set; }

    [BindProperty]
    public string password { get; set; }

        public async Task OnGetAsync(string returnUrl = null)
        {
            await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
        }

        public async Task<IActionResult> OnPostButton_Login(IFormCollection data)
        {
            string emailAddress = Request.Form["emailaddress"].ToString();
            string pass = Request.Form["password"].ToString();

            if (String.IsNullOrEmpty(emailAddress))
            {
                ModelState.AddModelError(string.Empty, "My message: Please provide an email address.");
                return Page();
            }
            if (String.IsNullOrEmpty(pass))
            {
                ModelState.AddModelError(string.Empty, "My message: Please provide a password.");
                return Page();
            }

            await GetUser(emailAddress, pass);

            return Page();
        }

        private Task GetUser(string emailAddress, string pass)
        {
            throw new NotImplementedException();
        }
    }
}

Login.cshtml

@page
@model LoginModel
@{
    ViewData["Title"] = "Log in";
}
<h1>@ViewData["Title"]</h1>
<div class="col-md-4">
    <section>
        <form id="account" method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-floating">
                <input asp-for="emailaddress" class="form-control" autocomplete="username" aria-required="true" />
                <label asp-for="emailaddress" class="form-label"></label>
                <span asp-validation-for="emailaddress" class="text-danger"></span>
            </div>
            <div class="form-floating">
                <input asp-for="password" class="form-control" autocomplete="current-password" aria-required="true" />
                <label asp-for="password" class="form-label"></label>
                <span asp-validation-for="password" class="text-danger"></span>
            </div>
            <div>
                <input type="submit" value="Submit" asp-page-handler="Button_Login" />
            </div>
        </form>
    </section>
</div>

提交过程的替代手动控制

下面是Razor页面中post方法可以返回的full list。您可以通过客户端上的JavaScript并使用fetch API来控制提交过程。
您可以发布到OnPostButton_Login,然后返回一个内容结果(例如,return Content("This is a message.");fetch方法的Promise回调。在这个过程中,您的页面不会重新加载,只是发布表单中的输入值。下面是控制提交过程的SO post。

相关问题