javascript - 引导模式+ajax+jquery+验证+.net core 2.0-6ren

javascript - 引导模式+ajax+jquery+验证+.net core 2.0

转载作者：行者123 更新时间：2023-12-03 02:08:40

我正在尝试创建一个简单的电影数据库类型的应用程序，用于学习 bootstrap 和 mvc。我在.net core 2.0中使用了adminlte模板。仅使用 mvc 一切工作正常。但后来我想了解更多，所以我开始使用ajax和jquery来发送和接收数据。对于创建/编辑/，我使用了引导模式。我在这里遇到了主要问题。我可以从客户端验证。但我无法在服务器端验证期间显示错误消息。

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>@ViewData["Title"]</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="~/lib/Ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/lib/adminlte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="~/lib/adminlte/dist/css/skins/skin-blue.min.css">

    <link rel="stylesheet" href="~/css/site.min.css" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Google Font -->
    @*<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">*@

    <!-- jQuery 3 -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="~/lib/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="~/lib/fastclick/lib/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="~/lib/adminlte/dist/js/adminlte.min.js"></script>
    <script src="~/lib/PACE/pace.min.js"></script>
    <script src="~/js/site.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <!-- Site wrapper -->
    <div class="wrapper">

        <!-- Top Menubar -->
        @await Component.InvokeAsync("TopMenubar")

        <!-- Left side column. contains the sidebar -->
        @await Component.InvokeAsync("Sidebar")

        <!-- Content Wrapper. Contains page content -->

        <div class="content-wrapper">
            <section class="content-header">
                @await Component.InvokeAsync("ContentHeader")
                <br />
                @await Component.InvokeAsync("Alert")
            </section>

            <section class="content">
                @RenderBody()
            </section>
        </div>

        <!-- Footer -->
        @await Component.InvokeAsync("Footer")

    </div>
    <!-- ./wrapper -->
    @RenderSection("scripts", required: false)
    <script>

    </script>
    @*<script>
            $(document).ready(function () {
                $('.sidebar-menu').tree()
            })
        </script>*@
</body>
</html>

索引.cshtml

@model MovieDb.Models.CategoryType

@{
    ViewData["Title"] = "Category Type";
}

<link rel="stylesheet" href="~/lib/datatables.net-bs/css/dataTables.bootstrap.min.css" />
<script src="~/lib/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="~/lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="~/js/categoryType.js"></script>


<div class="panel">
    <div class="panel-body">
        <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#createNewEmergencyType"
                onclick="clearTextBox();"><i class="fa fa-plus"> Add New Category</i></button>
    </div>
</div>

<div class="box">
    <div class="box-body table-responsive">
        <table id="DgCategoryType" class="table table-bordered table-striped dataTable" role="grid">
            <thead>
                <tr>
                    <th>Name</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<div class="modal fade" id="createNewCategoryType" tabindex="-1" role="dialog"
     aria-labelledby="Add New Category" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">

             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">
                     &times;
                 </button>
                 <h4 class="modal-title">Add New Category</h4>
             </div>

             <div class="modal-body">
                 <form id="createCTForm">
                     @Html.AntiForgeryToken()

                     <div class="form-group">
                         <label asp-for="Name" class="control-label">Name:</label>
                         <input asp-for="Name" class="form-control" />
                         <span asp-validation-for="Name" class="text-danger"></span>
                     </div>

                 </form>
             </div>

             <div class="modal-footer">
                 <button type="button" class="btn btn-primary btn-fixed-width" id="btnAdd" onclick="return Add();">
                     Add
                 </button>
                 <button type="button" class="btn btn-default btn-fixed-width" data-dismiss="modal">
                     Close
                 </button>
             </div>
         </div>
     </div>

</div>

categoryType.js

$(document).ready(function(){
loadData();
});

function loadData(){
    $("#DgCategoryType").DataTable(

        {           
            "filter": true,
            "orderMulti": false,
            "ajax":
            {
                "url":"/CategoryTypes/LoadData",
                "type":"GET",
                "dataType":"JSON"
            },
            "columns":[
                {"data":"Name"},
                {   "data":"Id",
                    "render":function(data){
                        return "<a class='popup' href='/CategoryTypes/Edit/"+data+"'>Edit</a> | <a class='popup' href='/CategoryTypes/Delete/"+data+"'>Delete</a>";
                    }
                }
            ],
            "columnDefs":
            [
                {
                    "targets": [1],
                    "searchable": false
                },
                {"width":"10%","targets":[1]}
            ]
        }
    );
}

function Add(){

    /*var frm=document.getElementById("createCTForm");
    var data=toJSONString(frm);*/

    var data=$("#createCTForm").serialize();

    $.ajax({
        type:"POST",
        url:"CategoryTypes/Create",
        data:data,
        success:function(result){
            if(result.success)
            {
                $("#createNewCategoryType").modal("hide");
            }
        },
    });
}

function clearTextBox(){
    $("#Name").val("");
}

模型:CategoryType.cs

public class CategoryType
{
    public int Id { get; set; }
    [Required(ErrorMessage ="Category name required")]
    public string Name { get; set; }
}

CategoryTypesController.cs

public class CategoryTypesController : BaseController
    {
        private readonly ApplicationDbContext _context;

        public CategoryTypesController(ApplicationDbContext context)
        {
            _context = context;
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
                _context.Dispose();
            base.Dispose(disposing);
        }

        // GET: CategoryTypes
        public IActionResult Index()
        {
            AddPageHeader("Category Types");
            return View(new CategoryType());
        }

        //GET JSON data for loading the datatable
        public async Task<IActionResult> LoadData()
        {
            var data = await _context.CategoryTypes.ToListAsync();
            return Json(new { data } );
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,Name")] CategoryType categoryType)
        {
            if (ModelState.IsValid)
            {
                _context.Add(CategoryType);
                await _context.SaveChangesAsync();
                return Json(new { success=true });
            }
                return Json(new { success=false });
        }
    }

当我运行上面的代码时，它会将新类别添加到数据库中，但是如果我没有在模式输入框中输入名称，那么 Controller 将给出错误，但不会出现验证消息。

我做错了什么？

最佳答案

我最近也遇到了同样的问题。为了解决这个问题，我自己解决了这个问题，并创建了一个迷你库(如果你可以这样调用它)来验证输入。请从this JsFiddle获取代码。您可以在同一链接中找到一个工作示例。

注意:截至目前，它已经检查:必需、正则表达式、范围、等于。如果您需要帮助，您可以自行添加更多检查，或者评论，我会尽力提供帮助。

它是如何工作的:

1.在项目中创建一个js文件，并从fiddle链接粘贴js(最小代码由区域CustomValidationScript表示)。将此文件包含在您的 _layout.cshtml 中。

2.设置一些规则:

    var validationRules = [{ 
        ruleName: "elementId1ShoudBeRequired", // make sure this 
        name will be unique within your rules 
        ruleForElementId: "#elementId1",
        check: "required",
        comparerValue: true,
        message: "This input is required! Please make sure to input a value!"
    },
    {
        ruleName: "elementId3ShouldBePhoneNr",
        ruleForElementId: "#elementId2",
        check: "regex",
        comparerValue: /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/,
        message: "Please provide a valid phone number!"
    },
    {
        ruleName: "elementId4_ShouldBeEqualWith_5",
        ruleForElementId: "#elementId2",
        check: "equals",
        comparerValue: 5,
        message: "This input should be 5!"
    }
    ];
    var rangeRules = [{
        ruleName: "elementId2ShoudBeInRange",
        ruleForElementId: "#elementId2",
        check: "range",
        comparerValue: [1, 8],
        message: "Please provide a value between 1 and 8 !"
    }];

在您的 js 文件/脚本中，在 $(document).ready() 函数之外初始化验证器:

 var validator = new CustomValidation(validationRules);
 // you can pass the validation rules in the initialization, or send a empty array if you wish to add the rules later
 // var validator = new CustomValidation([]);

(可选步骤)添加或删除更多验证规则:

 // Add rules
 // you can add them by passing an array of rules
 validator.addcustomValidationRules(rangeRules);
 // or by passing one rule
 validator.addcustomValidationRule(
     {
         ruleName: addRule.ruleName,
         ruleForElementId: addRule.ruleForElementId,
         check: addRule.check,
         comparerValue: addRule.comparerValue,
         message: addRule.message
     }
 );
 // if the rule(s) already exist(s), an error will be thrown

 // Remove rules
 // you can also remove some rules by ruleName, or sending an array of rules
 // for example we can remove rangeRules entirely like : 
 validator.removeCustomValidationRules(rangeRules);
 // or we can remove individual rules by name like so: 
 validator.removeCustomValidationRule("elementId2ShoudBeInRange");

验证输入:

var 结果 = validator.validate(validator);//将返回一个像这样的对象:{ formIsvalid : true/false,validationResults: [ {elementId: elementId,message: message}] }

HTML 页面示例:

 <div class="container">
 <div class="form-group">
     <label>Input for elementId1 </label>
     <input id="elementId1" class="validate" />
     <span class="error_span col-md-12"></span>
 </div>
 <div class="form-group">
     <label>Input for elementId2 </label>
     <input id="elementId2" class="validate" />
     <span class="error_span"></span>
 </div>
 <button class="btn btn-outline-success" id="save">Save</button>
 </div>

 <script type="text/javascript">
 // you can validate the input inside listeners or inside whatever pieces of code

 // example onClick
 $("#save").on("click", function() {
     // the validation happerns here
     var result = validator.validate(validator);
     if (result.formIsValid) {
         // your code ...  
         // can be ajax call to send the form to the server
     }
     else {
         // clear error_spans that might have been fixed between clicks
         updateUi(result.validationResults, "form-group", "error_span");
     }
 });

 // example onKeyUp
 $(".validate").on("keyup", function() {
     var result = validator.validate(validator);
     updateUi(result.validationResults, "form-group", "error_span");
 });

 </script>

注意:updateUi(也可以在 JsFiddle 中找到)是一个自定义函数，用于更新错误范围以显示/隐藏。

就是这样!

我用 ajax 调用、select2、bootstrap 4 测试了它，它可以工作。

如果您发现有需要改进的地方，请随时发表评论。 (我不是 js 专家，所以可能会发现错误。)

祝你编码愉快!

关于javascript - 引导模式+ajax+jquery+验证+.net core 2.0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49678210/

文章推荐： javascript - 使用 JavaScript 从 Html 字符串获取文本

文章推荐： javascript - $http.get 之后 View 未更新

文章推荐： javascript - Jasmine + 异步函数

文章推荐： javascript - 修复自定义 Threejs 胶囊几何形状中的法线

ajax - Comet, Ajax Push, Reverse Ajax
有人有 Comet 应用程序 .net 的任何样本吗？我需要一个示例如何在服务器中保持客户端的连接？最佳答案这里也有一些不错的: http://www.frozenmountain.com/we
ajax - Yii2:ajax 提交表单上的 ajax 表单验证
我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。我正在处理一个促销代码输入表单，用户
ajax - Ajax 和 Jquery-Ajax 之间的区别
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
ajax - f :ajax and a4j:ajax? 和有什么区别吗
f:ajax 和 a4j:ajax 标记之间有什么显着差异吗？我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记，添加了一些 f:ajax 中未
ajax - 在 $.ajax() 中将数组传递给 ajax 请求
我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({
ajax - jQuery.ajax 和 $.ajax 是一样的吗？
在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ
ajax - Ajax 会降低性能吗？
过度使用 AJAX 会影响性能吗？在大型 Web 应用程序的上下文中，您如何处理 AJAX 请求以控制异步请求？最佳答案过度使用任何东西都会降低性能；在必要时使用 AJAX 将提高性能，特别是如果
ajax - 使用 Ext.Ajax.request 的跨域 Ajax
似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。这是我的代码: {
ajax - AJAX 调用后的渲染问题
我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先，如果我定义了一个从/test_redirect 到/x 的简单重定向，它会起作用。所以 Bottle redirect() 在简单的情
ajax - Ajax 库的比较
任何人都可以指出各种 AJAX 库的统一比较吗？我已经阅读了大约十几种不同的书，我即将开始一个项目，但我对自己是否已经探索了可能性的空间没有信心。请注意，我不是在要求“我认为 XXX 很棒”——我正
ajax - 哪些情况下不应使用 AJAX？
似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是，仅仅因为项目可以使用 AJAX，并不意味着它应该。可能是为了 UX，AJAX 向站点/
ajax - ajax 页面的永久链接最佳实践
假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在我希望地址栏始终包含当前(自定义) V
ajax - 我是否正确理解了 Ajax？
我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。因此，正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型，并将 HTTP 请求发送到服
ajax - AJAX 可以提交基本身份验证的凭据吗？
这可能有点牵强，但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出
ajax - AJAX 检查用户名功能的安全性
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this
ajax - Ajax 发布后重定向
我希望ajax post成功进入主页。由于某种原因，我一直做错事。知道我应该做什么来解决这个问题吗？ window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a
ajax - Jquery 在第一个 ajax 函数调用完全完成后继续另一个 ajax 函数
我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库，然后 func2 检索数据，所以我的问题是如何等到 func1 完全完成然后只执
ajax - AJAX 请求时禁用按钮
我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);
ajax - RAILS 6 Ajax 事件和 Ajax Spinner
我试图在每个 Ajax 请求上显示加载动画/微调器我的 application.js $(document).on("turbolinks:load", function() { window.
ajax - ajax settimeout刷新div
我正在显示使用jQplot监视数据的图形。为了刷新保存该图的div，我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。在服务器上，PHP脚本从数据库中检索数据。成功后，将在5

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 引导模式+ajax+jquery+验证+.net core 2.0