分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

asp.net Core MVC + form validation + ajax form 笔记

发布时间:2023-09-06 01:16责任编辑:顾先生关键词:MVC

asp.net Core MVC 有特别处理form,controller可以自己处理model的验证,最大的优势是写form时可以少写代码

先了解tag helper ,这东西就是element上的attribute,在angular来说就是指令,通过指令可以很好的写代码

cshtml

@model Project.Web.Home.Product<form class="myForm" asp-controller="Home" asp-action="Form" method="post"> ???<!-- Input and Submit elements --> ???<label asp-for="name"></label> ???<input asp-for="name" class="form-control" /> ???<button type="submit">Submit</button> ???<span asp-validation-for="name"></span>????</form>

Controller

public class Product ???{ ???????[Required(ErrorMessage = "Required")]//可以验证 ???????[Display(Name = "Product Name")] ???????public string name { get; set; } ???}

编辑后的cshtml

<form class="myForm" method="post" action="/form" novalidate="novalidate"> ???<!-- Input and Submit elements --> ???<label for="name">Product Name</label> ???<input class="form-control" type="text" data-val="true" data-val-required="Required" id="name" name="name" value="keat">//先忽略keat ???<button type="submit">Submit</button> ???<span class="field-validation-valid" data-valmsg-for="name" data-valmsg-replace="true"></span>????</form>

  

通过以上的代码,结果可以看出tag helper大致上处理了一些代码,还需要最后的validation和 model binding

Controller

public class HomeController : Controller ???{ ???????[Route("")] //忽略 ???????[Route("{cnOrAmp:regex(^cn$|^amp$)}")]//忽略 ???????public IActionResult Index(string cnOrAmp = "en") ???????{ ???????????var vm = new HomeVm(); ???????????vm.product = new Product(); ???????????vm.product2 = new Product2();//忽略 ???????????vm.product.name = "keat"; ???????????vm.product2.name2 = "mark";//忽略 ???????????if (cnOrAmp == "amp") {//忽略 ???????????????return View("~/Web/Home/Amp/Index.cshtml",vm);//忽略 ???????????}//忽略 ???????????return View("~/Web/Home/Index.cshtml", vm); ???????}

这样就实现了model binding

最后就是主角了,validation。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"></script><script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script><script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>

  

就这样就有一个完整的form了,在asp.net Core MVC有个麻烦的问题,就是form不好管理,如果一个项目一个页面就只有一个form,那么没事发生,但是如果在多个页面重复那该怎么办,答案是ajaxing(MVC不支持)

介绍github 4000多个星星的plugin

https://github.com/jquery-form/form

<script> ???????// wait for the DOM to be loaded ???????$(document).ready(function () { ???????????// bind ‘myForm‘ and provide a simple callback function ???????????$(‘.myForm‘).ajaxForm({ ???????????????success: function (response, textStatus, xhr, form) { ???????????????????console.log("in ajaxForm success"); ???????????????????if (!response.length || response != ‘good‘) { ???????????????????????console.log("bad or empty response"); ???????????????????????return xhr.abort(); ???????????????????} ???????????????????console.log("All good. Do stuff"); ???????????????}, ???????????????error: function (xhr, textStatus, errorThrown) { ???????????????????console.log("in ajaxForm error"); ???????????????}, ???????????????complete: function (xhr, textStatus) { ???????????????????console.log("in ajaxForm complete"); ???????????????}, ???????????????beforeSend: function () { ???????????????????console.log("before send"); ???????????????} ???????????}); ???????}); ???</script>

对提交过程中处理不同的状况

以上

  

asp.net Core MVC + form validation + ajax form 笔记

原文地址:http://www.cnblogs.com/stooges/p/7648742.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved