ارسال داده با استفاده از Ajax.BeginForm در ASP.Net MVC

Ajax.BeginForm

در این مقاله آموزش mvc با هم به سراغ ارسال داده با استفاده از Ajax.BeginForm خواهیم رفت.در ASP.Net MVC راه های بسیاری که نیاز به نوشتن کدهای زیادی هم ندارد، برای این کار وجود دارد.

ارسال داده به سرور بدون یک postback کامل یا به عبارت دیگر بدون refresh صفحه در ذخیره منابع سرور و سرعت بخشیدن به برنامه بسیار مهم است.  با من همراه باشید …

Ajax.BeginForm

گام اول: ایجاد اپلیکیشن MVC

ویژوال ۲۰۱۵ را باز کرده از منوی File گزینه New و سپس Project را انتخاب کرده و روی “ASP.Net Web Application” کلیک می کنیم و پس از انتخاب نام مناسب Ok می کنیم.

گزینه MVC empty application را انتخاب کرده و Ok می کنیم.

گام دوم: اضافه کردن کلاس Model

روی فولدر Model راست کلیک کرده و کلاسی با نام EmpModel ایجاد می کنیم و کد زیر را در آن می نویسیم.

using System.ComponentModel.DataAnnotations;  
  
namespace AjaxBeginFormwithMVC.Models  
{  
    public class EmpModel  
    {  
  
        [Required]  
        public string Name { get; set; }  
        [Required]  
        public string City { get; set; }  
        [Required]  
        public string Address { get; set; }  
    }  
} 

گام سوم: ایجاد HomeController

روی فولدر Controller کلیک کرده و به صورت زیر کلاس کنترلری ایجاد می کنیم.

 Ajax.BeginForm

حال پس از انتخاب قالب کنترلر روی دکمه Add کلیک می کنیم و پنجره زیر باز می شود:

 ASP.Net MVC

نام کنترلر را مشخص کرده و دوباره روی Add کلیک می کنیم.

سپس کلاس HomeController.cs را باز کرده و کد زیر را در آن می نویسیم:

using AjaxBeginFormwithMVC.Models;  
using System.Web.Mvc;  
  
namespace AjaxBeginFormwithMVC.Controllers  
{  
    public class HomeController : Controller  
    {  
        // GET: Home  
        [HttpGet]  
        public ActionResult EmployeeMaster()  
        {  
            return View();  
        }  
        [HttpPost]  
        public ActionResult EmployeeMaster(EmpModel obj)  
        {  
            ViewBag.Records = "Name : " + obj.Name + " City:  " + obj.City + " Addreess: " + obj.Address;  
            return PartialView("EmployeeMaster");  
        }  
    }  
}

در کد بالا ما یک متد Action result به نام EmployeeMaster اضافه کردیم که یک partial view با نام EmployeeMaster به همراه مقدار پارامترهای ورودی را برمی گرداند.

گام چهارم: اضافه کردن View

یک view از نوع Strong Type با نام EmployeeMaster از کلاس EmpModel اضافه می کنیم.

 ارسال داده با Ajax.BeginForm

گام پنجم: اضافه کردن رفرنس jquery.unobtrusive-ajax

برای استفاده از امکان Ajax.BeginFrom باید رفرنس کتابخانه jquery.unobtrusive-ajax را به پروژه خود اضافه کنیم.

برای این کار روش های مختلفی وجود دارد:

استفاده از NuGet packet manager، به این ترتیب می­توان رفرنس و کتابخانه را به پروژه اضافه کرد.

روی نام پروژه راست کلیک کرده و گزینه NuGet packet manager را انتخاب می کنیم.

 ارسال داده با Ajax.BeginForm

سپس پنجره زیر باز می­ شود و عبارت jquery unobtrusive ajax را در آن جستجو می کنیم.

 Ajax.BeginForm در MVC

نسخه مناسب را انتخاب کرده و روی دکمه Install کلیک می کنیم.

به این ترتیب کتابخانه jQuery UI به پروژه ما اضافه می شود و کتابخانه فایل اسکریپت به فولدر script اضافه می شود.

استفاده از کتابخانه CDN فراهم شده توسط مایکروسافت، جی کوئری، گوگل یا هر کتابخانه دیگری که نیاز به اتصال اینترنت دارد.

دانلود کتابخانه با استفاده از NuGet و دادن رفرنس آن به پروژه کتابخانه بعد از اضافه شدن فایل ها به فولدر script به شکل زیر خواهد بود:

 Ajax.BeginForm

برای استفاده از Ajax.BeginForm فراموش نکنید که رفرنس های زیر را به کد اضافه نمایید.

script src="~/Scripts/jquery-1.10.2.js"/script 
script src="~/Scripts/jquery.unobtrusive-ajax.js"/script

بعد از اضافه کردن کدهای لازم و فایل های موردنیاز، کد EmployeeMaster.cshtml به شکل زیر خواهد بود:

@model AjaxBeginFormwithMVC.Models.EmpModel  
  
@{  
    ViewBag.Title = "www.compilemode.com";  
}  
script src="~/Scripts/jquery-1.10.2.js"/script 
script src="~/Scripts/jquery.unobtrusive-ajax.js"/script 
div id="divEmp" 
  
  
    @using (Ajax.BeginForm("EmployeeMaster", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))  
    {  
        @Html.AntiForgeryToken()  
  
        div class="form-horizontal" 
  
            hr / 
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })  
            div class="form-group" 
                @Html.LabelFor(model =model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
                div class="col-md-10" 
                    @Html.EditorFor(model =model.Name, new { htmlAttributes = new { @class = "form-control" } })  
                    @Html.ValidationMessageFor(model =model.Name, "", new { @class = "text-danger" })  
                /div 
            /div 
  
            div class="form-group" 
                @Html.LabelFor(model =model.City, htmlAttributes: new { @class = "control-label col-md-2" })  
                div class="col-md-10" 
                    @Html.EditorFor(model =model.City, new { htmlAttributes = new { @class = "form-control" } })  
                    @Html.ValidationMessageFor(model =model.City, "", new { @class = "text-danger" })  
                /div 
            /div 
  
            div class="form-group" 
                @Html.LabelFor(model =model.Address, htmlAttributes: new { @class = "control-label col-md-2" })  
                div class="col-md-10" 
                    @Html.EditorFor(model =model.Address, new { htmlAttributes = new { @class = "form-control" } })  
                    @Html.ValidationMessageFor(model =model.Address, "", new { @class = "text-danger" })  
                /div 
            /div 
  
            div class="form-group" 
                div class="col-md-offset-2 col-md-10" 
                    input type="submit" value="Save" class="btn btn-primary" / 
                /div 
            /div 
            hr / 
            div class="form-group" 
                div class="col-md-offset-2 col-md-12 text-success" 
                   @ViewBag.Records  
                /div 
            /div 
  
        /div 
    }  
/div 
script src="~/Scripts/jquery.validate.min.js"/script 
script src="~/Scripts/jquery.validate.unobtrusive.min.js"/script

حالا برنامه را اجرا کرده و بدون وارد کردن متنی در textbox روی دکمه Save کلیک می کنیم، همان طور که مشاهده می کنید اعتبارسنجی انجام شده و پیغام هایی نمایش داده می شود.

 روش های ارسال داده در MVC

حال اگر جزئیات را به درستی وارد کرده و سپس روی دکمه Save کلیک کنیم، داده ها به صورت آسنکرون و بدون refresh صفحه به کنترلر ارسال می شوند.

 کاربرد های Ajax.BeginForm در MVC

موفق باشید!

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    فرزین پاسخ

    سلام چرا PDF این آموزشها رو نمیذارید برای دانلود؟!!!!!!

    محمد پاسخ

    کامل ترین آموزشی بود که دیدم. خیلی خوب و واضح توضیح داده شده بود. تشکر

جشنواره فروش ویژه عید تا عید با تخفیف های باورنکردنی در ام اس پی سافتبزن بریم
+