嗨我在MVC 3中的一个部分有两个数据表，一个显示Table_1，另一个显示Table_2。我希望有这样的功能，当我双击数据表1（在行）时，它将弹出Datatables 2 formAddNewRow。有没有办法做到这一点？加上Datatables 1 ID将被发送到弹出窗体。
目前我的部分视图确实有这个：
<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>
任何提示和指南将不胜感激。谢谢。
答案 0 :(得分：2)
我花了几个小时（！）为你重写代码。 You can download it here
我在_Layout.cshtml块中有以下链接和脚本。
<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个文件夹：
我在新的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; }
}
两个不同的虚假存储库只是为了模仿两个不同的数据库。
项目中唯一的控制器。没什么特别的。
索引方法
public ActionResult Index()
{
ViewBag.ID = 1; // ID of table?
return View();
}
AjaxItemPriceProvider 和 AjaxTierPriceProvider 是两个JsonResult方法，它们为视图中的两个dataTable提供数据。
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;
}
视图可能看起来有点复杂，但事实并非如此。
注意我如何描述dataTables的AJAX路径：
"sAjaxSource": '@Url.Action("AjaxItemPriceProvider", new { id = ViewBag.ID })',
然后在myItemPrice dataTable中，第一列被定义为：
{ "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插件的容器Object。它应该传递给renderAddNewRowLink（），因此该函数可以访问obj.aData数组，该数组包含来自AJAX调用的数据。
行。我们快到了。 showFormAddNewRow（）也非常简单直接。看看：
function showFormAddNewRow(id) {
$('#divAddNewRow').show();
$('#divCoverBg').show();
$('#formAddNewRow #ID').val(id);
}
注意：$（'＃formAddNewRow #ID'）。val（id）是将myItemPrice表中的ID传递给formAddNewRow表单的关键。
如果您熟悉 Ajax.BeginForm ，其余部分是明确的，如果没有，这是一个很好的例子：Using Ajax.BeginForm with ASP.NET MVC 3 Razor
注意：以下函数在每次添加新TierPrice后强制myTierPrice dataTable自行刷新（通过调用AjaxTierPriceProvider）。
function addNewTierPriceCompleted(obj) {
TierPriceTable.fnDraw();
}
我还在site.css中添加了2个样式。添加新行的过程需要这些样式。