آموزش ذخیره سازی اطلاعات با Ajax در Asp.Net MVC

دراین پست میخواهیم چگونگی ذخیره سازی داده های یک فرم را با استفاده از Ajax در Asp.Net MVC را یادبگیریم.

یکی از راه های ذخیره اطلاعات در پایگاه داده در صفحات asp استفاده از دستورات ajax است. در Asp به روش های مختلف می توان داده ها را ذخیره و به نمایش گذاشت که امروز یکی از این ها یعنی استفاده از ajax در صفحات mvc را شرح خواهیم داد.

ابتدا یک پروژه از نوع asp ایجاد و نام آن را IranGanjAjaxForm قرار میدهیم.

سپس نوع پروژه را mvc قرار می دهیم مانند تصویر زیر.

خب در قدم اول ما می خواهیم اطلاعات ارسال شده و بازگشت پاسخ به فرمت Json باشد پس نیاز است تا یک کلاس مشترک برای این ارسال و بازگشت ایجاد کنیم تا داده های ارسال شده و نمایشی با فرمت مشترک کارکنند. پس رفرنس Newtonsoft.Json را به پروژه اضافه خواهیم کرد.

سپس ابتدا یک پوشه با نام Serialization ایجاد می کنیم. داخل این پوشه برای ارسال داده ها یک کلاس بانام ResponseData ایجاد می نماییم.

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

حالا برای پاسخ دهی با فرمت Json باز نیاز به یک کلاس دیگر داریم تا فرمت مورد نظر را در پروژه برایمان ایجاد کند. بنابراین یک کلاس با عنوان JsonNetResult ایجاد و کدهای زیر را در آن قرار میدهیم.

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());
            }
        }
    }

یک کنترلر بنام BaseController در پوشه کنترلر ایجاد تا کنترل لازم روی کلاسی که برای پاسخ دهی به فرمت Json را برایمان کنترل و در صورت خطا هشدارلازم را جهت اگاهی اعلام کند.

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 نیاز است تا یک جاوااسکریپت ایجاد و دستورات لازم جهت ارسال داده ها را تعریف کنیم. برای اینکار یک صفحه جاوا ایجاد و نام ان ار golbal قرار می دهیم و دستورات زیر را برایش تعریف میکنیم.

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

برای نمونه ما یک فرم ثبت نام کاربری و ایمیل را میخواهیم پیاده کنیم پس نیاز است تا یک کنترلر ایجاد کنیم که ثبت این دو فیلد را برعهده بگیرد همچنین نمایش اطلاعات ذخیره شده را هم کنترل کند. پس کنترلری بانام UserController در پوشه کنترلر ایجاد میکنیم و دستورات زیر را برایش تعریف می نماییم.

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();
        }
    }

همانطور که مشاهده میکنید در بالا دو متد را کنترل باید کرد یکی روی پوشه Modale و دیگری پوشه Views است.

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

public class UserViewModel
    {

        [Required(ErrorMessage = "الزامی")]
        [Display(Name = "نام")]
        public string UserName { get; set; }
         [Display(Name = "ایمیل")]
        [Required(ErrorMessage = "الزامی"), EmailAddress(ErrorMessage = "ایمیل معتبر نیست!")]
        public string Email { get; set; }
    }

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

در ادامه صفحه AddUser مربوط به پوشه Views رو ایجاد و دستورات زیر را برایش تعریف می کنیم.

<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">
                            ارسال
                        </button>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

@section scripts
{
    @Scripts.Render("~/bundles/jqueryval","~/Scripts/global.js","~/Scripts/user_add_user.js")
}

فیلد های لازم و هشدارها را در بالا تعریف کردیم و در اخر یک اسکریپت هم برایش آدرسی دهی نمودیم. در اصل وظیفه نمایش خلاصه خطاها را در آن تعریف نمودیم که کد لازم به صورت زیر است و نام اسکریپت را هم بهuser_add_user  نامگذاری میکنیم.

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

با کد بالا در هنگام ارسال داده ها اگر خطایی رخ داده باشد به کاربر اطلاع رسانی را انجام می دهد.

در آخر هم یک صفحه Index برای نمایش اطلاعات ایجاد میکنیم.

<div class="panel panel-primary">
    <div class="panel-heading panel-head">لیست کاربران</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> کاربر جدید
            </a>
        </div>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>نام</th>
                    <th>ایمیل</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.UserName</td>
                        <td>@item.Email</td>
                </tr>
                }
            </tbody>
        </table>
    </div>
</div>

نتیجه حاصل شده به صورت زیر میباشد :