asp.net MVC-如何制作母版页/详细页 [英] asp.net MVC - How to do a master/detail page
问题描述
我希望创建一个母版页/详细页.我看到它以两种方式之一工作:
I wish to create a master/detail page. I see it working one of two ways:
- 单击网格中的一行会再次调用同一页面,并添加一个详细信息面板.
- 单击一行将对控制器动作进行javascript/JSON调用,该控制器动作将返回详细信息并填充面板.
我希望选中的行突出显示.所选的行可能是分页网格中的几页.
I would like the selected row to be highlighted. The selected row could be several pages into a paged grid.
听起来很简单.不幸的是,我是asp.net MVC的新手,并且我不是一位经验丰富的程序员.但是,我可以遵循并改编示例.我希望通过上述两种方法的示例来帮助我学习MVC.
Sounds easy. Unfortunately I'm new to asp.net MVC, and I'm not an experienced programmer. However, I can follow and adapt examples. I would appreciate examples of both the above methods to help me learn MVC.
谢谢.
推荐答案
要回答我自己的问题:
我最终使用了PartialViews和jQuery.
I ended up using PartialViews and jQuery.
在针对某一行的选择链接上单击会导致将新行添加到所选行的下方(使用jQuery).在这一行中,我使用jQuery来获取/PurchaseOrder/Detail(一个PartialView).
Clicking on a select link against a row causes a new row to be added below the selected one (using jQuery). Into this row I use jQuery to GET /PurchaseOrder/Detail (a PartialView).
这是我的Javascript:
Here is my Javascript:
function GetDetails(id, enableEdit) {
var detailsRowExists = $().find("#detailsRow").size();
if (detailsRowExists) {
// Delete details row
// Note: need to rename id for row to be deleted
// because jQuery does not wait for the row to be
// deleted before adding the new row.
$("#detailsRow").attr("id", "detailsRowOld");
$("#detail").slideUp("normal", function() {
$("#detailsRowOld").remove();
});
};
// Put new row below selected one
$("tr[id=" + id + "]").after("<tr id='detailsRow'><td colspan='4'><div id='detail'><img src='../../Content/wait20trans.gif' />Loading...</div></td></tr>");
// Pull details into new row
$.get("/PurchaseOrder/Detail/" + id, { enableEdit: enableEdit },
function(data) {
$("#detail").hide();
$("#detail").html(data);
$("#detail").slideDown("normal");
}
);
}
希望这可以帮助其他尝试获得母版页/详细信息页的人.
Hopefully this may helps others trying to achieve a master/details page.
这篇关于asp.net MVC-如何制作母版页/详细页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!