javascript 使用 Ajax 填充 Gridview
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20465104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populating Gridview Using Ajax
提问by Indranil.Bharambe
i have two gridview. on click of one row of one grid i have to populate another gridview. so onClientclick javascript function i called ajax which returns datatable for populating another grid. Now i am stuck how to bind grid view using javascript.
我有两个网格视图。单击一个网格的一行时，我必须填充另一个网格视图。所以我调用了 ajax 的 onClientclick javascript 函数，它返回用于填充另一个网格的数据表。现在我被困在如何使用 javascript 绑定网格视图。
here is code
这是代码
<asp:gridview id="gridview1"> .....</asp:gridview>
<asp:gridview id="gridview2"> .....</asp:gridview>
codebehind
代码隐藏
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton db = (LinkButton)e.Row.Cells[0].Controls[0];
db.OnClientClick = "FunPopulateSecondGrid(" + CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Label).text + ");"
}
}
javascript
javascript
function FunPopulateSecondGrid(productid)
{
$.ajax({
url : '...',
data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
method : 'GET',
dataType : 'json',
contentType: "application/json; charset=utf-8",
success : function(data) {
// i am stuck here how to bind it
//gridview2.datasource= data
//gridview2.databind()
},
error : function(xhr, status) {
alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
}
});
}
回答by Sain Pradeep
You need to append the data to gridview in success section like this
您需要像这样在成功部分将数据附加到 gridview
If you have gridview with Id "gridview2"
如果您有 ID 为“gridview2”的 gridview
function FunPopulateSecondGrid(productid)
{
$.ajax({
url : '...',
data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
method : 'GET',
dataType : 'json',
contentType: "application/json; charset=utf-8",
success: function (data) { //you need to append the data to gridview
for (var i = 0; i < data.d.length; i++) {
$("#gridview2").append("<tr><td>" + data.d[i].ProductName +
"</td><td>" + data.d[i].Price + "</td></tr>");
},
error : function(xhr, status) {
alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
}
});
}
Please find complete solution here :Bind GridView with Jquery
请在此处找到完整的解决方案：使用 Jquery 绑定 GridView
回答by Jignesh Suvariya
Here Scott Guthrei blog "Tip/Trick: Cool UI Templating Technique to use with ASP.NET AJAX for non-UpdatePanel scenarios", this is exact sample for which you are looking.
在 Scott Guthrei 博客“提示/技巧：与 ASP.NET AJAX 一起用于非 UpdatePanel 场景的酷 UI 模板技术”，这正是您正在寻找的示例。
Note:Here he use asp.net ajax with script manager but you can replace that portion with jQuery ajax.
注意：这里他使用 asp.net ajax 和脚本管理器，但您可以用 jQuery ajax 替换该部分。
