asp.net-mvc-3 - 一页中的两个数据表

Question

您好，我在 MVC 3 的一个部分有两个数据表，一个显示 Table_1，另一个在底部显示 Table_2。我想要这样的功能，当我双击数据表 1(在行)时，它将弹出数据表 2 formAddNewRow。有什么办法可以做到这一点？加上 Datatables 1 ID 将被发送到弹出表单。

目前我的局部 View 确实有这个:

<script type="text/javascript">
    $(document).ready(function () {
        $('#myItemPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxItemPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": true
                                },
                                { "sName": "PDSID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "PID" },
                                { "sName": "EffDate" },
                                { "sName": "ExpDate" },
                                { "sName": "G140" },
                                { "sName": "AccID" },
                                { "sName": "CCID" }

                            ]
        });
    });

    $(document).ready(function () {
        $('#myTierPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxTierPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "IPFID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "Quantity" },
                                { "sName": "Amount" },
                                { "sName": "Maximum Discount Percentage" },
                                { "sName": "Maximum Discount Amount" },
                                { "sName": "Tax 1" },
                                { "sName": "Tax 2" },
                                { "sName": "Commission" }

                            ]
        }).makeEditable({
            sUpdateURL: "../TierPriceUpdate",
            sAddURL: "../TierPriceAdd",
            sDeleteURL: "../TierPriceDelete"
        });
    });
</script>
<div class="clear">
</div>
<div id="itemPrice">
<h2>Item Pricing List</h2>
    <table id="myItemPrice" class="display">
        <thead>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </tfoot>
    </table>
</div>
<div class="clear"></div><br />
    <div id="itemPrice">
    <h2>Item Tier Price List</h2>
    <table id="myTierPrice" class="display">
    <thead>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1</th>
        <th>Tax 2</th>
        <th>Commission</th>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1</th>
        <th>Tax 2</th>
        <th>Commission</th>
    </tfoot>
    </table>
    </div>
    <div>
    <button id="btnAddNewRow" value="Ok">
        Add New Tier Price</button>
    <button id="btnDeleteRow" value="cancel">
        Delete Tier Price</button>
    </div>
    <form id="formAddNewRow" action="#" title="New Tier Price Settings">
<input type="hidden" name="ID" id="ID" value="-1" rel="0" />
<label>
    Price ID</label><br />
<input type="text" name="IPFID" id="IPFID" rel="2" /><br />
<br />
<label>
    Quantity</label><br />
<input type="text" name="Qty" id="Qty" rel="2" /><br />
<br />
<label>
    Amount</label><br />
<input type="text" name="Amt" id="Amt" rel="3" /><br />
<font color="green">Leave empty to use default pricing</font><br />
<br />
<label>
    Maximum Discount Percent</label><br />
<input type="text" name="MaxDiscPct" id="MaxDiscPct" rel="4" /><br />
<br />
<label>
    Maximum Discount Amount</label><br />
<input type="text" name="MaxDiscAmt" id="MaxDiscAmt" rel="5" /><br />
<br />
<table style="border-style:none;">
<tr><td>
<label>
    Tax 1</label><br />
<input type="text" name="Tax1" id="Tax1" rel="6" style="width:90px;" /><br />
<br /></td>
<td>
<label>
    Tax 2</label><br />
<input type="text" name="Tax2" id="Tax2" rel="7"  style="width:90px;" /><br />
<br /></td>
</tr>
</table>
<label>
    Commission</label><br />
<input type="text" name="Comm" id="Comm" rel="7" /><br />
<br />
</form>

任何提示和指南将不胜感激。谢谢。

Answer 1

我花了几个小时(!)为您重写了代码。 You can download it here

环境

• Windows 7，64 位
• 在 Visual Studio 2010 SP1 中开发
• 使用 ASP.NET 4.0 MVC 3.0
• 已通过 Internet Explorer 9.0 和 Firefox 7.0.1 测试

基础设施

我的 _Layout.cshtml block 中有以下链接和脚本。

<head>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

我在项目中添加了 3 个文件夹:

1. \Models\包含 TierPrice.cs
2. \Services\其中包含:FakeRepository1.cs 和 FakeRepository2.cs
3. \Scripts\DataTables 其中包含 jquery.dataTables.js 及其相关文件

我将其他文件夹和文件保留在新的 ASP.NET MVC 3 项目中。

注意:我注释掉了 .makeEditable() 方法(jquery.dataTables.editable 插件)，因为我从未使用过它。

等级价格等级

表示 TierPrice 的简单类。

public class TierPrice
{
    public int ID { get; set; }
    public int IPFID { get; set; }
    public int Qty { get; set; }
    public int Amt { get; set; }
    public int MaxDiscPct { get; set; }
    public int MaxDiscAmt { get; set; }
    public int Tax1 { get; set; }
    public int Tax2 { get; set; }
    public int Comm { get; set; }
}

假仓库

两个不同的假存储库只是为了模仿两个不同的数据库。

家庭 Controller

项目中唯一的 Controller 。没什么特别的。

索引方法

public ActionResult Index()
{
    ViewBag.ID = 1; // ID of table?
    return View();
}

AjaxItemPriceProvider 和 AjaxTierPriceProvider 是为 View 中的两个数据表提供数据的两个 JsonResult 方法。

    public JsonResult AjaxItemPriceProvider (int id)
    {
        /* =======================================
         Description of parameters

         * INPUT PARAMETERS:
         iDisplayLength: Number of rows in each page 
         iDisplayStart: The Number of the row that will be shown from it to iDisplayLength
         sSearch: Seach phrase
         iSortCol_0 (_n): Name of Sort field
         sSortDir_0 (_n): Direction of the sort

         * OUTPUT PARAMETERS:
         sEcho: Number of calling this method via dataTables-AJAX (1-base: in first call sEcho is 1)
         iTotalRecords: Number of total records
         iTotalDisplayRecords: 
         aaData: Return data in string array format
        * =======================================
        */

        string[][] ItemPriceRows = FakeRepository1.GetAllItemPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", ItemPriceRows.Length);
        result.Add("iTotalDisplayRecords", ItemPriceRows.Length);
        result.Add("aaData", ItemPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

    public JsonResult AjaxTierPriceProvider (int id)
    {
        string[][] TierPriceRows = FakeRepository2.GetAllTierPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", TierPriceRows.Length);
        result.Add("iTotalDisplayRecords", TierPriceRows.Length);
        result.Add("aaData", TierPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

注意:Id(即 ViewBag.ID)被传递给这些方法，而方法又将其传递给假存储库。但在这个示例中，存储库实际上并不关心它们，只是返回虚假数据。

最后是接受新行的简单方法 (TierPrice)，当然是通过 POST 操作:

    [HttpPost]
    public String AjaxAddNewTierPrice(TierPrice newTierPrice)
    {
        // TierPrice calss is defined in Models\TierPrice.cs
        string addReult = FakeRepository2.AddTierPrice(newTierPrice);
        return addReult;
    }

查看

View 可能看起来有点复杂，但其实不然。

注意我是如何描述数据表的 AJAX 路径的:

"sAjaxSource": '@Url.Action("AjaxItemPriceProvider", new { id = ViewBag.ID })',

然后在 myItemPrice 数据表中，第一列的定义如下:

{ "sName": "ID",
  "fnRender": function (oObj) { return renderAddNewRowLink(oObj); },
  "aTargets": [0],
  ...
},

renderAddNewRowLink() 非常简单:

function renderAddNewRowLink(obj) {
    var hyperlink = "<a href='javascript:void(0)' ";
    hyperlink += "onclick='showFormAddNewRow("
    hyperlink += obj.aData[0];
    hyperlink += ")'>";
    hyperlink += obj.aData[0];
    hyperlink += "</a>";
    return hyperlink;
}

注意:oObj是dataTable插件的容器对象。它应该被传递给 renderAddNewRowLink()，因此该函数可以访问包含来自 AJAX 调用的数据的 obj.aData 数组。

好的。我们快要到了。 showFormAddNewRow() 也非常简单明了。看一看:

function showFormAddNewRow(id) {
    $('#divAddNewRow').show();
    $('#divCoverBg').show();
    $('#formAddNewRow #ID').val(id);
}

注意:$('#formAddNewRow #ID').val(id) 是将 ID 从 myItemPrice 表传递到 formAddNewRow 表单的关键。

如果您熟悉Ajax.BeginForm，其余的就很清楚了，如果不熟悉，这是一个很好的例子:Using Ajax.BeginForm with ASP.NET MVC 3 Razor

注意:每次添加新的 TierPrice 后，以下函数都会强制 myTierPrice 数据表自行刷新(通过调用 AjaxTierPriceProvider)。

function addNewTierPriceCompleted(obj) {
    TierPriceTable.fnDraw();
}

我还在 site.css 中添加了 2 个样式。添加新行的过程需要这些样式。