有沒有辦法在 ASP.NET 中從 C# 運行 JavaScript 函數？

Question

我有一個登錄表單，在提交時，它會根據數據庫（使用 c#）檢查用戶名和密碼以確認登錄是否有效。 對於表單驗證，我使用 JavaScript，它只是檢查以確保沒有字段為空，並相應地更改元素類以顯示警告。 如果數據庫確認登錄無效，我想顯示這些相同的警告，我相信最簡單的方法是運行相同的 JavaScript 方法，該方法最初在未找到登錄信息后顯示驗證警告在數據庫中。 我目前的代碼如下：

登錄.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

        }
    }
}

主文件

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

登錄.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# 更改元素類）讓我知道。 謝謝！

Answer 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 Pages，如果這里有任何更專注於 MVC 的內容，我深表歉意。

有沒有辦法在 ASP.NET 中從 C# 運行 JavaScript 函數？

問題描述

1 個解決方案

解決方案1
1 已采納 2019-12-19 21:50:00

有沒有辦法在 ASP.NET 中從 C# 運行 JavaScript 函數？

問題描述

1 個解決方案

解決方案1 1 已采納 2019-12-19 21:50:00

解決方案1
1 已采納 2019-12-19 21:50:00