Jquery 数据表 HTML actionlink,如何使用 foreach 添加编辑按钮

问题描述

我已经为此苦苦挣扎了一段时间,但我不知道如何解决

我决定使用数据表,但我无法在我以前的模型上使用它,一切正常,但 EDIT 按钮甚至不起作用。不想使用 AJAX 之类的,只是在我的 FOREACH 中检索到的信息

这是我的代码(请注意我使用了 foreach):

@model IEnumerable<WebApplication.Models.Approval>

@{
    ViewData["Title"] = "Approvals";
}

<h1>Approvals</h1>

<table class="table" id="Exampledatatable">
    <thead>
        <tr>
            <th>
                @Html.displayNameFor(model => model.CODE)
            </th>
            <th>
                @Html.displayNameFor(model => model.EMAIL)
            </th>
            <th>
                @Html.displayNameFor(model => model.FirsTNAME)
            </th>
            <th>
                @Html.displayNameFor(model => model.LASTNAME)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                @Html.displayFor(modelItem => item.CODE)
            </td>
            <td>
                @Html.displayFor(modelItem => item.EMAIL)
            </td>
            <td>
                @Html.displayFor(modelItem => item.FirsTNAME)
            </td>
            <td>
                @Html.displayFor(modelItem => item.LASTNAME)
            </td>
            <td>
                @Html.ActionLink("EDIT","Edit",new { id = item.code })    
            </td>
        </tr>
        }
    </tbody>
</table> 

问题出在我的脚本

我尝试使用这样的方法

<script type="text/javascript">    
    $(document).ready(function () {
        $('#myDataTable').dataTable({
            aoColumns: [
                      null,// first column (CODE)
                      null,// second column (EMIAL)  
                      null,// third (FirsTNAME)
                      null,// fourth (LASTNAME)

                      {     // fifth column (Edit link)
                        "sName": "CODE","bSearchable": false,"bSortable": false,"fnRender": function (oObj)                              
                        {
                            // oObj.aData[0] returns the CODE
                            return "<a href='/Edit?id=" 
                                + oObj.aData[0] + "'>Edit</a>";
                        }
                       }

                   ]
     });  
}); 
</script>

我怎样才能让它工作?可以帮我吗?


编辑:

@model IEnumerable<WebApplication.Models.Approval>

@{
    ViewData["Title"] = "Approvals";
}

<h1>Approvals</h1>

<table class="table" id="Exampledatatable">
    <thead>
        <tr>
            <th>
                @Html.displayNameFor(model => model.CODE)
            </th>
            <th>
                @Html.displayNameFor(model => model.EMAIL)
            </th>
            <th>
                @Html.displayNameFor(model => model.FirsTNAME)
            </th>
            <th>
                @Html.displayNameFor(model => model.LASTNAME)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                @Html.displayFor(modelItem => item.CODE)
            </td>
            <td>
                @Html.displayFor(modelItem => item.EMAIL)
            </td>
            <td>
                @Html.displayFor(modelItem => item.FirsTNAME)
            </td>
            <td>
                @Html.displayFor(modelItem => item.LASTNAME)
            </td>
            <td>
                @Html.ActionLink("EDIT",new { id = item.code })    
            </td>
        </tr>
        }
    </tbody>
</table> 

我正在使用它,但它不适用于 Jquery 数据表:

<td>
    @Html.ActionLink("EDIT",new { id = item.code })    
</td>

如果我运行此代码,我的应用程序就可以正常工作:

@model IEnumerable

@{
    ViewData["Title"] = "Approvals";
}

<h1>Approvals</h1>

<table class="table" id="Exampledatatable">
    <thead>
        <tr>
            <th>
                @Html.displayNameFor(model => model.CODE)
            </th>
            <th>
                @Html.displayNameFor(model => model.EMAIL)
            </th>
            <th>
                @Html.displayNameFor(model => model.FirsTNAME)
            </th>
            <th>
                @Html.displayNameFor(model => model.LASTNAME)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                @Html.displayFor(modelItem => item.CODE)
            </td>
            <td>
                @Html.displayFor(modelItem => item.EMAIL)
            </td>
            <td>
                @Html.displayFor(modelItem => item.FirsTNAME)
            </td>
            <td>
                @Html.displayFor(modelItem => item.LASTNAME)
            </td>
            <td>
                @Html.ActionLink("EDIT",new { id = item.code })    
            </td>
        </tr>
        }
    </tbody>
</table> 

当我尝试使用 JS 和 HTML ACTION LINK 实现 DATATABLE 时,问题就出现了。

@section scripts{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/af-2.3.5/datatables.min.css" />

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/af-2.3.5/datatables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#Exampledatatable').DataTable({


            })
        });
    </script>

无论我怎么努力都无法让它发挥作用

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)