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

【问题标题】：Is there a way to run a JavaScript function from C# in ASP.NET?有没有办法在 ASP.NET 中从 C# 运行 JavaScript 函数？
【发布时间】：2020-04-12 11:23:48
【问题描述】：

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

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);

@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# 更改元素类）让我知道。谢谢！

【问题讨论】：

如果登录无效让服务器返回401未授权。
您可能想用 javascript 进行 ajax 调用并让服务器返回结果，然后 javascript 可以用它做任何事情。或者，您始终可以考虑在您的项目中使用 Blazor，它可以使用 JsInterop 从 c# 调用 javascript，但是转换您的项目可能需要付出大量努力。

标签： javascript c# asp.net-mvc razor razor-pages

【解决方案1】：

到目前为止，您不能直接从 C# 代码运行 JS。您可以使用 AJAX 发布数据，让它返回一个布尔值，然后根据需要加载新页面或显示验证错误。不过，我更愿意让所有登录都发生在后端。

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

// 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">

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

我意识到你正在使用 Razor 页面，所以如果这里有任何更关注 MVC 的地方，我深表歉意。

【讨论】：