准备工作
在开始实现按钮获取手机验证码的功能之前，我们需要确保已经安装并设置好Visual Studio环境。同时，我们需要一个基本的Web项目框架，本文将使用ASP.NET MVC进行演示。
创建MVC项目
新建项目
打开Visual Studio，点击“创建新项目”。选择ASP.NET Core Web应用程序模板，然后点击“下一步”。输入项目名称和位置，点击“创建”。
选择模板
在“创建新ASP.NET Core Web应用程序”窗口中，选择“Web应用程序（模型-视图-控制器）”，然后点击“创建”。
设计前端页面
添加视图
在项目的Views文件夹下，找到Home文件夹，并在其中添加一个名为SendCode.cshtml的视图文件。在该文件中，编写一个简单的HTML表单，包含一个输入框用于输入手机号码和一个按钮用于获取验证码。
```html
@{
ViewData["Title"] = "获取手机验证码";
}
获取手机验证码
```
添加样式
为了使页面更加美观，我们可以添加一些基本的CSS样式。在wwwroot/css文件夹下添加一个styles.css文件，并在其中编写一些简单的样式。
```css
form {
margin-top: 20px;
}
label {
margin-right: 10px;
}
input {
margin-bottom: 10px;
}
button {
margin-top: 10px;
}
#message {
margin-top: 20px;
color: red;
}
```
实现后端逻辑
添加控制器方法
在Home控制器中添加一个用于处理验证码发送请求的动作方法。在Controllers文件夹下，打开HomeController.cs文件，并添加以下代码：
```csharp
[HttpPost]
public IActionResult SendCode(string phoneNumber)
{
// 在这里添加发送验证码的逻辑
// 例如调用第三方短信服务API
bool isSent = SendSmsCode(phoneNumber); // 假设这个方法实现了发送验证码的功能
if (isSent)
{
return Json(new { success = true, message = "验证码已发送" });
}
else
{
return Json(new { success = false, message = "发送失败，请重试" });
}
}
private bool SendSmsCode(string phoneNumber)
{
// 调用短信服务API的逻辑
// 返回true表示发送成功，false表示发送失败
return true; // 这里为了演示，假设总是发送成功
}
```
配置路由
确保在Startup.cs文件中已经配置好MVC路由。在Configure方法中添加以下代码：
```csharp
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
```
实现前端交互
编写JavaScript代码
为了在点击按钮时发送验证码请求，我们需要编写一些JavaScript代码。在wwwroot/js文件夹下添加一个sendCode.js文件，并编写以下代码：
```javascript
document.getElementById('sendCodeButton').addEventListener('click', function () {
var phoneNumber = document.getElementById('phoneNumber').value;
fetch('/Home/SendCode', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ phoneNumber: phoneNumber })
})
.then(response => response.json())
.then(data => {
var messageDiv = document.getElementById('message');
if (data.success) {
messageDiv.textContent = data.message;
messageDiv.style.color = 'green';
} else {
messageDiv.textContent = data.message;
messageDiv.style.color = 'red';
}
})
.catch(error => console.error('Error:', error));
});
```
引用JavaScript文件
在SendCode.cshtml视图文件中引用刚刚创建的JavaScript文件。将以下代码添加到页面底部：
```html
```
测试功能
运行项目并导航到“获取手机验证码”页面。输入一个手机号码，点击“获取验证码”按钮，观察页面上的消息是否显示“验证码已发送”。如果看到该消息，说明功能实现成功。
