آموزش ASP.NET MVC 6 پیاده سازی صفحه ارتباط با ما (Contact Us)

این آموزش ASP.NET MVC 6 نحوه پیاده سازی صفحه ارتباط با ما را آموزش می دهد . ابتدا مدلی برای فرم Contact می سازیم و عملیات منطقی را بعدا در کنترلر انجام می دهیم. این کار از طریق ساختار و الگو MVC پیاده سازی شده است و برای اعتبار سنجی (Validation) در سمت مشتری (Client) از jQuery استفاده شده است.

پیش نیاز

این پیاده سازی در NET.4.5.1.  اجرا و تست شده است اما بر روی NET. core 1.0 اجرا نشده است چون فاقد فضای نام System.Net.Mail است. این امکانات در نسخه های بعدی ممکن است اضافه شود.

کد  نمونه آموزش ASP.NET MVC 6

کد زیر یک کد نمونه برای تولید فرم Contact است

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 برای ارسال ایمیل استفاده کرده ایم. می توانید از سرویس دهنده های دیگر نیز برای این کار استفاده کنید

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>

همچنین کل کد منبع را می توانید در زیر دانلود کنید

دانلود کدها

آموزش asp.net mvc 6

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید
  • این فیلد برای اعتبار سنجی است و باید بدون تغییر باقی بماند .

درباره‌ی محمد بروشکی

همچنین ببینید

ساخت اپلیکیشن سمت کاربر با فرمت Javascript

در این بخش از آموزش Web API با استفاده از HTML، Javascript و  Knockout.js   اپلیکیشنی …

یک نظر

  1. سلام من همین پروژه رو روی سیستم خودم دارم تست میکنم
    فقط یک مورد اینکه وقتی میخوام روی لوکال دستگاه امتحان کنم باید چه کاری تنجام بدم ؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *