Kendo UI Ajax 请求答案

【问题标题】：Kendo UI Ajax RequestKendo UI Ajax 请求
【发布时间】：2013-09-30 20:40:25
【问题描述】：

我正在使用Kendo UI Grid 与指向客户端模板列的操作链接。此操作链接调用数据编辑视图。见例子：

 c.Bound(p => p.sID).ClientTemplate(@Html.ImageActionLink(Url.Content("~/Content/images/edit3.png"), "Edit", "Edit", new { id = "#= sID #" }, new { title = "Edit", id = "Edit", border = 0, hspace = 2 }).ToString()
                           ).Title("").Width(70).Filterable(false).Groupable(false).Sortable(false);

我的问题是如何配置网格以便在单击操作链接时显示 ajax 加载器，直到呈现编辑视图？

【问题讨论】：

标签： ajax razor grid kendo-ui actionlink

【解决方案1】：

您可以创建相对 div 并在其中插入您的网格和加载器包装器：

<div class="grid-wrapper">
    <div class="loading-wrapper">
        <div class='k-loading-image loading'></div>
        <!-- k-loading-image is standart kendo class that show loading image -->
    </div>
    @(Html.Kendo().Grid()....)
</div>

css:

.grid-wrapper {
    position: relative;
}
.loading-wrapper {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.loading {
    position: absolute;
    height: 4em;  
    top: 50%;
}

添加到名为“edit”的htmlAttributes对象类中的imageActionLink（例如），并编写click事件处理程序：

$(document).on('click', '.edit', function (e) {
    $('.loading-wrapper').show();
    $.ajax({
        // ajax opts    
        success: function(response) {
             // insert your edit view received by ajax in right place
             $('.loading-wrapper').hide();
        }
    })
});

【讨论】：

【解决方案2】：

你可以这样做：

c.Bound(p => p.sID).Template(@<a href=\"YourLink\@item.sID\">Edit</a>).Title("Edit").Encoded(false); 
//encoded false = Html.Raw

【讨论】：