Update an UpdatePanel after a button click event - javascript

I would explain better my problem and I would make lots of edits in order to clarify:
Markup
<asp:ScriptManager runat="server" />
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" >
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<asp:Button runat="server" Text="Chiudi" class="btn btn-danger" data-dismiss="modal" />
<asp:Button runat="server" ID="btn_Save" Text="Salva" class="btn btn-success" ValidationGroup="valGroup2" />
</div>
</div>
</div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" data-target="#myModal" class="btn btn-primary" data-toggle="modal"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" >
<ContentTemplate>
<asp:GridView ID="grd_elenco" runat="server" CssClass="table table-bordered table-hover" data-toggle="modal">
</asp:GridView>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
VB.NET:
Private Sub btn_Save_Click(sender As Object, e As EventArgs) Handles btn_Save.Click
Label1.Text = "test"
UpdateSomeDataInGrid()
UpdatePanel1.Update()
End Sub
I would Update only the UpdatePanel with btn_Save with a partial postback instead of full postback. I need to Update the panel after UpdateSomeDataInGrid(), someone know how to do that?
I've tried to add UpdatePanel1.Update(), but all page is postback.

The reason is that btnSave is not inside the UpdatePanel. As things stand, that means it will always cause a full page postback.
To achieve a partial page postback with an UpdatePanel, place the postback control inside the UpdatePanel.
So you need to move btnSave inside the UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Button runat="server" ID="btn_Save" Text="Salva" class="btn btn-success" ValidationGroup="valGroup2" />
.
.
.
Alternatively, if it suits your design better, move your entire div that contains btnSave inside the UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
.
.
.
Or place btnSave in its own UpdatePanel. This will avoid the full page postback, while your handler can still update UpdatePanel1.

Related

Trigger a Bootstrap Modal Pop-up from Code-behind not working

Good day!
I have been following this post for launching a bootstrap modal popup from my code behind but unfortunately it is not working.
Script
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Button
<asp:LinkButton class="alert alert-warning" ID="LinkButton1" runat="server" OnClick="UpdateItem_click" CommandArgument='<%# Eval("Id") %>' >Update</asp:LinkButton>
Code Behind
protected void UpdateItem_click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">title
</h4>
</div>
<div class="modal-body">
<asp:TextBox runat="server" ID="Username_Update" CssClass="form-control" />
<asp:TextBox runat="server" ID="bookId2" CssClass="form-control" />
<input type="text" runat="server" id="Username_Update2" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
close
</button>
<button type="button" class="btn btn-primary">
save
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
Instead of using a Button just like from the post, I used a LinkButton because I wanted a certain value to be passed in my code behind then select all data needed and populate the modal which will then be launched using this code behind code.
Unfortunately, the modal is not showing and I have no idea whether the code is working properly or not.
Thanks in advance
Ok. I have found the problem. I found out(with the help of a colleague) that my button's OnClick function was not working. Since I have a Validator in my page, I've tried adding each button with this code CausesValidation="false" and now the code works perfectly.

LinkButton in gridview to open modal at the position the scroll is in but it refreshes page back to the top and opens modal and

I have a gridview that has a template field which contains a link button. When the user clicks on this link button I am calling an OnClick event DisplayModal which runs a method to get the dynamic values to from the database to a datatable to bind to the modal gridview. This method runs ClientScript.RegisterStartupScript to call jquery function openModal() which shows the modal. This works fine.
I have three gridviews on the page. When i scroll down the second gridview and click on the link button the modal opens with the correct values on the modal but it refreshes the page so the scrollbar is back at the top rather than where i clicked on the gridview and then opens the modal.
I want to prevent it from refreshing the page. I have got an update panel around the gridview and PostBackTrigger tag after the modal.
protected void DisplayModal(object sender, EventArgs e)
{
int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
GridViewRow row = gvTeamCAOTDashboard.Rows[rowIndex];
row.Focus();
MeasurecodeClicked = (row.FindControl("lnkBtnEdit") as LinkButton).Text;
GetKPICriteria(MeasurecodeClicked); //calls sql method to bind data
H1.InnerText = "KPI Criteria - " + MeasurecodeClicked;
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
function openModal() {
$("#myModal").modal('show');
}
<div class="table-responsive">
<asp:updatepanel id="Updatepanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gvTeamCAOTDashboard" class="table table-bordered" Width="100%" DataKeyNames="ControlDesc" runat="server" CellPadding="0" AutoGenerateColumns="false" OnRowDataBound="gvTeamCAOTDashboard_RowDataBound" HeaderStyle-HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="IsWorkingDay" HeaderText="IsWorkingDay" ReadOnly="true" SortExpression="IsWorkingDay" ItemStyle-CssClass="Hide" HeaderStyle-CssClass="Hide" >
<ItemStyle CssClass="Hide" />
</asp:BoundField>
<asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign ="Center" >
<ItemTemplate>
<asp:LinkButton ID="lnkBtnEdit" ForeColor="Black" runat="server" Text='<%# Eval("MeasureCode") %>'
OnClick="DisplayModal" ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total" SortExpression="TotalCases" ItemStyle-HorizontalAlign ="Center" ControlStyle-ForeColor="Black">
<ItemTemplate>
<asp:HyperLink ID="TotalCases" runat="server" Text='<%# Eval("TotalCases") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Target" HeaderText="Standard" ReadOnly="true" SortExpression="Target" ItemStyle-HorizontalAlign ="Center" >
<HeaderStyle />
</asp:BoundField>
<asp:BoundField DataField="AvgDaysTaken" HeaderText="Average" ReadOnly="true" SortExpression="AvgDaysTaken" ItemStyle-HorizontalAlign ="Center" >
<HeaderStyle />
</asp:BoundField>
</Columns>
</asp:GridView>
<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="myModalTeam" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" runat="server" id="H1"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:GridView ID="gvModalTeam" runat="server">
</asp:GridView>
</div>
<div class="modal-footer">
<button type="button" id="closebutton" runat="server" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers >
<asp:PostBackTrigger ControlID="gvTeamCAOTDashboard" />
</Triggers>
</asp:updatepanel>
</div>
if you inspect the generated html in your browser you can find an tag with the id of lnkBtnEdit and attribute of "href="#". As it is discussed here you can find similar issue.
try to add href="#/" to the linkbutton

Bootstrap modal freezes page after modal hide

I have a button on page to open a modal:
<button data-toggle="modal" data-target="#connProductsModal" type="button" class="btn btn-brand"><%= GetGlobalResourceObject("ButtonText", "BTN_EDIT_PRODUCTS") %></button>
this opens following modal:
<div class="modal fade" id="connProductsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:UpdatePanel runat="server" ID="udpEditConnProd">
<ContentTemplate>
<telerik:RadGrid ID="gvEditConnectedProducts" runat="server" AllowMultiRowSelection="True" RenderMode="Lightweight" Skin="Material" PageSize="25" BorderWidth="0" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="False">
<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnableRowHoverStyle="True">
</ClientSettings>
<MasterTableView DataKeyNames="ProductId">
<Columns>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
<HeaderStyle CssClass="myGridHeader" />
<ItemTemplate>
<label class="k-checkbox k-checkbox--brand">
<asp:CheckBox runat="server" ID="cbSelectedItem" AutoPostBack="True" OnCheckedChanged="ToggleRowSelection" />
<span></span>
</label>
</ItemTemplate>
<HeaderTemplate>
<label class="k-checkbox k-checkbox--brand">
<asp:CheckBox runat="server" ID="headerCheckbox" AutoPostBack="True" OnCheckedChanged="ToggleSelectedState" />
<span></span>
</label>
</HeaderTemplate>
<ItemStyle Width="25px" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="ProductCode" HeaderText="<%$ resources: PRODUCT_GRID_CODE %>" UniqueName="Address" Visible="True">
<HeaderStyle CssClass="myGridHeader" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ProductName" HeaderText="<%$ resources: PRODUCT_GRID_NAME %>" UniqueName="first_name" Visible="True">
<HeaderStyle CssClass="myGridHeader" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ProductNumber" HeaderText="<%$ resources: PRODUCT_GRID_NUMBER %>" UniqueName="Address" Visible="True">
<HeaderStyle CssClass="myGridHeader" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<asp:LinkButton runat="server" ID="btnAddSelectedProducts" OnClick="btnAddSelectedProducts_OnClick" class="btn btn-brand"><%= GetGlobalResourceObject("ButtonText", "BTN_UPDATE") %></asp:LinkButton>
</div>
</div>
</div>
</div>
when I press "Save" in modal it should update a grind inside a update panel with conditional update mode. The trigger is the save button in the modal.
This works...but the modal will not close after the method is done.. I use this in code behind to "hide" the modal, witch works..
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#connProductsModal').modal('hide');", true);
but then the page (all java-script functions) freezes :/ If I skip the "hide" function everything works as it should but the modal does not close.
Any idea?

javascript - Bootstrap modal dialog with yes/no not working with imagebutton

I am trying to use ImageButton to fire Bootstrap modal popup but it is not firing for some reason. Please help. Here is my code
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/img/Delete.png" CausesValidation="false" ToolTip="Delete" data-toggle="modal" data-target="#myModal" />
here is my modal popup code
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Delete Confirmation</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" />
</div>
<div class="modal-footer">s
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-default" CausesValidation="false" >
<i aria-hidden="true" class="glyphicon glyphicon-ok"></i>No
</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn btn-primary" CausesValidation="false" >
<i aria-hidden="true" class="glyphicon glyphicon-ok"></i>Yes
</asp:LinkButton>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
here is JS
<script type="text/javascript">
function ShowPopup2() {
$("#btnShowPopup2").click();
}
</script>

Open Bootstrap Modal after input validation after button click in asp.net c#

I am working on a asp.net c# project which has a input box and a button. Input box has some validation and on successful validation I would like to open a bootstrap modal to fill further information. Is there any way to do this?
I tried using the JavaScript but its not working for me. Below is the code for same.
Default.aspx file code:
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" data-toggle="modal" data-target="#sell_request" />
Bootstrap Modal code:
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
CS Code on button click:
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
I took your code as is and made the following changes:
Removed data-toggle="modal" data-target="#sell_request" from btnSell
Added CDN references to jQuery,bootstrap.js and bootstrap.css (in that order).
It works now!
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" />
</form>
</body>
Output:
Your bootstrap modal .aspx code looks good as far as I can tell. I am doing something similar, but I have the javascript defined in my .aspx file, and I just call it from code behind using script manager. Here is a sample of my code from default.aspx.cs:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openContactModal();", true);
This calls a java script function that is defined in default.aspx:
<!--Modal Popup for Contacts-->
<script type="text/javascript">
/* Allows us to open and close the Address Book modal from code behind */
function openContactModal() {
$('#contactModal').modal('show');
}
function closeContactModal() {
$('#contactModal').modal('hide');
}
</script>
You can substitute openSellRequest() and #sell_request into this code and see if it works for you.
EDIT: Here is a sample of the default.aspx code for my modals - there are several extra elements in here, although I am not sure that they are required:
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="contactModalLabel">Contact Info for <asp:Label ID="lblContactHeaderName" runat="server"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Table ID="contactTable" runat="server" Width="95%">
<asp:TableRow>
... your content here ...
</asp:TableRow>
</asp:Table>
</div>
<div class="modal-footer">
<asp:Button ID="deleteContact" CssClass="btn btn-danger" runat="server" Text="Delete" OnClick="deleteContact_Click" Visible="false" />
<asp:Button ID="editContact" CssClass="btn btn-primary" runat="server" Text="Edit" onclick="editContact_Click" />
<asp:Button ID="saveContact" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="saveContact_Click" Visible="false" />
<asp:Button ID="cancelContact" CssClass="btn btn-default" data-dismiss="modal" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
And here is my button code:
<asp:Button ID="btnShowContact" CssClass="btn btn-primary btn-sm dont-print" runat="server" OnClick="showContact" Text="Show Contact Details" data-toggle="modal" data-target="#contactModal" />

Categories