Razor pages jQuery函数验证问题

基础概念

Razor Pages 是 ASP.NET Core 的一个特性，它允许开发者使用 Razor 语法创建动态网页。jQuery 是一个流行的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。

类型

客户端验证: 使用 jQuery 在客户端进行表单验证，提高用户体验。
服务器端验证: 使用 Razor Pages 在服务器端进行表单验证，确保数据的安全性和完整性。

应用场景

在 Web 应用程序中，通常会结合使用 Razor Pages 和 jQuery 进行表单验证。客户端验证可以即时反馈给用户输入是否有效，而服务器端验证则确保数据在提交到服务器后仍然有效。

常见问题及解决方案

问题: jQuery 函数验证不生效

原因: 可能是因为 jQuery 库没有正确加载，或者验证脚本在 DOM 元素加载完成之前执行。

解决方案:

确保 jQuery 库已正确引入到项目中。
使用 $(document).ready() 确保 DOM 完全加载后再执行验证脚本。

<!DOCTYPE html>
<html>
<head>
    <title>Razor Pages jQuery Validation</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 验证逻辑
            $('form').on('submit', function(e) {
                e.preventDefault();
                if ($('#inputField').val() === '') {
                    alert('输入不能为空');
                } else {
                    this.submit();
                }
            });
        });
    </script>
</head>
<body>
    <form method="post">
        <input type="text" id="inputField" name="inputField" />
        <button type="submit">提交</button>
    </form>
</body>
</html>

问题: 服务器端验证失败

原因: 可能是因为服务器端验证逻辑有误，或者数据没有正确绑定到模型。

解决方案:

检查服务器端验证逻辑是否正确。
确保表单数据正确绑定到模型。

public class InputModel
{
    [Required(ErrorMessage = "输入不能为空")]
    public string InputField { get; set; }
}

public class IndexModel : PageModel
{
    public InputModel Input { get; set; }

    public void OnPost()
    {
        if (ModelState.IsValid)
        {
            // 处理有效数据
        }
        else
        {
            // 处理无效数据
        }
    }
}

参考链接

通过以上信息，你应该能够解决 Razor Pages 结合 jQuery 进行表单验证时遇到的大部分问题。如果还有其他具体问题，可以进一步提问。

Razor pages jQuery函数验证问题

、、

这个下拉列表从一个jQuery函数中获取它的值(字符串)，如下所示： @section Scripts { { } } 我的问题是，在我提交表单后，ModelState.IsValid检查总是失败。经过研究，我发现原因在我的jQuery函数中，因为添加的值没有经过<e

浏览 47提问于2021-05-11得票数 0

回答已采纳

1回答

从Razor调用Javascript/Jquery？

当我还在使用Razor和JQuery的时候，我想知道是否可以从你的内联razor脚本中调用你的Javascript或JQuery函数？我在尝试实现依赖于剃刀级验证的负载微调工具时遇到了这个问题。

浏览 0提问于2011-09-13得票数 0

回答已采纳

2回答

自定义错误页忽略它的OnGet处理程序

、、

</p>页通常以下列方式注册：当应用程序重定向到错误页时，它会停止在页面构造函数和页面视图中的断点上，但忽略OnGet中的代码Portal.Pages.Pages_Error.ExecuteAsync()第4行Microsoft.AspNetCore.Mvc.RazorPages.dll!UPD 2 这看起来像身份验证问题。当对用户进行身份验证时，一切都按预期

浏览 0提问于2019-09-16得票数 0

回答已采纳

1回答

在HTML Helpers中使用jQuery

、、、

相反，我想了解如何创建一个HTML Helper来呈现为我喜欢的基于jQuery的网格(DataTables.net)。有没有人发布了在新的HTML Helper中使用的jQuery插件的示例？

浏览 0提问于2010-12-22得票数 3

回答已采纳

1回答

VisualStudioCommunity2019 16.5.3 ->添加->新项目-> Razor组件->路由或组件未呈现

、、、、

我有个很奇怪的问题。在Pages文件夹中向应用程序添加了一个新的Todo组件。在Visual中，右键单击Pages文件夹并选择Add > New > Razor组件.将组件的文件命名为Todo.razor。在其他开发环境中，向名为Todo.razor的Pages文件夹中添加一个空白文件。是这样做的：这将创建一个如下所示的文件： @code {

浏览 1提问于2020-04-09得票数 1

回答已采纳

1回答

Entity Framework Core添加视图和引用脚本库选项

、、

我正在Visual Studio2017中开发一个Asp.Net MVC核心应用程序，它使用实体框架核心来执行控制器和视图的搭建。在Add View对话框中，有一个"Reference Script Libraries“选项，默认情况下处于签入状态。谢谢你，大卫·柯维

浏览 0提问于2017-03-17得票数 1

1回答

ASP.NET网页(Razor)中的验证被否决了吗？

、、、、

我试着在剃须刀中使用验证，但是当我尝试使用这一行时视频工作室告诉我：‘ 谢谢!&l

浏览 0提问于2014-07-17得票数 6

回答已采纳

2回答

我正在尝试对Razor视图中的字段使用自定义JQuery验证，但我不知道如何将该字段与JQuery函数相关联，我使用过JQuery，但使用了html页面和表单，而不是使用Razor视图中的HtmlHelpers--这是我想要验证的字段(我在同一页中引用了需要引用的JQuery .js ) @Html.EditorFor(model => model.Name, new { htmlAttributes= new { @cla

浏览 1提问于2016-06-08得票数 1

回答已采纳

1回答

ASP.NET剃刀页面-客户端验证

、、

在ASP.NET网页(或Razor pages)中，使用Razor视图引擎的新框架支持客户端验证，或者是严格的服务器端开箱即用验证。当然，还有其他框架可以处理这一点，但我严格地说的是框架中的内容。

浏览 0提问于2011-07-29得票数 0

回答已采纳

1回答

页面模型中的Ajax帖子找不到方法

、、

我真的看不出有什么问题。

浏览 14提问于2021-05-11得票数 0

1回答

不明显的验证不起作用

、、、、

我喜欢在MVC中使用的特性之一是不引人注目的客户端验证。但在这种情况下，我似乎无法让它发挥作用。验证在服务器端工作，但在客户端不工作。通过检查标记，我注意到没有生成属性。从NuGet：添加然后创建一个模型并添加验证。Culture=neutral, P

浏览 3提问于2014-01-31得票数 1

回答已采纳

5回答

Asp.Net核心Razor页面的远程验证

、

我正在开发一个使用Razor Pages和Code First的web应用程序。我知道，在ASP.NET MVC中，您可以使用Remote上面的一个属性，该属性指的是控制器中的一个动作，该操作可以验证数据，而不需要回发整个页面。但是它似乎在Razor页面中不起作用，因为在ASP.NET核心Razor页面中没有控制器和动作。那么，如何在Razor页面中完成远程验证呢？

浏览 0提问于2019-01-14得票数 4

回答已采纳

1回答

身份验证不会因为web.config文件而进行认证

、、

我的ASP.NET web应用程序有这个问题，当我尝试创建我的登录时，它不会对用户进行身份验证。我已经指出我的问题在我的web.config文件中： <section name="pages" type="Sy

浏览 1提问于2014-12-23得票数 0

回答已采纳

1回答

如何在提交表单时保留ReturnUrl查询参数

我对Razor Pages使用基于cookie的身份验证。当用户在浏览器中没有身份验证cookie并试图访问带有https://localhost:8080/admin/protected的剃刀页面时，默认情况下，aspnet核心框架重定向到在CookieAuthenticationOptions问题是，我不知道这是如何工作的，因为如果我的/login razor页面提交了一个表单(例如，它提交了用户名和密码)，ReturnUrl参数就会

浏览 39提问于2020-06-17得票数 1

1回答

MVC WebGrid，行选择

、、

我有简单的WebGrid和item：我想要在实际单击行时进行选择，而不仅仅是该行中的“选择”项。有可能吗？

浏览 0提问于2013-03-05得票数 1

回答已采纳

1回答

如何使用Javascript在Razor Pages中运行后台程序

、、、

我已经使用asp.net核心剃刀页面创建了一个web应用程序。这是按钮的代码： <input type="submit" value="Complete" class="btn btn-success btn-block" style="Width:100%" onclick="CompleteProcess(@ProcessListReturn.DetailID)" id="ProcessCompBtn-@Pro

浏览 0提问于2021-03-19得票数 0

2回答

Blazor -在不同布局之间使用级联身份验证状态

、、、

第一个被命名为"_TestPage.cshtml“，另一个被命名为"Index.razor”。body { } </head>Index.razor当我没有使用Visual Studio创建的默认"MainLayout“组件，并且使用@layout指令覆盖了剃刀页面中的布局时，我是否需要做一些不同的事情才

浏览 0提问于2020-04-07得票数 1

1回答

为什么元素上的load()、on()、bind()等不可用

、、、

我最近从WPF转到了Razor Pages(单页应用程序，而不是MVC Razor视图)，我无法访问元素上的函数。然而，当我调用load (或'on'，或'bind')函数时，我得到： TypeError: element.load is not a function 我也尝试过： element.on("loadhandler=DisplayTimePartial"); 为了进行测试，我将函数体替换为：

浏览 10提问于2019-05-14得票数 0

回答已采纳

1回答

在一个项目中使用ASP.NET MVC和Razor导航

、、

我有一个菜单系统，它调用ASP.NET MVC控制器没有任何问题。我想从相同的菜单结构调用Razor pages。系统使用默认的Razor导航，因此默认为/Views/etc.如何切换到ASP.NET页面的/Pages/etc？./Pages or ../Pages or ~/pagesreturn Redire

浏览 1提问于2019-10-28得票数 0

1回答