0

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

我有一个 MVC4 剃须刀视图，其中包含一个带有供应商数据列表的 jQuery DataTable。在第一列中，我添加了 3 个按钮：信息/编辑/删除，它们在表格右侧的隐藏 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 是不可能的，但我可以做的是调用一个操作方法并渲染生成的局部视图。我已将 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。这是源代码。

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

4

2 回答 2

0

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

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

如果有人想查看完整代码，请告诉我。

于 2013-08-08T21:33:37.910 回答
0

如果您将 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');

你可以做你想做的事来完成你自己的 url 并添加正确的 id。

于 2013-08-11T02:45:23.820 回答