有没有办法在 ASP.NET 中从 C# 中运行一个 JavaScript 函数？

Question

我有一个登录表单，在提交时会根据数据库（使用 C#）检查用户名和密码以确认登录有效。对于表单验证，我使用 JavaScript，它只是检查以确保没有字段为空，并相应地更改元素的 class 以显示警告。如果数据库确认登录无效，我想显示这些相同的警告，我相信最简单的方法是运行最初显示验证的相同 JavaScript 方法在数据库中找不到登录信息后的警告。我现在的代码如下：

Login.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Stride.Pages
{
    [IgnoreAntiforgeryToken(Order = 1001)]
    public class Login : PageModel
    {
        public void OnPost(string user, string pass)
        {
            if (Database.Auth(user, pass))
            {
                Response.Redirect("Index");
            }
            //if not, show the validation alert

        }
    }
}

main.js

(function ($) {
    "use strict";

    //don't allow text to lower if there is text present

    $('.input100').each(function(){
        $(this).on('blur', function(){
            if($(this).val().trim() != "") {
                $(this).addClass('has-val');
            }
            else {
                $(this).removeClass('has-val');
            }
        })
    })

    //validate input

    var input = $('.validate-input .input100');

    $('.validate-form').on('submit',function(){
        var check = true;

        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }

        return check;
    });

    //if focused, hide validation notification

    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
            hideValidate(this);
        });
    });

    function validate (input) {
        return (!$(input).val().trim() == '');
    }

    function showValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).addClass('alert-validate');
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).removeClass('alert-validate');
    }

})(jQuery);

Login.cshtml

@page
@model Stride.Pages.Login

@{
    Layout = null;
}

<head>
    <title>Log in to your account</title>
    <link rel="shortcut icon" href="images/icons/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100">
            <form class="login100-form validate-form" method="post">
                <span class="login100-form-title" style="padding-bottom: 28px">
                    Welcome
                </span>
                <span class="login100-form-title" style="padding-bottom: 48px">
                    <i class="zmdi zmdi-font"></i>
                </span>

                <div class="wrap-input100 validate-input" data-validate="Check Username">
                    <input class="input100" type="text" name="user">
                    <span class="focus-input100" data-placeholder="Username"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="Check Password">
                    <input class="input100" type="password" name="pass">
                    <span class="focus-input100" data-placeholder="Password"></span>
                </div>

                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button class="login100-form-btn" type="submit">
                            Login
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="js/jquery/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
</body>

感谢任何帮助，或者如果有更好的方法来处理验证而不使用我没有接受的 JavaScript（即所有验证都使用 c#，我可以更改直接来自 c# 的元素 class) 让我知道。谢谢！

Answer 1

您现在不能运行直接从 C# 代码中获取 JS。您可以 post 使用 AJAX 的数据，将其设为 return 布尔值，然后加载新页面或根据需要显示验证错误。不过，我更愿意让登录全部发生在后端。

我会在 ViewData 中实现属性，类似于 ViewData["InvalidLogin"]。在您的登录操作中，如果验证失败，请将其设置为等于验证失败 class alert-validate。然后在视图中，将 @ViewData["InvalidLogin"] 添加到验证错误元素的 class 列表中。

// PageModel
public IActionResult OnPost(string user, string pass)
{
    if (Database.Auth(user, pass))
    {
        Response.Redirect("Index");
    }

    ViewData["InvalidLogin"] = "alert-validate";
    return Page();
}

// Razor Page
<div class="wrap-input100 validate-input @ViewData["InvalidLogin"]" data-validate="Check Username">

在初始加载时，这不会应用任何额外的 class。如果验证失败并且您将页面发送回浏览器，它只会添加额外的 class。

我发现你使用的是 Razor Pages，所以如果这里有任何更关注 MVC 的内容，我深表歉意。

有没有办法在 ASP.NET 中从 C# 中运行一个 JavaScript 函数？

Is there a way to run a JavaScript function from C# in ASP.NET?

javascript

c#

asp.net-mvc

razor

razor-pages

有没有办法在 ASP.NET 中从 C# 中 运行 一个 JavaScript 函数？

Is there a way to run a JavaScript function from C# in ASP.NET?

javascript

c#

asp.net-mvc

razor

razor-pages

有没有办法在 ASP.NET 中从 C# 中运行一个 JavaScript 函数？