翼度科技»论坛 编程开发 .net 查看内容

Taurus.MVC WebMVC 入门开发教程5:表单提交与数据验证

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
前言:

在本篇 Taurus.MVC WebMVC 入门开发教程的第五篇文章中,我们将学习如何处理表单提交和进行数据验证。
这是 Web 开发中非常重要的一部分,因为它涉及到用户输入数据的处理和有效性验证。
我们将继续使用 Taurus.Mvc 命名空间,并探讨如何在控制器中接收表单数据、进行数据验证并给出相应的响应。
步骤1:创建视图

首先,我们需要创建一个包含表单的视图。
在视图文件(例如 create.html)中,我们可以使用 HTML 表单元素来接收用户输入的数据。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>创建用户</title>
  5. </head>
  6. <body>
  7.     <h1>创建用户</h1>
  8.     <form method="post">
  9.         <label for="name">姓名:</label>
  10.         <input type="text" name="name" id="name" required>
  11.         <br>
  12.         <label for="age">年龄:</label>
  13.         <input type="number" name="age" id="age" required>
  14.         <br>
  15.         <input type="submit" value="提交" name="<strong>btnAddUser</strong>"><br>        printMsg</strong>">
  16.     </form>
  17. </body>
  18. </html>
复制代码
在上述代码中,我们创建了一个简单的表单,包含一个文本输入框和一个数字输入框,用于接收用户的姓名和年龄。
表单的 method 属性被设置为 post,默认将数据提交到当前页面。
同时给按钮起了个名称"btnAddUser",事件按钮,对应控制器的方法。
步骤2:更新控制器

接下来,我们需要在控制器中创建一个方法来处理表单提交。
我们继续沿用上文使用到的 HomeController.cs 文件,并在其中添加一个名为 Create 的方法,用来呈现显示页面内容。
同时添加 BtnAddUser 方法【和按钮同名,不区分大小写】来处理按钮事件。
  1. public class HomeController : Taurus.Mvc.Controller
  2. {
  3.     public void Index()
  4.     {
  5.         ...
  6.     }
  7.     public void Create() { }
  8.     public void BtnAddUser(string name, int age)
  9.     {
  10.         View.Set("printMsg", name + " - " + age);
  11.     }
  12. }
复制代码
在 HomeController 类中,定义和 Create.html 同名的方法,用来显示该表单界面。
同时添加 BtnAddUser 方法,来处理按钮点击事件。
上述代码中的 BtnAddUser 方法可以指定接收 表单 对象作为参数,其中包含了表单提交的数据。
我们也可以通过 Query("name") 和 Query("age") 来获取相应的用户输入值。
上述示例代码中,最后通过:View.Set 方法,可以将数据呈现在指定(ID=“printMsg”)的 Html 标签中。
步骤3:进行数据验证

在表单提交后,我们通常需要对用户输入的数据进行验证,以确保其有效性。
在上述代码的中,我们将参数表单的接收参数,定义到方法参数中,同时指定了数据类型。
对于表单参数较少时:

将表单参数放到方法参数中,可以简化代码,同时利用框架的的数据类型转换,进行有效转换。
对于参数较多时:

您可以通过定义实体Model,并将它定义到方法参数中,例如:
  1.     public void BtnAddUser(User user)
  2.     {
  3.         View.Set("printMsg", user.name + " - " + user.age);
  4.     }
复制代码
当然我们也可以不定义任何方法参数,通过 Query(Name) 方法来获取相应的用户输入值。
  1.     public void BtnAddUser()
  2.     {
  3.         View.Set("printMsg", Query<String>("name") + " - " + Query<int>("age"));
  4.     }
复制代码
接下来,您需要自行添加数据验证的逻辑,以保证程序的稳定输出。
例如,您可以使用条件语句、正则表达式或其他验证方式来检查用户输入的数据是否符合要求。
如果数据验证失败,您可以返回一个视图,向用户显示错误信息并要求重新输入。
如果数据验证成功,您可以执行其他操作(例如保存到数据库)并重定向用户到另一个页面。
步骤4:运行应用程序

最后,运行应用程序并访问 /Home/Create 路由,您将看到一个表单页面。
尝试提交表单并查看控制台输出,您将看到用户输入的姓名和年龄被成功获取。

 
总结

通过本篇教程,我们学习了如何在 Taurus.MVC WebMVC 中处理表单提交和进行数据验证。
我们创建了一个包含表单的视图,并在控制器中接收表单数据,并进行数据验证和其他逻辑操作。
 
本系列的目录大纲为:
  1. <strong>Taurus.MVC WebMVC 入门开发教程1:框架下载环境配置与运行
  2. Taurus.MVC WebMVC 入门开发教程2:一个简单的页面呈现
  3. Taurus.MVC WebMVC 入门开发教程3:数据绑定Model
  4. Taurus.MVC WebMVC 入门开发教程4:数据列表绑定List<Model>
  5. Taurus.MVC WebMVC 入门开发教程5:表单提交与数据验证
  6. Taurus.MVC WebMVC 入门开发教程6:路由配置与路由映射
  7. Taurus.MVC WebMVC 入门开发教程7:部分视图和页面片段</strong>
复制代码
 

来源:https://www.cnblogs.com/cyq1162/p/18031058
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具