ساخت فرم تماس با MVC

ساخت فرم تماس با MVC

برنامه ASP.Net را اجرا و ASP.Net MVC را انتخاب کنید.

روی پوشه Model کلیک راست کرده و یک کلاس اضافه کنید به نام Contact.cs.

محتویات کلاس Contact.cs به صورت زیر است:

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace ContactForm.Models
{
    public class Contact
    {
        [Required(ErrorMessage = "You need to fill in a name")]
        [DisplayName("Name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "You need to fill in an email address")]
        [DataType(DataType.EmailAddress, ErrorMessage = "Your email address contains some errors")]
        [DisplayName("Email address")]
        public string Email { get; set; }

        [Required(ErrorMessage = "You need to fill in a comment")]
        [DisplayName("Your comment")]
        public string Comment { get; set; }
    }
}

در قسمت Controller به کلاس HomeController.cs بروید و کد زیر را در آن اضافه کنید:

public ActionResult Contact()
{
    return View();
}

ماوس خود را بر روی ()View ببرید و کلید M+Ctrl , Ctrl+V را بزنید یا کلیک راست کرده و Add View را انتخاب کنید. گزینه Create a strongly-typed view را انتخاب کنید و در قسمت Model آدرس مدل ContactForm.Models.Contact را انتخاب کنید.

بعد از این کار یک View در قسمت View/Home/Contact اضافه خواهد شد.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage<ContactForm.Models.Contact>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Contact
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Contact</h2>
</asp:Content>

اکنون می توان فرم را به شکل زیر تغییر داد:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
​Inherits="System.Web.Mvc.ViewPage<ContactForm.Models.Contact>" %>
<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
	Contact us
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <% Html.EnableClientValidation(); %> 
    <% using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "Post", OnComplete = "Contact.onComplete"}))
        { %>
        <%: Html.ValidationSummary(true, "A few fields are still empty") %>
        <fieldset>
            <legend>Contact us</legend>
            <div class="editor-label">
                <%: Html.LabelFor(m => m.Name) %>
            </div>
            <div class="editor-field"><%: Html.TextBoxFor(m => m.Name) %>
                <%: Html.ValidationMessageFor(m => m.Name) %>
            </div>
            <div class="editor-label">
                <%: Html.LabelFor(m => m.Email) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(m => m.Email) %>
                <%: Html.ValidationMessageFor(m => m.Email) %>
            </div>
            <div class="editor-label">
                <%: Html.LabelFor(m => m.Comment) %>
            </div>
            <div class="editor-field">
                <%: Html.TextAreaFor(m => m.Comment, 10, 25, null) %>
                <%: Html.ValidationMessageFor(m => m.Comment) %>
            </div>
            <p>
                <input type="submit" value="Submit" />
            </p>
        </fieldset>
        <p id="result"><%: TempData["Message"] %></p>
    <% } %>
</asp:Content>

اگر شما از MVC Razor استفاده می کنید می توانید به جای تگ های <% …%> از …@ استفاده کنید به عنوان مثال:

<p id="result">@TempData["Message"]</p>

در داخل پوشه Script یک فایل با نام Site.js اضافه کنید و اسکریپت زیر رو در آن ذخیره کنید:

var Contact = {
    onComplete: function (content) {
        var result = eval(content.get_response().get_object());
        var textNode = document.createTextNode(result.message);
        document.getElementById("result").appendChild(textNode);
    }
};

برای اعتبار سنجی فیلد های پروژه این اسکریپت ها رو به Site.Master یا در Razor به _Layout.cshtml اضافه کنید:

...
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/Site.js" type="text/javascript"></script>
</body>
</html>

در انتها متد زیر را نیز به HomeController.cs اضافه کنید:

[HttpPost]
public ActionResult Contact(Contact model)
{
        string message = "There are a few errors";

	if (ModelState.IsValid)
	{
                message = "Thanks! We'll get back to you soon.";
	}

	if (Request.IsAjaxRequest())
	{
		return new JsonResult { ContentEncoding = Encoding.UTF8, Data = new { success = true, message = message } };
	}

        TempData["Message"] = message;

	return View();
}
+7
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۳ دیدگاه ها

  1. سلام
    انصافا آموزش از این بدتر تا بحال ندیده بودم
    آخه اگه آموزشه چرا نصفه و نیمه میگین؟
    مثلا من برنامه نویس مبتدی از کجا بدونم که قبلا باید کنترلر homecontroler رو اضافه میکردم؟
    اگه حرفه ایی بوم که سراغ آموزش نمیگشتم

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


نُه − = 8