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

前言：

在本篇 Taurus.MVC WebMVC 入门开发教程的第五篇文章中，我们将学习如何处理表单提交和进行数据验证。

这是 Web 开发中非常重要的一部分，因为它涉及到用户输入数据的处理和有效性验证。

我们将继续使用 Taurus.Mvc 命名空间，并探讨如何在控制器中接收表单数据、进行数据验证并给出相应的响应。

步骤1：创建视图

首先，我们需要创建一个包含表单的视图。

在视图文件（例如 create.html）中，我们可以使用 HTML 表单元素来接收用户输入的数据。

<!DOCTYPE html>
<html>
<head>
    <title>创建用户</title>
</head>
<body>
    <h1>创建用户</h1>
    <form method="post">
        <label for="name">姓名：</label>
        <input type="text" name="name" id="name" required>
        <br>
        <label for="age">年龄：</label>
        <input type="number" name="age" id="age" required>
        <br>
        <input type="submit" value="提交" name="btnAddUser">
        <div id="printMsg"></div>
    </form>
</body>
</html>

在上述代码中，我们创建了一个简单的表单，包含一个文本输入框和一个数字输入框，用于接收用户的姓名和年龄。

表单的 method 属性被设置为 post，默认将数据提交到当前页面。

同时给按钮起了个名称"btnAddUser"，事件按钮，对应控制器的方法。

步骤2：更新控制器

接下来，我们需要在控制器中创建一个方法来处理表单提交。

我们继续沿用上文使用到的 HomeController.cs 文件，并在其中添加一个名为 Create 的方法，用来呈现显示页面内容。

同时添加 BtnAddUser 方法【和按钮同名，不区分大小写】来处理按钮事件。

public class HomeController : Taurus.Mvc.Controller
{
    public void Index()
    {
        ...
    }



    public void Create() { }

    public void BtnAddUser(string name, int age)
    {
        View.Set("printMsg", name + " - " + age);
    }
}

在 HomeController 类中，定义和 Create.html 同名的方法，用来显示该表单界面。

同时添加 BtnAddUser 方法，来处理按钮点击事件。

上述代码中的 BtnAddUser 方法可以指定接收 表单 对象作为参数，其中包含了表单提交的数据。

我们也可以通过 Query<string>("name") 和 Query<int>("age") 来获取相应的用户输入值。

上述示例代码中，最后通过：View.Set 方法，可以将数据呈现在指定（ID=“printMsg”）的 Html 标签中。

步骤3：进行数据验证

在表单提交后，我们通常需要对用户输入的数据进行验证，以确保其有效性。

在上述代码的中，我们将参数表单的接收参数，定义到方法参数中，同时指定了数据类型。

对于表单参数较少时：

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

对于参数较多时：

您可以通过定义实体Model，并将它定义到方法参数中，例如：

    public void BtnAddUser(User user)
    {
        View.Set("printMsg", user.name + " - " + user.age);
    }

当然我们也可以不定义任何方法参数，通过 Query<T>(Name) 方法来获取相应的用户输入值。

    public void BtnAddUser()
    {
        View.Set("printMsg", Query<String>("name") + " - " + Query<int>("age"));
    }

接下来，您需要自行添加数据验证的逻辑，以保证程序的稳定输出。

例如，您可以使用条件语句、正则表达式或其他验证方式来检查用户输入的数据是否符合要求。

如果数据验证失败，您可以返回一个视图，向用户显示错误信息并要求重新输入。

如果数据验证成功，您可以执行其他操作（例如保存到数据库）并重定向用户到另一个页面。

步骤4：运行应用程序

最后，运行应用程序并访问 /Home/Create 路由，您将看到一个表单页面。

尝试提交表单并查看控制台输出，您将看到用户输入的姓名和年龄被成功获取。

 

总结

通过本篇教程，我们学习了如何在 Taurus.MVC WebMVC 中处理表单提交和进行数据验证。

我们创建了一个包含表单的视图，并在控制器中接收表单数据，并进行数据验证和其他逻辑操作。

 

本系列的目录大纲为：

Taurus.MVC WebMVC 入门开发教程1：框架下载环境配置与运行

Taurus.MVC WebMVC 入门开发教程2：一个简单的页面呈现

Taurus.MVC WebMVC 入门开发教程3：数据绑定Model

Taurus.MVC WebMVC 入门开发教程4：数据列表绑定List<Model>

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

Taurus.MVC WebMVC 入门开发教程6：路由配置与路由映射

Taurus.MVC WebMVC 入门开发教程7：部分视图和页面片段

 

posted on 2024-02-29 11:02  路过秋天  阅读(319)  评论(2)  编辑  收藏  举报
路过秋天