我有一个锚标记用于更新gridview中的行。我在gridview中设置了复选框。当用户选中复选框并单击更新按钮时,现有行应在弹出窗口中打开..
现在弹出窗口正在打开,但没有包含现有数据的已检查行。请参阅代码供您参考: -
<a id="popup" onclick="div_show()" class="btn btn-success"><i class="fa fa-plus-circle"></i>Add new</a>
<a href="javascript:;" class="btn btn-primary" runat="server" onclick="div_show()" ><i class="fa fa-refresh"></i>Update</a>
另请参阅gridview代码供您参考: -
<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3"
AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found"
OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting"
PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating"
OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit">
<AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" />
<Columns>
<asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png">
<ControlStyle Height="20px" Width="20px"></ControlStyle>
</asp:CommandField>
</Columns>
</asp:GridView>
请帮忙,从那以后我被困了两天但是无法破解它。
绑定gridview的代码: -
private void BindGrid()
{
string strQuery = "select Id,page_title,page_description,meta_title,meta_keywords,meta_description,Active from tbl_Pages ORDER By Id DESC";
SqlCommand cmd = new SqlCommand(strQuery);
DataTable dt = GetData(cmd);
grdCSRPageData.DataSource = dt;
grdCSRPageData.DataBind();
}
另请参阅Page_load
方法; -
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
答案 0 :(得分:4)
您可以使用AjaxControlToolKit尝试此操作。
在GridView
这个事件处理程序:
OnRowCommand="grdCSRPageData_RowCommand"
将其放在GridView
:
<asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlModal" runat="server" BorderWidth="1" Style="display:none;">
<table>
<tr>
<td>page_title</td>
<td><asp:TextBox ID="txtPageTitle" runat="server" /></td>
</tr>
<tr>
<td>page_description</td>
<td><asp:TextBox ID="txtPageDescription" runat="server" /></td>
</tr>
</table>
<asp:Button ID="btnOK" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnModal" runat="server" Style="display:none;"/>
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlModal" TargetControlID="btnModal" OkControlID="btnOK" CancelControlID="btnCancel" />
在代码背后:
protected void grdCSRPageData_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Edit")
{
GridViewRow gvRow = grdCSRPageData.Rows[Convert.ToInt32(e.CommandArgument)];
txtPageTitle.Text = gvRow.Cells[0].Text;
txtPageDescription.Text = gvRow.Cells[1].Text;
upModal.Update();
mpe.Show();
}
}
protected void grdCSRPageData_RowEditing(object sender, GridViewEditEventArgs e)
{
grdCSRPageData.EditIndex = -1;
BindGrid();
}
我认为您不需要检查要修改的行,CommandField
中已经有GridView
。您只需单击编辑图像,模拟弹出窗口将填充GridView
(来自您正在编辑的行)的数据。
答案 1 :(得分:2)
这是使用ajax的解决方案。当您选中一个复选框并单击更新按钮时,jquery代码将在gridview中查找所选复选框,当它发现这将为弹出文本框中的值分配值。
此外,您必须根据将要运行的更新查询将ID存储在隐藏字段中,或者您可以使用将进行更新的任何字段。
现在当您点击弹出窗口中的更新按钮时,将发送一个ajax调用,该调用将从文本框中获取更新值并发送到webmethod。
在web方法中,您将运行更新查询。当ajax成功执行时,您将在弹出窗口中清空文本框的值并重新加载页面以查看gridview中的更改。
弹出式广告
<div id="Popup">
<table>
<tr>
<td>
Category
</td>
<td>
<input type="text" id="Category" />
</td>
</tr>
<tr>
<td>
Items
</td>
<td>
<input type="text" id="items" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Update" onclick="Openselected()" />
</td>
<td><input type="hidden" id="hdnID" /></td>
</tr>
</table>
</div>
这不会显示为弹出窗口,但您可以使用任何插件在弹出窗口中显示它,如blockui,fancybox jqueryui对话框或任何可用的插件。
Jquery代码
此函数将在文本框中指定所选行的值并打开弹出窗口。
function Openselected()
{
$('table[id$=grdTest] tr').each(function () {
if ($(this).find('input[type=checkbox]').is(':checked')) {
$('#Category').val($(this).children('td').eq('02').text());
$('#items').val($(this).children('td').eq('03').text());
$('#hdnID').val($(this).children('td').eq('01').text());
}
});
}
此函数将向webmethod发送带有更新值的ajax调用,并在弹出和重新加载页面的成功空文本框中发送更改
function UpdateGrid()
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/UpdateDB",
data: JSON.stringify({ category:$('#Category').val() , items: $('#items').val(),id:$('#hdnID').val() }),
dataType: "json",
async: false,
success: function (data) {
$('#Category').val("");
$('#items').val("");
$('#hdnID').val("");
window.location.reload(true);
},
error: function (err) {
alert(err.responseText);
}
});
}
这是webmethod
[WebMethod]
public static string UpdateDB(string category, string items,int id)
{
//Your logic of updating db.Here i am updating on basis of id you can use any feild of your choice
return "success";
}
根据您的要求,这仅适用于一行。
答案 2 :(得分:0)
检查RowDataBound方法中从gridview中选择的行。选定的行或在您的情况下检查标记的行可以在此方法中进行评估。
这里有很多参考资料..你可以使用一个 How to check if any row is selected from GridView?
答案 3 :(得分:0)
您可以查看这可能是您可以使用modelpopupextender
提供的ajaxcontroltoolkit
浏览ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox
答案 4 :(得分:0)
您可以使用telerik网格自动允许以表格形式插入和编辑。
<MasterTableView EditMode="PopUp" CommandItemDisplay="Top"><CommandItemSettings ShowAddNewRecordButton="true" ShowRefreshButton="true" />
参见Telerik Demo http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx