We Keep Coding

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?

Bootstrap modal popup opens and closes immediately

I have a bootstrap popup displaying student results but it opens and closes immediately. my master page file has following included js files
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
and my webpage has no file included for bootstrap only a jquery timer file
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/jquery.countdownTimer.css" rel="stylesheet" type="text/css" />
</asp:Content>
The code for modal is as below
<div class="modal fade" id="myModalTest" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<%-- <button type="button" class="close" data-dismiss="modal">×</button>--%>
<h4 class="modal-title text-center">RESULT</h4>
</div>
<div class="modal-body">
<table class="table table-bordered" style="background-color:White" cellpadding="10" cellspacing="10">
<tr>
<td class="style1">
<p class="text-justify"><asp:Label runat="server" ID="Label1" Text="Test Name :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltest"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="lblName" Text="Student Name :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbluname"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="lblmks" Text="Total marks scored :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblmarksscored"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="Label2" Text="Total questions attempted :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltot"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="Label3" Text="Total questions in Test :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltotalTestQ"></asp:Label>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Button class="btn btn-default" runat="server" ID="btnBackModal" Text="back" OnClick="btnBackModal_Click"/>
</div>
</div>
</div>
</div>
Even the back button's ie btnBackModal OnClick event does not fire. When I debugged the code the control does not go to that event on the server side.
public void btnBackModal_Click(object sender, EventArgs e)
{
if (isSaved == 0)
saveAnswer();
Response.Redirect("StudentHome.aspx");
}

I solved the problem by writing javascript function to open modal instead of using data-toggle attribute for button.
I removed the code
<button input="button" class="btn btn-info" id="btnshowmodal" data-toggle="modal" data-target="#myModalTest">View Result</button>
and instead wrote a javascript function to handle onclick event.
HTML:
<button input="button" class="btn btn-info" id="btnshowmodal" onclick="popup();return false;" runat="server">View Result</button>
JS:
function popup() {
$('[id*="myModalTest"]').modal('show');
}

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" />

Update an UpdatePanel after a button click event

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.