در این مقاله همراه با ایجاد نمونه ای که در آن عملیات ویرایش و حذف کاربر به صورت Ajax انجام می شود به توضیح نحوه رفع خطاهای ajax می پردازیم

برای چک کردن مشکلات مربوط به JQuery یا Ajax اول چک کنید فایلی که در حال ویرایش آن هستید همان فایلی است که جی کوئری به آن وصل شده است.مرحله بعد این است که مطمئن شوید سورس JQuery یا Ajax  درست است. یعنی آدرس دهی را چک کنید .در قدم بعدی فایل اصلی JQuery  حتما اولین فایل در بین اسکریپت ها باشد.در غیر اینصورت مرورگر قادر به تشخیص فایل های jquery نخواهد بود.مورد قابل ذکر دیگر اینکه از چند فایل جاوااسکریپت به طور همزمان استفاده نکنید چون اینها با هم تداخل دارند.در ضمن آخرین نسخه شامل تمامی امکانات و تغییرات می باشد.

اینها مسائل ساده ای برای رفع مشکلات مربوط به جاوااسکریپت و jQuery بود در ادامه روش Handle کردن خطاهای جاوااسکریپت و jQuery در MVCخواهیم دید

زمانی که کد ajax به درستی کار کند قسمت success اجرا خواهد شد و اگر مشکلی پیش بیاید کدهای داخل errore اجرا می شوند یعنی کدهای رفع خطا را در اینجا می نویسیم.

در نمونه ای که ضمیمه این مقاله می باشد به صورت ساده یک دیتابیس از نوع LocallDB ایجاد می کنیم .در این دیتابیس فقط یک جدول به نام register ایجاد می کنیم . مانند سایر پروژه های MVC احتیاج به مدل داریم .مدلی که ایجاد می کنیم از نوع Entity Framework و از نوع database First می باشد.بعد از ایجاد مدل یک کنترلر از نوع mvc Controller With Views Using Entity framework و با مدل register ایجاد می کنیم .با کمک Scaffolding تمام صفحات مربوط به حذف ، ویرایش ، ایجاد و نمایش جزئیات مربوط به مدل (register) ایجاد می شود .

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

ابتدا در کنترلر رجیستر اکشن (Action)مربوط  به ویرایش و حذف  را به صورت partial View() تغییر می دهیم .

در داخل صفحه ایندکس برای ویرایش و حذف از Glyphicon های Bootstrap استفاده می کنیم .در پایین همین صفحه در داخل script کدهای مربوط به ajax این دکمه ها را نوشته و کاری می کنیم که view مربوط به این صفحات در داخل modal باز شود.کد های مربوط به صفحه ایندکس به صورت زیر خواهد بود

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("ایجاد کاربر جدید", "Create")
</p>
<div id="list">
    @Html.Action("list")
</div>
@section scripts
{
    <script src="~/Human_JS/humane.min.js"></script>
<link href="~/Human_JS/humane_js_themes/original.css" rel="stylesheet" />
    <script>
        function Edit(id) {
            $.ajax({
                url: "/registers/Edit/"+id,
                type: "Get"
            }).done(function (result) {
                $('#myModal').modal('show');
                $('#myModalLabel').html('ویرایش گروه');
                $('#bodymodal').html(result);
            });
        }

       function Delete(id) {
           $.ajax({
               url: "/registers/Delete/" + id,
               type: "Get"
           }).done(function(result) {
               $('#myModal').modal('show');
               $('#myModalLabel').html('ویرایش گروه');
               $('#bodymodal').html(result);
           });
       }
        function Success() {
            $('#myModal').modal('hide');
            humane.log('تغییرات انجام شد');
        }

    </script>
}

همان طور که دیدید بعد از نوشتن تابع ajax دو نوع تابع به نام های Success و errore وجود دارد که اگر کدهای ajax به درستی اجرا شوند کدهای موجود در قسمت success که در ورژن های جدید به نام done می باشد اجرا می شود و اگر این کدهای خطا داشته باشند کدهای موجود در قسمت errore اجرا می شوند.

تا این لحظه دکمه های مربوط به ویرایش و حذف را به صورت ajax پیاده سازی کرده و فرم view آنها را در داخل modal نمایش داده ایم .برای اینکه عملیات مربوط به Post هم به صورت ajax باشد

در قسمت view مربوط به ویرایش،  html.beginform را به Ajax.beginform تغییر می دهیم . کد کامل صفحه ویرایش به صورت زیر است

@model erroreHandler.Models.register
@{
    ViewBag.Title = "Edit";
}
<h3>ویرایش</h3>
@using (Ajax.BeginForm("Edit","registers",new AjaxOptions()
{
    UpdateTargetId = "list",
    OnSuccess = "Success",
}))
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
   <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <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.family, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.family, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.family, "", 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-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

در view مربوط به حذف هم همان تغییرات مربوط به ویرایش را ایجاد می کنیم

@model erroreHandler.Models.register

@{
    ViewBag.Title = "Delete";
}
<h4>آیا از حذف این مورد اطمینان دارید؟</h4>
<div>

    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.name)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.family)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.family)
        </dd>

    </dl>

    @using (Ajax.BeginForm("Delete", "registers", new AjaxOptions()
{
    UpdateTargetId = "list",
    OnSuccess = "Success",
}))
    {
        @Html.AntiForgeryToken()

        <div class="form-actions no-color">
            <input type="submit" value="Delete" class="btn btn-default" /> |
            @Html.ActionLink("Back to List", "Index")
        </div>
    }
</div>

کاری که تاکنون انجام شده است نمایش فرم های ویرایش و حذف در داخل modal و همچنین عملیات post آنها به صورت ajax بوده است .برای اینکه نتایج حاصل از ویرایش و حذف همان لحظه نمایش داده شود و نیازی به رفت و برگشت به سرور نباشد(یعنی به روز رسانی صفحه هم به صورت ajax) باشد در داخل صفحه ایندکس که اطلاعات ما نمایش داده می شود این قسمت را داخل یک div به نام list قرار می دهیم .برای این list یک Action می نویسیم به نام .list این action یک partial view به نام list و با مدل db.registers.tolist() برمی گرداند.

حال در داخل ایندکس و در div با id=”list” کد @html.action(list) را می نویسیم تا محتویات Partial view لیست را برگرداند.

<div id="list">
    @Html.Action("list")
</div>

اگر دقت کرده باشید در صفحات ویرایش و حذف و در داخل UpdateTargetUrl=”List” را نوشته ایم .این کار باعث می شود حاصل کار ویراش و حذف باعث به روزرسانی list شود .

@using (Ajax.BeginForm("Edit","registers",new AjaxOptions()
{
    UpdateTargetId = "list",
    OnSuccess = "Success",
}))