How to Implement Contact Us Page in ASP.NET MVC (ASP.NET 5 )

• Download source - 2.6 MB

Introduction

This is a post about implementing Contact us Page in ASP.NET MVC 6 (ASP.NET core 1.0). At first, I have created Model for Contact form and view is created for that and then all the logical stuff is done in the Controller. This is implemented using MVC Pattern (Model View and Controller Pattern) and jQuery is used for Client side Validation.

Background

This is working and tested on .NET 4.5.1 version, but it won't works on .NET core 1.0 as it does not have:

System.Net.Mail

in the .NET core 1.0 as per now. It may be implemented in later versions.

Code for Model

This is Model code for the Contact Form.

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; }
    }
}

Code for Controller

This is Controller code where we are using Gmail to send mail. You may use other mail providers, but I did this for Gmail and it's working.

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();
        }
    }
}

Code for Client Side

Here, I am using jQuery for Client side validation and also Bootstrap to look great.

@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>

I am also attaching the full working source code here.

If you face any issues, please feel free to contact me.