Develop Reference

How can I Close a Boot Strap Modal Using C#

I am using a Modal for the first time and need some help I have this Modal
<div id="User_Modal" class ="container">
<div class ="row">
<div class="col-xs-12">
<div class="modal" id="viewUserModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter You Pin To Continue</h4>
</div>
<div class="modal-body">
<div>
<label for="inputPinNumber">Pin Number</label>
<br />
<input class="form-control" placeholder="Enter Your Pin #" type="number" id="txtUserPin" runat="server"/>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" CssClass="btn btn-primary" ID="btnUser" Text="Go" OnClick="btnUser_Click" />
<button class =" btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I open or call the Modal using this C# code on the btnUser_Click method with this C# code
ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal", "$('#viewUserModal').modal('show');", true);
After the user enters the Pin number I want to get that value check it against my data and then close the Modal. I trying to do that with this code:
protected void btnUser_Click(object sender, EventArgs e)
{
string strUserPin = txtUserPin.Value.ToString();
if (strUserPin.Length > 0)
{
Session["SessionPinEntered"] = strUserPin;
string strUser = Email.GetUser(strUserPin);
bool bolIsManager = true;//CheckUser(strUser);
if (bolIsManager)
{
ScriptManager.RegisterStartupScript(this, GetType(), "Close Modal", "$('#viewUserModal').modal('close');", true);
pnlGrid.Visible = true;
}
else
{
}
}
}
The code runs but the Modal does not close and my hidden asp Panel is not shown.
Can someone explain why this is not working?
UPDATE:
I was able to figure out how to hide the Modal with this code change:
ScriptManager.RegisterStartupScript(this, GetType(), "Hide Modal", "$('#viewUserModal').modal('hide');", true);
But the C# code to make the asp Panel visible is still not working. In debug I can watch the code being called and steps over put does not run? What's going on with that and how can I get this fixed

The solution to the problem was to rebind the grid after I changed the panel from being hidden. Once I did that the radgrid shows the data

Unable to perform any actions in modal window

I am trying to automate my application and i am unable to perform any actions on the modal window.
Below is the HTML code of that modal window.
<div class="modal fade bs-modal-lg in" id="homeModal" tabindex="-1" style="display: block; padding-left: 16px;" aria-hidden="false"><div class="modal-backdrop fade in" style="height: 958px;"></div>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header modal-header-dl " id="homeModalHeader">
<a href="javascript:void(0)" onclick="ClosepopupModal()" class="pull-right dl-padding-top-10 dl-padding-right-20" role="button" title="Close">
<i class="zbox-button close"></i>
</a>
<h4 class="modal-title">XDS Authentication</h4></div>
<div class="modal-body " id="homeModalBody"><div class="form-group dl-padding-bottom-20 dl-mg-left-right-5px">
<input type="text" class="form-control" id="id-number" name="IDNumber" placeholder="SA ID number" value="" maxlength="13" onpaste="return onPaste(event)" onkeydown="return onKeyPress(event)" onkeyup="return onKeyUp(event)" onkeypress="return checkNumberAndClearTextBox('account-number')" onblur="checkLength(this, 13)">
<small><span id="id-number-error" class="error-msg"> </span></small>
<div>
<button type="button" id="register-btn" class="btn pull-right dl-button-primary dl-margin-right-0" onclick="GetClientDetails(event)">Retrieve Authentication Questions</button>
</div>
</div>
I have to enter value on text box and click on a button in that modal window but unable to do it.
Window handles method doesn't worked.Getting unable to locate element error.
driver.SwitchTo().Window(driver.WindowHandles[1]);
IWebElement IDnumber = driver.FindElement(By.Id("id-number"));
IDnumber.SendKeys("123456");
IWebElement Authenticate = driver.FindElement(By.CssSelector(".btn.pull-right.dl-button-primary.dl-margin-right-0"));
Authenticate.Click();
IWebElement Skipbutton = driver.FindElement(By.CssSelector(".btn.pull-right.dl-button-secondary"));
Skipbutton.Click();
What is the right way to do it?

Most modals do not require a SwitchTo. You should be able to interact with them directly.
If you have to use handles, please try this.
public static string SwitchToPopup()
{
var mainHandle = driver.CurrentWindowHandle;
var handles = driver.WindowHandles;
foreach (var handle in handles)
{
if (mainHandle == handle)
{
continue;
}
driver.SwitchTo().Window(handle);
break;
}
var result = Url;
return result;
}

Adding content to div in Bootstrap modal from server side in asp.net

I have input form in Bootstrap model popup. I want to show error message in div when submit button for saving. My model popup is in update panel. I am trying to do and its not working.
<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">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required" runat="server">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" />
</div>
</div>
</div>
</div>
Below is the server side method to show content.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
}
How can I show error content to div?

To open error model popup from Server side.
You need to update your Server side function ShowError to this.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true);
}
for this you have to put the div with id myModal, into update panel.
This will trigger jQuery function on Client side after server side execution complete and the model open manually.
Other way to do this
If you don't want to put model div into update panel then follow this way.
Update your Model div like below
<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">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
Add JavaScript function as below into aspx file.
function showError(error){
$("#ErrorDiv").html(error);
$('#myModal').modal('show');
}
And call the JavaScript function from server side like this
public void ShowError(string Message)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true);
}
Here, you can explore more about ScriptManager.RegisterStartupScript Method

using modal in gridview row editing C#

this is my bootstrap modal
<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">
</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" />
</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 changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
i want to open the modal on button click,
the button is on my gridview item template,
my button look like this
<ItemTemplate>
<asp:LinkButton ID="btnedit" runat="server" data-toggle="modal" data-target="#myModal" CommandName="Edit" Text="Edit" CssClass="btn btn-warning" Width="100%"></asp:LinkButton>
</ItemTemplate>
and now i have created a protected void method on row editing,
which looks like this
protected void dgvEdit_RowEditing(object sender, GridViewEditEventArgs e)
{
dgvEdit.EditIndex = e.NewEditIndex;
int index = e.NewEditIndex;
LoadGridTask("EDIT", Session["CurrentUser"].ToString(), Session["TaskID"].ToString());
Label taskinmodal = dgvEdit.Rows[index].FindControl("lblTaskName")as Label;
Response.Write(taskinmodal.Text);
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = taskinmodal.Text;
}
the problem is when i add the code of my modal and set target id to my modal,
the code in dgvEdit_RowEditing not executing,
i want to add the value of my gridview row in my modal,
i think this is preventing my modal(data-toggle="modal" data-target="#myModal" to executing CommandName="Edit")
what i need to do?

Try to use rowCommand instead of using 'dgvEdit_RowEditing'
In your GridView add
OnRowCommand="dgvEdit_RowCommand"
and change your method('dgvEdit_RowEditing') like this,
protected void dgvEdit_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName == "Edit")
{
dgvEdit.EditIndex = e.NewEditIndex;
int index = e.NewEditIndex;
LoadGridTask("EDIT", Session["CurrentUser"].ToString(), Session["TaskID"].ToString());
Label taskinmodal = dgvEdit.Rows[index].FindControl("lblTaskName")as Label;
Response.Write(taskinmodal.Text);
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = taskinmodal.Text;
}
}
Hope it works !!!

As you pointed out remove this data-toggle="modal" data-target="#myModal" and let the dgvEdit_RowCommand to execute. On you dgvEdit_RowCommand method
protected void dgvEdit_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName == "Edit")
{
dgvEdit.EditIndex = e.NewEditIndex;
int index = e.NewEditIndex;
LoadGridTask("EDIT", Session["CurrentUser"].ToString(), Session["TaskID"].ToString());
Label taskinmodal = dgvEdit.Rows[index].FindControl("lblTaskName")as Label;
Response.Write(taskinmodal.Text);
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblMessage.Text = taskinmodal.Text;
}
}
In the showpopup() function, please call
function ShowPopup(){
$("#myModal").modal();
}

Prevent Boostrap modal closing after LinkButton Click inside modal

I got a LinkButton inside a boostrap modal with a ClickFunction in codeBehind. Everytime that i click in linkButton and event in codebehind is firing, the modal is closing. I wanna to keep modal open after a linkbutton click!
Check the asp LinkButton inside modal on tag modal-body with a Click event:
<div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title" id="txtTitle"><i> Pesquisa de Clientes</h4>
</div>
<div class="modal-body">
<asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
LinkButton Click function in code Behind:
protected void link_Click(object sender, EventArgs e)
{
lbl.Text = "aaa";
}
The issue is: Everytime i click link button inside modal, which have a
click event in codebehind, the modal is closing?
I just wanted to keep modal opened once the linkbutton was clicked

You need to set modal property like below to prevent disappear modal popup :
$('#modalPesquisaCliente').modal({
backdrop: 'static',
keyboard: false
})

I FOUND SOLUTION GUYS! THE ANSWER IS:
" When you use UPDATE PANEL and occours a postback, the postback act in all controls inside update panel, and if modals html code is inside update panel, when postback occours, the modal will be "refreshed" and seted to default value again (Thats in closed state), so if you wanna to keep modal open after a postback, you should write this html code OUT of update panel, doing this every time a postback occour inside update panel, the code of modal doesn't be "touched" and "re wrote" by postback.

You can use bootstrap model either jQuery with URL action to your code behind method or Update panel using with Scriptmanager.
WebForm:
<asp:Button ID="link" runat="server" OnClientClick="callAjaxMethod(event)" Text="Call method using Ajax" />
Code behind:
[System.Web.Services.WebMethod]
public static bool link_Click()
{
return "aaa";
}
jQuery:
function callAjaxMethod(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "SimpleAjax.aspx/IsLeapYear",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d) {
$('#<%=lbl.ClientID%>').val(response.d);
}
else {
$('#<%=lbl.ClientID%>').val('No value');
}
},
failure: function (response) {
$('#<%=lbl.ClientID%>').val("Error in calling Ajax:" + response.d);
}
});
}
Second Method using Update Panel
WebForm:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<div class="modal fade" id="modalPesquisaCliente" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title" id="txtTitle"><i> Pesquisa de Clientes</h4>
</div>
<div class="modal-body">
<asp:LinkButton runat="server" ID="link" OnClick="link_Click">aaa</asp:LinkButton>
<asp:Label ID="lbl" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Code behind: as it is no change
protected void link_Click(object sender, EventArgs e)
{
lbl.Text = "aaa";
}
And one very simple method to use without using jquery or update panel, you can use simple jQuery to .
jQuery:
$(document).on('click', '#<%=link.ClientID%>', function (event) {
event.preventDefault();
});
event.preventDefault(); for
To prevent postback from happening as we are ASP.Net TextBox control so If we had used input html element, there is no need to use ' e.preventDefault()' as posback will not happen.

As you have mentioned jQuery, try this
$(document).on('click', '#link', function (event) {
event.preventDefault();
});