如何在 ASP.NET MVC (ASP.NET 5) 中实现“联系我们”页面

• 下载源代码 - 2.6 MB

引言

这篇文章介绍如何在 ASP.NET MVC 6 (ASP.NET Core 1.0) 中实现“联系我们”页面。首先，我创建了联系表单的模型，然后创建了相应的视图，最后在控制器中完成了所有逻辑处理。 该实现使用了 MVC 模式（模型-视图-控制器模式），并使用 jQuery 进行客户端验证。

背景

此代码在 .NET 4.5.1 版本上运行和测试过，但它在 .NET Core 1.0 上无法工作，因为它目前没有

System.Net.Mail

在 .NET Core 1.0 中支持。 也许可以在后续版本中实现。

模型代码

这是联系表单的模型代码。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace ContactUS.ViewModel
{
    public class ContactViewModel
    {
        [Required]
        [StringLength(20,MinimumLength =5)]
        public string Name { get; set; }
        [Required]
        [EmailAddress]
        public string Email { get; set; }
        [Required]
        public string Subject { get; set; }
        [Required]
        public string Message { get; set; }
    }
}

控制器代码

这是控制器代码，我们使用 Gmail 发送邮件。 您可以使用其他邮件提供商，但我使用的是 Gmail，并且它工作正常。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
using ContactUS.ViewModel;
using System.Net.Mail;

namespace ContactUS.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Index(ContactViewModel vm)
        {
            if(ModelState.IsValid)
            {
                try
                {
                    MailMessage msz = new MailMessage();
                    msz.From = new MailAddress(vm.Email);//Email which you are getting 
								//from contact us page 
                    msz.To.Add("emailaddrss@gmail.com");//Where mail will be sent 
                    msz.Subject = vm.Subject;
                    msz.Body = vm.Message;
                    SmtpClient smtp = new SmtpClient();

                    smtp.Host = "smtp.gmail.com";

                    smtp.Port = 587;

                    smtp.Credentials = new System.Net.NetworkCredential
					("youremailid@gmail.com", "password");

                    smtp.EnableSsl = true;

                    smtp.Send(msz);

                    ModelState.Clear();
                    ViewBag.Message = "Thank you for Contacting us ";
                }
                catch(Exception ex )
                {
                    ModelState.Clear();
                    ViewBag.Message = $" Sorry we are facing Problem here {ex.Message}";
                }              
            }
          
            return View();
        }
        public IActionResult Error()
        {
            return View();
        }
    }
}

客户端代码

在这里，我使用 jQuery 进行客户端验证，并使用 Bootstrap 使界面更美观。

@model ContactUS.ViewModel.ContactViewModel
@{
    ViewData["Title"] = "Home Page";
}
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<div>
    <div class="col-md-6">
        <div>
            @if (ViewBag.Message == null)
            {
                <div>
                    <form method="post">
                        <div class="form-group">
                            <label asp-for="Name">Name</label>
                            <input asp-for="Name" class="form-control" />
                            <span asp-validation-for="Name" 
                            class="text-muted"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Email">Email</label>
                            <input asp-for="Email" class="form-control" />
                            <span asp-validation-for="Email" 
                            class="text-muted"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Subject">Subject</label>
                            <input asp-for="Subject" class="form-control" />
                            <span asp-validation-for="Subject" 
                            class="text-muted"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Message">Message</label>
                            <textarea rows="5" cols="15" 
                            asp-for="Message" class="form-control"></textarea>
                            <span asp-validation-for="Message" 
                            class="text-muted"></span>
                        </div>
                        <div>
                            <button type="submit" 
                            class="btn btn-success">Send </button>
                        </div>

                    </form>
                </div>
            }
        </div>

        <div>
            <div>
                @if (ViewBag.Message != null)
            {
                    <div>@ViewBag.Message</div>


                }
            </div>
        </div>
    </div>

</div>

我还在下面附上了完整的可运行源代码。

如果您遇到任何问题，请随时与我联系。