در این مقاله با نحوه استفاده از Ajax From ها در Asp.Net MVC را مشاهده خواهید کرد ، و با Redirect کردن توسط JavaScript آشنا خواهید شد.

در ابتدا کلاسی برای پاسخ گویی به درخواستی که به وسیله POST برای ما ارسال شده است ایجاد می کنیم، 

namespace AjaxForm.Serialization  
{  
    public class ResponseData<T>  
    {  
        public T Data { get; set; }  
        public string RedirectUrl { get; set; }  
        public bool IsSuccess { get { return this.Data == null; } }  
    }     
}  

برای پاسخ گویی به صورت Json باید ابتدا Newtonsoft.Json.5.0.8 را با nuget به پروژه اضافه کنیم تا بتوانیم با فرمت Json و داده های آن کار کنیم.

برای اینکار کافیست دستور زیر را از طریق Nuget Package Mannager Concole وارد کرده تا به پروژه افزوده Newtonsoft.Json.5.0.8 شود.

Install-Package Newtonsoft.Json

سپس کلاسی دلخواه برای ایجاد درخواست می نویسیم و کلاس را از کلاس JsonResult ارث بری می کنیم و سپس از طریق قطعه کد کلاس ایجاد شده را کامل می کنیم.

using Newtonsoft.Json;  
using Newtonsoft.Json.Serialization;  
using System;  
using System.IO;  
using System.Web;  
using System.Web.Mvc;  
  
namespace AjaxForm.Serialization  
{  
    public class JsonNetResult : JsonResult  
    {  
        public JsonNetResult()  
        {  
            Settings = new JsonSerializerSettings  
            {  
                ReferenceLoopHandling = ReferenceLoopHandling.Error,  
                ContractResolver = new CamelCasePropertyNamesContractResolver()  
            };  
        }  
  
        public JsonSerializerSettings Settings { get; private set; }  
  
        public override void ExecuteResult(ControllerContext context)  
        {  
            if (context == null)  
            {  
                throw new ArgumentNullException("context");  
            }  
            if (this.JsonRequestBehavior == JsonRequestBehavior.DenyGet && string.Equals(context.HttpContext.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase))  
            {  
                throw new InvalidOperationException("JSON GET is not allowed");  
            }  
  
            HttpResponseBase response = context.HttpContext.Response;  
            response.ContentType = string.IsNullOrEmpty(this.ContentType) ? "application/json" : this.ContentType;  
  
            if (this.ContentEncoding != null)  
            {  
                response.ContentEncoding = this.ContentEncoding;  
            }  
            if (this.Data == null)  
            {  
                return;  
            }  
            var scriptSerializer = JsonSerializer.Create(this.Settings);  
  
            using (var sw = new StringWriter())  
            {  
                scriptSerializer.Serialize(sw, this.Data);  
                response.Write(sw.ToString());  
            }  
        }  
    }  
}  

پس از آن اقدام به ایجاد کنترلر برای مدیریت و درخواست و پاسخ می کنیم و نام کنترلر را Base می گذاریم.

 

using AjaxForm.Serialization;  
using System.Linq;  
using System.Text;  
using System.Web.Mvc;  
  
namespace AjaxForm.Controllers  
{  
    public class BaseController : Controller  
    {  
        public ActionResult NewtonSoftJsonResult(object data)  
        {  
            return new JsonNetResult  
            {  
                Data = data,  
                JsonRequestBehavior = JsonRequestBehavior.AllowGet  
            };  
        }  
  
        public ActionResult CreateModelStateErrors()  
        {  
            StringBuilder errorSummary = new StringBuilder();  
            errorSummary.Append(@"<div class=""validation-summary-errors"" data-valmsg-summary=""true""><ul>");  
            var errors = ModelState.Values.SelectMany(x => x.Errors);  
            foreach(var error in errors)  
            {  
                errorSummary.Append("<li>" + error.ErrorMessage + "</li>");  
            }  
            errorSummary.Append("</ul></div>");  
            return Content(errorSummary.ToString());  
        }  
    }  
}

حال برای پیاده سازی Ajax Form ما اقدام به ایجاد یک کلاس جاوااسکریپت میکنیم و در آن کلاس اقدام به اعتبار سنجی و ارسال فرم از طریق POST می کنیم.

قطعه کد زیر کلاس جاوا اسکریپت مارا تشکیل می دهد : 
 

var Global = {};  
Global.FormHelper = function (formElement, options, onSucccess, onError) {      
    var settings = {};  
    settings = $.extend({}, settings, options);  
  
    formElement.validate(settings.validateSettings);  
    formElement.submit(function (e) {        
        if (formElement.valid()) {  
            $.ajax(formElement.attr("action"), {  
                type: "POST",  
                data: formElement.serializeArray(),  
                success: function (result) {  
                    if (onSucccess === null || onSucccess === undefined) {  
                        if (result.isSuccess) {  
                            window.location.href = result.redirectUrl;  
                        } else {  
                            if (settings.updateTargetId) {  
                                $("#" + settings.updateTargetId).html(result.data);  
                            }  
                        }  
                    } else {  
                        onSucccess(result);  
                    }  
                },  
                error: function (jqXHR, status, error) {  
                    if (onError !== null && onError !== undefined) {  
                        onError(jqXHR, status, error);  
                        $("#" + settings.updateTargetId).html(error);                         
                    }  
                },  
                complete: function () {  
                }  
            });  
        }  
        e.preventDefault();  
    });  
  
    return formElement;  
};  

حال اقدام به ایجاد یک کنترلر دیگر با نام User برای اضافه کردن کاربران و نمایش کاربران در درون لیست خواهیم کرد.کد زیر برای ایجاد کنترلر بکار می رود :
 

using AjaxForm.Models;  
using AjaxForm.Serialization;  
using System.Collections.Generic;  
using System.Web.Mvc;  
  
namespace AjaxForm.Controllers  
{  
    public class UserController : BaseController  
    {  
        public static List<UserViewModel> users = new List<UserViewModel>();  
  
        public ActionResult Index()  
        {  
            return View(users);  
        }  
  
        [HttpGet]  
        public ActionResult AddUser()  
        {  
            UserViewModel model = new UserViewModel();  
            return View(model);  
        }  
  
        [HttpPost]  
        public ActionResult AddUser(UserViewModel model)  
        {  
            if (ModelState.IsValid)  
            {  
                users.Add(model);  
                return NewtonSoftJsonResult(new ResponseData<string> { RedirectUrl = @Url.Action("Index", "User") });  
            }  
            return CreateModelStateErrors();  
        }  
    }  
} 

در کد زیر View مربوط به لیست اعضا را نگاه می کنید ، که نام آن Index.cshtml است :

 

@model List<AjaxForm.Models.UserViewModel>  
<div class="panel panel-primary">  
    <div class="panel-heading panel-head">User List</div>  
    <div class="panel-body">  
        <div class="btn-group">  
            <a id="addUser" href="@Url.Action("AddUser")" class="btn btn-primary">  
                <i class="fa fa-plus"></i> Add User  
            </a>  
        </div>  
  
        <table class="table table-striped">  
            <thead>  
                <tr>  
                    <th>UserName</th>  
                    <th>Email</th>  
                </tr>  
            </thead>  
            <tbody>  
                @foreach (var item in Model)  
                {  
                    <tr>  
                        <td>@item.UserName</td>  
                        <td>@item.Email</td>  
                </tr>  
                }  
            </tbody>  
        </table>  
    </div>  
</div> 

سپس شروع به ایجاد یک View برای اضافه کردن کاربر می کند : 
 

@model AjaxForm.Models.UserViewModel  
  
<div class="panel panel-primary">  
    <div class="panel-heading panel-head">Add User</div>  
    <div id="frm-add-user" class="panel-body">  
        @using (Html.BeginForm())  
        {  
            <div id="validation-summary"></div>  
            <div class="form-horizontal">  
                <div class="form-group">  
                    @Html.LabelFor(model => model.UserName, new { @class = "col-lg-2 control-label" })  
                    <div class="col-lg-9">  
                        @Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })   
                        @Html.ValidationMessageFor(model => model.UserName)                        
                    </div>  
                </div>  
                <div class="form-group">  
                    @Html.LabelFor(model => model.Email, new { @class = "col-lg-2 control-label" })  
                    <div class="col-lg-9">  
                        @Html.TextBoxFor(model => model.Email, new { @class = "form-control" })  
                        @Html.ValidationMessageFor(model => model.Email)                         
                    </div>  
                </div>                  
                <div class="form-group">  
                    <div class="col-lg-9"></div>  
                    <div class="col-lg-3">  
                        <button class="btn btn-success" id="btnSubmit" type="submit">  
                            Submit  
                        </button>  
                    </div>  
                </div>  
            </div>  
        }  
    </div>  
</div>  
  
@section scripts  
{  
    @Scripts.Render("~/bundles/jqueryval","~/Scripts/global.js","~/Scripts/user_add_user.js")  
}  

سپس فایلی برای جاوا اسکریپت می نویسیم به نام user_add_user.js و به پروژه اضافه می کنیم.
این فایل مقدار دهی اولیه را برای ایجاد یک تاییده و ارسال فرم از طریق POST آماده می کند.
کد های زیر را در فایل user_add_user.js قرار می دهیم و سپس آن را ذخیره می کنیم.

 

(function ($) {  
  
    function AddUser(){  
        var $this = this;  
  
        function initilizeUser() {  
            var formAddUser = new Global.FormHelper($("#frm-add-user form"), { updateTargetId: "validation-summary" })  
        }  
  
        $this.init = function () {  
            initilizeUser();  
        }  
    }  
    $(function () {  
        var self = new AddUser();  
        self.init();  
    })  
  
}(jQuery))

حالا شروع به اجرای پروژه می کنیم و صفحه AddUser را اجرا می کنیم.سپس در صفحه ایجاد شده شروع به وارد کردن مقادیر نمونه می کنیم.

سپس بر روی کلید اضافه کردن کاربر کلیک می کنیم و بعد از طریق کنترلر به صفحه یا View لیست اعضا به وسیله جاوا اسکریپت هدایت می شویم.در تصویر زیر نیز صفحه لیست کاربران را مشاهده می کنیم.