ASP.NET 按钮点击事件

Question

我是 asp.net 的新手，我被要求用该平台构建一个宁静的 API，我设法完美地构建了 API，它工作 100%，我现在必须为 API 构建一个前端。它是只是为了管理 email 布局。 API 用于捕获详细信息、发布到数据库和发送电子邮件。 那部分正在工作。

我的问题来了，前端，整个 MVC 结构我似乎无法理解。

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

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

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

我的 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# function 我想在单击按钮时运行：

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 只包含一个 function，它运行我的 SQL 存储过程来插入用户。

Answer 1

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

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

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

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

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

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

using project.Models;

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

现在这个 controller 方法负责将操作路由到寄存器 model 的索引视图。您可以像这样使用HtmlHelpers将输入的值绑定到 model 值。 您应该将您的元素包装在您将发布到您的Controller的form中：

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()你可以在这里阅读更多

现在，一旦您的视图设置完毕，您就可以像这样将数据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发布数据的基本概述。