ASP.NET 按钮点击事件

Question

我是 asp.net 的新手，我被要求用该平台构建一个 restful API，我成功地构建了 API它正在 100% 工作，我现在必须为 API 构建一个前端。它只是为了管理电子邮件布局。 API 用于捕获详细信息，post 到数据库，并发送电子邮件。该部分正在运行。

我的问题来了，前端，整个MVC结构我看不懂。

我的目标：单击按钮时执行 C# 代码。

我要构建的第一个页面是登录页面。我已经编写了所有的 c# 模型来创建用户并保存到数据库中。我只想弄清楚如何运行单击按钮时我的 c# 函数。

使用 asp:button 没有帮助，因为我无法生成点击事件，因为页面后面没有 c# 代码...我使用的视图是 MCV 5 视图页面（razor）

我的 HTML 标记：

<div class="lg-conatiner">

        <h1>Create an account</h1>

        <div class="loginBox registerBox">

            <div class="loginItem">


                <input placeholder="company name" />

            </div>

            <div class="loginItem">


                <input placeholder="username" />

            </div>

            <div class="loginItem">

                <input placeholder="password" type="password" />

            </div>

            <div class="loginItem">

                <input placeholder="confirm password" type="password" />

            </div>

            <div class="loginItem loginItem3">

               <button onclick="" type="button">Register</button>


                


                <a href="">@Html.ActionLink("Back to Login", "Login", "Account")</a>

            </div>
           
        </div>


    </div>

单击按钮时我想要运行的 c# 函数：

public void registerUser(User newUser)
        {
            dataAccess da = new dataAccess();

           if(!string.IsNullOrWhiteSpace(newUser.username) || !string.IsNullOrWhiteSpace(newUser.password) || !string.IsNullOrWhiteSpace(newUser.companyname))
            {
                try
                {

                    //all good, register user
                    da.insertUser(newUser);
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }
        }

数据访问 class 仅包含运行我的 SQL 存储过程的函数，用于插入用户。

Answer 1

您可以通过多种方式将数据发送到服务器上的 Controller 方法。我将向您展示如何使用强类型 Model 实现注册功能的一种非常基本的方法，它将保存您的注册详细信息，然后将其发送到服务器进行处理：

在名为 Register 的模型目录下创建一个 Model：

public class Register
{
    [Required]
    public string CompanyName { get; set; }

    [Required]
    public string UserName { get; set; }

    [Required]
    public string Password { get; set; }
}

然后在渲染初始视图时初始化此 Model。在您的 Controllers 文件夹下，创建一个名为 Register 的新控制器，并在其中定义一个名为 Index 的方法。此方法负责使用绑定到字段的模型设置索引视图：

using project.Models;

public class RegisterController : Controller
{
    public ActionResult Index()
    {
        Register register = new Register();
        return View(register);
    }
}

现在这个控制器方法负责将操作路由到具有 Register 模型的 Index 视图。您可以像这样使用 HtmlHelpers 将输入值绑定到模型值。您应该将您的元素包装在 form 中，您将 post 到您的 Controller:

Index.cshtml:

@using project.Models
@model Register

<div class="lg-conatiner">
    <h1>Create an account</h1>
    @Html.ValidationSummary(true, null, new { @class = "text-danger", style = "font-size:20px"})
    @using (Html.BeginForm("Register", "Register", FormMethod.Post, new { @class = "form", role = "form", enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        <div class="loginBox registerBox">
            <div class="loginItem">
                @Html.TextBoxFor(m => m.CompanyName , new { @id = "companynameID", @class = "form-control", @required = "required", @placeholder = "Enter Company Name", @autocomplete = "off" })           
            </div>
            <div class="loginItem">
                @Html.TextBoxFor(m => m.UserName , new { @id = "usernameID", @class = "form-control", @required = "required", @placeholder = "username", @autocomplete = "off" })               
                <input placeholder="username" />
            </div>
            <div class="loginItem">
                @Html.TextBoxFor(m => m.Password, new { @id = "passwordID", @class = "form-control", @required = "required", @placeholder = "Enter Password", @autocomplete = "off", @type = "password" })      
                <input placeholder="password" type="password" />
            </div>
            <div class="loginItem">
                <input placeholder="confirm password" type="password" id="confirmpasswordID"/>
            </div>      
            <div class="loginItem loginItem3">
               <button type="submit" class="btn btn-block btn-primary">Register</button>
            </div>      
        </div>
    }
    <br>
    <a href="">@Html.ActionLink("Back to Login", "Login", "Account")</a>    
</div>

上面的View使用了Bootstrap个元素来显示表单。我们还使用 @Html.AntiForgeryToken()，您可以在 here

上阅读更多内容

现在一旦你的视图设置好了，你就可以Post你的数据到Controller，像这样：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Register(Register register)
{
    dataAccess da = new dataAccess();
    try
    {
        var result= da.insertUser(register);
        if(!da)
        {
            ModelState.AddModelError("", "Could not register");
        }
        else
        {
            ModelState.AddModelError("", "Successfully registered");                
        }
    }
    catch (Exception ex)
    {
        ModelState.AddModelError("", "Exception in registering user");
        //Log the exception
    }           
    return View("Index", register);
}

还有其他方法可以将表单数据发送到 Controller 方法，例如使用 AJAX 或 JQuery 首先验证您的元素，然后将它们发送到 Controller。上面的实现是如何通过 Model.

post 数据的基本概述

ASP.NET 按钮点击事件

ASP.NET button click event

c#

asp.net

asp.net-mvc

razor