آموزش 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();
        }
    }
}

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>

@model ContactUS.ViewModel.ContactViewModel

ViewData["Title"] = "Home Page";

}

<div>

<div>

@if (ViewBag.Message == null)

{

<div>

<span asp-validation-for="Name"

class="text-muted"></span>

</div>

<label asp-for="Email">Email</label>

<span asp-validation-for="Email"

class="text-muted"></span>

</div>

<label asp-for="Subject">Subject</label>

<span asp-validation-for="Subject"

class="text-muted"></span>

</div>

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

@if (ViewBag.Message != null)

{

<div>@ViewBag.Message</div>

}

</div>

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

دانلود کدها

آموزش asp.net mvc 6

حتما نگاهی به این مقالات بیندازید

developer سه‌شنبه 10 مهر 1397 ساعت 22:36

آکادمی برنامه نویسان مشهد

آکادمی برنامه نویسان مشهد