پروژه فرضی ما ساخت صفحه تماس با ما می باشد
ابتدا یک پروژه از نوع empty mvc با نام ContactUsAjax ایجاد نمایید.
سپس بر روی پوشه controller کلیک راست نمایید و یک کنترلر به نام Home به برنامه اضافه نمایید.
سپس بر روی پوشه Models کلیک راست نمایید و Add -->Class را انتخاب نمایید و نام کلاس را ContactUs قرار دهید.
محتویات کلاس را بصورت زیر ویرایش نمایید
public class ContactUs
{
[Required(ErrorMessage ="نام و نام خانوادگی را درج نمایید")]
public string FullName { get; set; }
[Required(ErrorMessage = "ایمیل را درج نمایید")]
public string Email { get; set; }
[Required(ErrorMessage = "متن پیام را درج نمایید")] [DataType(DataType.MultilineText)]
public string Description { get; set; }
}
فضای نام using System.ComponentModel.DataAnnotations; را جهت اعتبار سنجی به کلاس اضافه نمایید
اکشنی با نام ContactUS بصورت زیر درون کنترلر خود درج نمایید
[HttpGet]
public ActionResult ContactUs()
{
return View();
}
سپس بر روی اکشن ContactUS کلیک راست نمایید سپس Add --> View را انتخاب نمایید تا یک ویو بر اساس کلاس ایجاد شده طراحی نماییم.با توجه بشکل زیر
در این حالت قالب سایت شما در پوشه View->Shared اضافه شده است و دقت نمایید فایلهای زیر نیز به قالب برنامه شما اضافه شده باشد.
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
کدهای ویوی ContactUs.cshtml را بصورت زیر ویرایش نمایید
@model ContactUsAjax.Models.ContactUs
@{
ViewBag.Title = "ContactUs";
}
<h2>تماس با ما</h2>
<div class="text-success" id="divEmp"></div>
<div id="Loading2" style="display:none;color:red;">لطفا منتظر بمانید</div>
@using (Ajax.BeginForm("ContactUs", "Home", new AjaxOptions() { LoadingElementId = "Loading2", UpdateTargetId = "divEmp", HttpMethod = "POST", InsertionMode = InsertionMode.Replace }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="ارسال" class="btn btn-default" />
</div>
</div>
</div>
}
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
دقت نمایید دو اسکریپتی که در انتهای دو خط فوق در ویو درج شده است در پوشه scripts برنامه موجود باشد.
همنطور که میبینید جهت ارسال درخواست ایجکسی از ...using (Ajax.BeginForm استفاده شده است.
اکنون بر روی نام پروزه کلیک راست نمایید و سپس بر روی Manae Nuget Packages کلیک نمایید و در صفحه باز شده از قسمت Brows عبارت Microsoft.jQuery.Unobtrusive.Ajax را جستجو نمایید و آن را به برنامه اضافه کنید.
سپس فایل jquery.unobtrusive-ajax.min.js را که اکنون نصب نمودید و jquery.validate.min.js و jquery.validate.unobtrusive.min.js را از پوشه scripts به انتهای قالب سایت اضافه نمایید
تابع زیر را به کنترلر خود اضافه نمایید. این تابع جهت دریافت داده ها از کلاینت و ذخیره آن مورد استفاده قرار میگیرد و در پایان متنی را به سمت کلاینت ارسال می کند.
[HttpPost]
public string ContactUs(ContactUs c)
{
//save your data
return "ثبت با موفقیت انجام شد";
}
برنامه خود را اجرا نمایید
فایلهای مورد نیاز شامل اسکریپتها و مدل و ویوی برنامه در قسمت فایلهای ضمیمه شده جهت دانلود قرار داده شده است
آدرس کانال فکر بکر : https://Telegram.me/learningprograming