by John Avis | July 14, 2015 | Bootstrap ASP.NET Web Forms
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<ul>
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<li><asp:LinkButton ID="Button1" runat="server" CommandArgument='<%# Eval("ID") %>' Text='<%# Eval("Title") %>'></asp:LinkButton></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="Panel1" runat="server" CssClass="modal" DefaultButton="btnContactInsertSubmit" tabindex="-1" role="dialog" aria-labelledby="myLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-header">
<h4 class="modal-title" id=" myLabel ">Edit</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Submit" />
<asp:LinkButton ID="Button3" runat="server" CssClass="btn btn-link" OnClick="Button3_Click" Text="Cancel"></asp:LinkButton>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</asp:Panel>
protected void repContact_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
int id = Utilities.IntParse(e.CommandArgument.ToString());
//Populate your form inside the Modal here
ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "show", "$(function () { $('#" + Panel1.ClientID + "').modal('show'); });", true);
UpdatePanel2.Update();
}
protected void Button3_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "hide", "$(function () { $('#" + Panel1.ClientID + "').modal('hide'); });", true);
UpdatePanel1.Update();
}
protected void Button2_Click(object sender, EventArgs e)
{
//Save your record here
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "hide", "$(function () { $('#" + Panel1.ClientID + "').modal('hide'); });", true);
UpdatePanel1.Update();
}
by John Avis | March 26, 2018
In responsive design there are times when on a mobile screen you want to hide some options with a button to show them, but on a large screen always show these options.
by John Avis | March 8, 2018
Fixed navbars – that stay at the top of the screen at all times – are common and useful, but sometimes annoying as they can block the top part of the page (sometimes obscuring page anchors).
by John Avis | February 9, 2018
On an ASP.NET Web Forms page with multiple UpdatePanels it’s nice to give the user some feedback when one of the panels is being updated.
Comments
by Mark | June 19, 2016
Thanks. I was looking for this
Reply
by Barry Michael Doyle | July 11, 2016
Thanks man! What a great help :) It helped me instantly with all my problems!!
Reply
by .... | September 22, 2016
Thank You So Much.Great help.
Reply
by Francisco Huit | February 20, 2017
gracias, llevaba aproximadamente 35 horas buscando esta solución y lo único que me faltaba era hacer esto
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "hide", "$(function () { $('#" + Panel1.ClientID + "').modal('hide'); });", true);
crear una función para llamar al modal y no llamarla directamente desde una etiqueta script
Reply
by Andrea Marchi | July 21, 2017
Thank you. I've solved all my problems.
Reply
by Yuki Gunawan | February 6, 2018
Wonderful thanks you, i have been a week searching for this
Thanks you John Avis
Reply
by VincentTaf | March 16, 2018
it's a really great site!A lot of helpful information and handy ideas, thank you =)
Reply