من اخیرا یک خط ناهمگام برای MVC view خود نوشته ام که که یک لیستی از کاربران را نمایش میدهد. من میخواهم صفحه نمایشی به گونه ای باشد که هر کاربر بدون بروزرسانی صفحه تغییر داده شود.

ارتباط View با کنترلر از طریق Ajax و تبادل اطلاعات توسط Json

من اخیرا یک Pipeline  ناهمگام برای Mvc View  خود نوشته ام که که یک لیستی از کاربران را نمایش میدهد. من میخواهم صفحه نمایشی به گونه ای باشد که هر کاربر بدون بروزرسانی صفحه تغییر داده شود. این مقاله آموزش میدهد که من چگونه این کار را انجام میدهم.

من اخیرا یک Pipeline ناهمگام برای MVC View خود نوشته ام که که فکر میکنم میتواند برای بسیاری از شما مفید باشد.

MVC View یک Kendo Grid است. اما این از منبع داده Kendo JSON استفاده نمی کند.زیرا من از کتابخانه  Open Source Kendo UI Core grid     استفاده میکنم.

کامپوننت های Kendo Ui Core  فایل های ساده جاوا اسکریپی هستند که شما در پروژه های خود استفاده میکنید و آنها در مواقع ضروری صدا میزنید..

در این مثال، من از API برای بارگذاری محتویات استفاده نمیکنم. من به راحتی یک جدول ایجاد میکنم و اجازه میدهم تا MVC Razor   آنرا تحویل دهد.

سپس در جاوا اسکریپ من، من متدهای Kendo Java Script  را فراخوانی نموده برای قالب بندی و کامل کردن Grid Render  .

Kendo Ui Core به ما قابلیت های خیلی مفیدی مانند صفحه گذاری، مرتب سازی، فیلترینگ، مرتب سازی ستون ها و مانند این میدهد. پس این همان چیزی است که جدول من به نظر میرسد. شما خواهید دید که من از Bootstrap استفاده کرده ام.

    <div class="col-md-12">  
    <table id="user-grid" class="table table-bordered table-striped">  
    <thead>  
    <tr>  
        <th>@Html.DisplayNameFor(model => model.Id)</th>  
        <th>@Html.DisplayNameFor(model => model.UserName)</th>  
        <th>@Html.DisplayNameFor(model => model.FirstName)</th>  
        <th>@Html.DisplayNameFor(model => model.LastName)</th>  
        <th>@Html.DisplayNameFor(model => model.Email)</th>  
        <th>@Html.DisplayNameFor(model => model.IsVisible)</th>  
        <th></th>  
    </tr>  
    </thead>  
    <tbody>  
    @foreach (var item in Model) {  
    <tr>  
        <td>@Html.DisplayFor(modelItem => item.Id)</td>  
        <td>@Html.DisplayFor(modelItem => item.UserName)</td>  
        <td>@Html.DisplayFor(modelItem => item.FirstName)</td>  
        <td>@Html.DisplayFor(modelItem => item.LastName)</td>  
        <td>@Html.DisplayFor(modelItem => item.Email)</td>  
        <td>@Html.DisplayFor(modelItem => item.IsVisible)</td>  
        <td></td>  
    </tr>  
    }  
    </tbody>  
    </table>  
    </div>  

پس یک جدول قالب بسیار زیبا داریم.اما من نمیتوانم با رکوردها در این هر کاری انجام دهم. Kendo  این قابلیت را به ما میدهد. شما در کدهای بالا خواهید دید که یک ستون هدر جدول خالی وجود دارد و همچنین یک سلول جدول خالی برای هر سطر. ما میتوانیم Kendo را به  دکمه render command در هر سطر از جدولمان پیکربندی کنیم. و این تمام عملیات موفق Javascript در view است.ما از ID جدول به عنوان انتخاب کننده برای Kendo Java Script  استفاده خواهیم کرد.

$(function() {  
    $("#user-grid").kendoGrid({  
        height: 500,  
        sortable: true,  
        resizable: true,  
        reorderable: true,  
        columnMenu: true,  
        columns: [  
            { field: "Id", title: "ردیف", width: 50 },  
            { field: "UserName", title: "نام کاربری", width: 120 },  
            { field: "FirstName", title: "نام" },  
            { field: "LastName", title: "نام خانوادگی" },  
            { field: "Email", title: "ایمیل" },  
            { field: "IsVisible", title: "قابل رویت", width: 100 },  
            {  
                command: [  
                    { text: "ویرایش", click: editItem },  
                    { text: "حذف", click: deleteItem }  
                ],  
                title: " ",  
                width: 200  
            }  
        ]  
    });  
});

جزئیات ستون ها دارای یک چزئیات دستوری هست که به شما اجازه میدهد تا دکمه های دستوری را پیکربندی نموده برای همه ستون ها که میخواهید. شما میتوانید ببینید که من میخوام 2 دکمه فرمان ایجاد کردم یک دکمه ویرایش و یک دکمه حذف هر کدام از این فرمانها، دارای یک متد کلیک هستند که میتواند اشاره کند به توابع Java Script ی که شما میخواهید. در اینجا یک تابع ویرایش Java Script وجود دارد که من برای این 2 دکمه فرمان استفاده میکنم.

function editItem(e) {  
    // stop the button doing it's default behaviour  
    e.preventDefault();  
    // get the button's parent row so we can get data from the columns    
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));  
    // build the URL for the MVC action that will do something useful with the data  
    var baseUrl = '@Url.Action("Edit", "Users")';  
    // a function that navigates to the action (I re-use this in the next command button function too)  
    go(baseUrl + "/" + dataItem.Id);  
}  
function go(url) {  
    window.location = url;  
} 

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

اما فرمان حذف متفاوت است. ما نباز به رفتن به یک View و انجام حذف برای رکوردها نیستیم. ما در واقع میخواهیم فقط روی دکمه کلیک نموده، MVC رکورد را حذف نموده و صفحه را بروزرسانی کرده وپیغامی جهت اینکه آیا این عملیات به درستی انجام شده با نه نمایش بدهد.

این جایی است که MVC ناهمگام فراخوانی میشود. ما فقط میتوانیم زمانی که برروی دکمه حذف کلیک شد و به صفحه Grid بازگشت کار تمام شده و برای کاربر یک View ارسال شود و  به UI میرود. سپس ما از یک Action Result  برای فراخوانی Json Result  برای ناهمگام سازی حذف و بازگشت پیغام نتیجه برای کاربر استفاده میکنیم.

در ابتدا، ما به شما تابع حذف JavdScript را نشان میدهیم. من از یک کامپوننت برای فراخوانی BootstrapDialog جهت نمایش یک Dialog سریع بسیار زیبا استفاده میکنم. این صفحه میپرسد: آیا شما کاربر هستید؟

    function deleteItem(e) {  
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));  
        BootstrapDialog.show({  
            title: 'حذف یک مورد',  
            message: 'کاربر برای همیشه حذف خواهد شد و توانایی ورود به سیستم را نخواهد داشت.آیا مطمئن هستید؟',  
            buttons: [  
            {  
                label: 'Yes',  
                action: function(dialog) {  
                    $.ajax({  
                        url: '@Url.Action("Delete", "Users")',  
                            type: 'POST',  
                            data: { 'id': dataItem.Id },  
                            success: function (result) {  
                                var r = JSON.parse(result);  
                                toastr.success(r.Message);  
                                $("#user-grid").refresh();  // not yet implemented  
                                dialog.close();  
                            },  
                            error: function(result) {  
                                toastr.error(result.Message);  
                                dialog.close();  
                            }  
                        });  
                    }  
                }, {  
                    label: 'خیر',  
                    action: function(dialog) {  
                        // not yet implemented  
                    }  
                }  
            ]  
        });  
    }  

من برای شما در چند مورد شرح خواهد که که وقتی روی دکمه حذف کلیک میکنید چه فرایندی اتفاق می افتد.

پیغامی ظاهر شده و از کاربر میپرسد که ایا از حذف مورد اطمینان دارید؟ که کاربر بر روی کلمه yes   کلیک میکند.

 Javascript-2 یک عمل HTTP Post به Action کاربر انجام میدهد.

3-Action بالا یک پیغام نتیجه JSON بازمیگرداند.

4- Ajax مشخص میکند که عملیات Post با موفقیت انجام شده است یا خیر

5-نتیجه JSON تجزیه و نمایش داده شده در یک پیغام

JavaScript  -6 در آخر Kendo Grid را برزورسانی میکند.

برای ایجاد تمام این عملیات ها، عملیات MVC باید یک شی JSON بازگرداند که تابع JavaScript میتواند آن راتحلیل کند. در اینجا یک تکه کد برای متد حذف کاربر طراحی شده است.

[HttpPost]  
public JsonResult Delete(int id)  
{  
    string errMessage;  
    bool delete = _builder.DeleteUser(id, out errMessage);  
    ViewModelJson result = new ViewModelJson()  
    {  
        Result = delete,  
        Message = errMessage  
    };  
    var serializer = new JavaScriptSerializer();  
    var serializedResult = serializer.Serialize(result);  
    return Json(serializedResult);  
}  
///   
/// A custom class with properties that carry useful data back to the client.   
/// You can extend this class as much as you like to transport more data if you want  
///   
public class ViewModelJson  
{  
    public bool Result { get; set; }  
    public string Message { get; set; }  
} 

در پایان، متد بالا سریال Json را به View بازمیگرداند.View  عملیات تجزیه Json را انجام داده و تصمیم میگیرد که آن را به کاربر ارائه دهد.