Question

好吧，所以我无法找到任何人试图这样做的帖子。

我有一个MVC4剃刀视图，其中包含一个带有供应商数据列表的jQuery DataTable。在第1列中，我添加了3个按钮：info / edit / delete，其中在表格右侧打开隐藏div 中的局部视图。我可以做一个foreach循环遍历模型并使用Ajax Actionlinks和每个项目的数据列编写表行;一切正常。

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

作为参考，我按照 this article 来设置服务器端处理过滤，排序和分页，这一切都正常。

我使用 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应该转到Vendor控制器，调用Details / Edit / Delete操作方法，并返回呈现为html的局部视图。然后应将其粘贴到DetailContent div。Here is the source中。

我测试了Url.Action，它返回了正确的网址。当我浏览到URL时，我得到了正确的局部视图。但是，当我尝试在该URL上执行$ .get时，服务器返回404.任何想法？

Answer 1

我得到了它的工作。显然，Url.Action助手返回了一个错误的URL。当我刚刚对URL进行硬编码时，一切正常。

我现在有一个DataTable，它使用服务器端处理，第一列有3个按钮，可以将详细信息/编辑/删除部分视图加载到右侧隐藏的div中。

如果有人想查看完整代码，请与我们联系。

Answer 2

如果您将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。

使用服务器端处理时将Ajax.ActionLink添加到DataTable列？

2 个答案:

HTML

的js