在使用服务器端处理时将Ajax.ActionLink添加到DataTable列? [英] Adding Ajax.ActionLink to DataTable column while using server-side processing?

问题描述

好的，所以我找不到与尝试这样做的人相关的帖子.

我有一个MVC4剃刀视图，其中包含带有供应商数据列表的jQuery DataTable.在第一列中，我添加了3个按钮:info/edit/delete，它们在表右侧的

隐藏的div中打开局部视图.我可以做一个foreach遍历模型，并使用Ajax Actionlinks和每个项目的数据列写表行；这一切都很好.

我的问题出在我决定对DataTables使用服务器端处理时，因为该列表包含数千行，并且初始页面加载非常慢.我的服务器端处理工作正常，但是我不知道如何使Ajax ActionLinks返回第一列.

作为参考，我遵循了 mRender 在锚标记中添加按钮，但是他们不工作.瞥见我可以看到我的Ajax请求返回404.链接呈现，当我将其悬停在链接上时，URL看起来不错，但是瞥见告诉我:

Ajax GET 404 - Not Found - http://localhost/Vendor/Details/1?X-Requested-With=XMLHttpRequest

这是我的HTML和代码，用于初始化DataTable:

<div id="ListContent">
<table id="VendorList">
    <thead>
        <tr>
            <th></th>
            <th>Vendor Name</th>
            <th>Vendor District</th>
        </tr>
    </thead>
    <tbody>
        @* DataTables renders the data here *@
    </tbody>
</table>
</div>

<div id="DetailContentWrapper" class="collapsed">
    <div class="closeLink"></div>
    <div id="DetailContent">
        @* info/edit/delete partial views should load here *@
    </div>
</div>

<script>
$(document).ready(function () {
    $('#VendorList').dataTable({
        "bServerSide": true,
        "sAjaxSource": '@Url.Action("AjaxHandler")',
        "bProcessing": true,
        "bJQueryUI": true,
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aoColumns": [
                        {
                            "mData": "VendorId", "bSearchable": false, "sWidth": "90px",
                            "mRender": function( data, type, full) 
                             { 
                                return '<a class="detailsButton" title="Details" href="/Vendor/Details/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> '
                                     + '<a class="editButton" title="Edit" href="/Vendor/Edit/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> '
                                     + '<a class="deleteButton" title="Delete" href="/Vendor/Delete/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> ';

                             }
                        },
                        { "mData": "VendorName" },
                        { "mData": "VendorDistrict" }
                    ]
        });
    });
</script>

我要重现的Ajax ActionLink看起来像这样:

@Ajax.ActionLink(" ", "Details", new { id = item.VendorId }, new AjaxOptions()
                                       {
                                           UpdateTargetId = "DetailContent",
                                           InsertionMode = InsertionMode.Replace,
                                           HttpMethod = "GET",
                                           LoadingElementId = "progress",
                                           OnBegin = "ExpandRightColumn"
                                       }, new { @class = "detailsButton", title="Details" })

上面的ActionLink生成的HTML是这样的:

<a class="detailsButton" title="Details" href="/VendorMap/Details/1" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a>

这就是为什么这就是我在mRender中使用的原因，但是即使结果HTML相同，mRender中的非ajax链接与MVC的连接也不相同，因此抛出了404.

我什至试图传递给mRender:

return '@@Ajax.ActionLink(" ", "Details", new { id = ' + data + ' }, new AjaxOptions() { UpdateTargetId = "DetailContent", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "progress", OnBegin = "ExpandRightColumn" }, new { @@class = "detailsButton", title="Details" })';

但是，正如预期的那样，它只是在第一栏中以文本形式显示了该块.

基本上，我需要以某种方式连接锚标签，使其像Ajax Actionlink一样起作用.抱歉，如果我不清楚，请告诉我是否还有其他信息.

---

我已经取得了一些进步，但是又被卡住了.我敢肯定，使用jQuery渲染Ajax Actionlink是不可能的，但是我能做的是调用action方法并渲染结果局部视图.我已将mRender值更新为:

"mRender": function( data, type, full) 
                             { 
                                return '<a class="detailsButton" title="Details" id="details' + data + '" onClick="showDetails(' + data + ');"> </a>'
                                     + '<a class="editButton" title="Edit" id="edit' + data + '" onClick="showEdit(' + data + ');"> </a>'
                                     + '<a class="deleteButton" title="Delete" id="delete' + data + '" onClick="showDelete(' + data + ');"> </a>';
                             }

然后我实现了以下功能:

function showDetails(id) {
    ExpandRightColumn()
    $.get('@@Url.Action("Details", "Vendor", new { id = "' + id + '"} )', function (data) {
        $('#DetailContent').html(data);
    });
}
function showEdit(id) {
    ExpandRightColumn()
    $.get('@@Url.Action("Edit", "Vendor", new { id = "' + id + '"} )', function (data) {
        $('#DetailContent').html(data);
    });
}
function showDelete(id) {
    ExpandRightColumn()
    $.get('@@Url.Action("Delete", "Vendor", new { id = "' + id + '"} )', function (data) {
        $('#DetailContent').html(data);
    });
}

ExpandRightColumn()仅显示DetailContent div，应在其中渲染所得的局部视图. $ .get(Url.Action应转到供应商控制器，调用Details/Edit/Delete操作方法，并返回呈现为html的部分视图.然后应将其粘贴到DetailContent div中.解决方案

如果将javascript放在* .js文件中，则解决方案无效.如果要创建捆绑包，则解决方案也将无法正常工作.

因此，您可以使用这种方法:

HTML

<table id="VendorList" 
data-ajax-url-details="@Url.Action("Details", "Vendor")"
data-ajax-url-edit="@Url.Action("Edit", "Vendor")"
data-ajax-url-delete="@Url.Action("Delete", "Vendor")">

Js

//for access to data :
$('#VendorList').data('url-details');

您可以按照自己的意愿完成自己的网址并添加正确的ID.

Alright, so I was unable to find any posts with people trying to do this.

I have an MVC4 razor view which contains a jQuery DataTable with a list of Vendor data. In the 1st column I have added 3 buttons: info/edit/delete, which open a partial view in a hidden div to the right of the table. I can do a foreach to loop through the model and write the table rows with Ajax Actionlinks and data columns for each item; this all works fine.

My issue came about when I decided to use server-side processing with DataTables because the list contains thousands of rows and the initial page load was very slow. I have server-side processing working fine, but I do not know how to go about getting the Ajax ActionLinks back into the 1st column.

For reference, I followed this article to get server-side processing set up with filtering, sorting, and paging and this all works fine.

I used mRender to add the buttons in anchor tags, but they do not work. In glimpse I can see my Ajax request returning a 404. The links render and when I hover on them the URL looks good, but glimpse is telling me:

Ajax GET 404 - Not Found - http://localhost/Vendor/Details/1?X-Requested-With=XMLHttpRequest

Here is my HTML and code which initializes the DataTable:

<div id="ListContent">
<table id="VendorList">
    <thead>
        <tr>
            <th></th>
            <th>Vendor Name</th>
            <th>Vendor District</th>
        </tr>
    </thead>
    <tbody>
        @* DataTables renders the data here *@
    </tbody>
</table>
</div>

<div id="DetailContentWrapper" class="collapsed">
    <div class="closeLink"></div>
    <div id="DetailContent">
        @* info/edit/delete partial views should load here *@
    </div>
</div>

<script>
$(document).ready(function () {
    $('#VendorList').dataTable({
        "bServerSide": true,
        "sAjaxSource": '@Url.Action("AjaxHandler")',
        "bProcessing": true,
        "bJQueryUI": true,
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aoColumns": [
                        {
                            "mData": "VendorId", "bSearchable": false, "sWidth": "90px",
                            "mRender": function( data, type, full) 
                             { 
                                return '<a class="detailsButton" title="Details" href="/Vendor/Details/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> '
                                     + '<a class="editButton" title="Edit" href="/Vendor/Edit/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> '
                                     + '<a class="deleteButton" title="Delete" href="/Vendor/Delete/' + data + '" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a> ';

                             }
                        },
                        { "mData": "VendorName" },
                        { "mData": "VendorDistrict" }
                    ]
        });
    });
</script>

The Ajax ActionLink I'm trying to reproduce looks like this:

@Ajax.ActionLink(" ", "Details", new { id = item.VendorId }, new AjaxOptions()
                                       {
                                           UpdateTargetId = "DetailContent",
                                           InsertionMode = InsertionMode.Replace,
                                           HttpMethod = "GET",
                                           LoadingElementId = "progress",
                                           OnBegin = "ExpandRightColumn"
                                       }, new { @class = "detailsButton", title="Details" })

The resulting HTML from the above ActionLink is this:

<a class="detailsButton" title="Details" href="/VendorMap/Details/1" data-ajax-update="#DetailContent" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-loading="#progress" data-ajax-begin="ExpandRightColumn" data-ajax="true"> </a>

which is why that is what I'm using in mRender, but even though the resulting HTML is identical, the non-ajax link in mRender is not wired the same with MVC, and is therefore throwing the 404.

I even tried to pass to mRender:

return '@@Ajax.ActionLink(" ", "Details", new { id = ' + data + ' }, new AjaxOptions() { UpdateTargetId = "DetailContent", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "progress", OnBegin = "ExpandRightColumn" }, new { @@class = "detailsButton", title="Details" })';

but, as expected, it simply displayed that chunk as text in the first column.

Basically, I need to somehow wire my anchor tag to act like an Ajax Actionlink. Sorry if I haven't been clear, let me know if there is any more information I can provide.

---

I've made some progress, but am stuck again. I'm pretty sure it's impossible to render an Ajax Actionlink using jQuery, but what I can do is call an action method and render the resulting partial view. I have updated my mRender value to:

"mRender": function( data, type, full) 
                             { 
                                return '<a class="detailsButton" title="Details" id="details' + data + '" onClick="showDetails(' + data + ');"> </a>'
                                     + '<a class="editButton" title="Edit" id="edit' + data + '" onClick="showEdit(' + data + ');"> </a>'
                                     + '<a class="deleteButton" title="Delete" id="delete' + data + '" onClick="showDelete(' + data + ');"> </a>';
                             }

Then I have implemented the following functions:

function showDetails(id) {
    ExpandRightColumn()
    $.get('@@Url.Action("Details", "Vendor", new { id = "' + id + '"} )', function (data) {
        $('#DetailContent').html(data);
    });
}
function showEdit(id) {
    ExpandRightColumn()
    $.get('@@Url.Action("Edit", "Vendor", new { id = "' + id + '"} )', function (data) {
        $('#DetailContent').html(data);
    });
}
function showDelete(id) {
    ExpandRightColumn()
    $.get('@@Url.Action("Delete", "Vendor", new { id = "' + id + '"} )', function (data) {
        $('#DetailContent').html(data);
    });
}

ExpandRightColumn() simply displays the DetailContent div, where the resulting partial view should be rendered. The $.get(Url.Action should go to the Vendor controller, call the Details/Edit/Delete action method, and return the partial view rendered as html. It should then be pasted into the DetailContent div. Here is the source.

I have tested the Url.Action and it is returning the correct URLs. When I browse to the URLs I get the correct partial view. However, when I try to do the $.get on that URL, the server is returning a 404. Any ideas?

解决方案

if you put your javascript in *.js file, the solutions don't work. if you want to create a bundle, the solutions don't work too.

so, you can use this approach :

HTML

<table id="VendorList" 
data-ajax-url-details="@Url.Action("Details", "Vendor")"
data-ajax-url-edit="@Url.Action("Edit", "Vendor")"
data-ajax-url-delete="@Url.Action("Delete", "Vendor")">

Js

//for access to data :
$('#VendorList').data('url-details');

and you can do what you want for completing your own url and add the right id.

这篇关于在使用服务器端处理时将Ajax.ActionLink添加到DataTable列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！