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

Modal in foreach returning the same data for each modal

i am trying to populate modals with different data, i create the modals buttons using a foreach loop and then i want to apply the relevant data to the right modal.
The problem i have is that the modal is showing the same data for each modal button. How can i make this unique? When its doing its loop its actually placing the correct info but when the page loads its only showing one type of data for every modal.
#foreach (DataRow row in Model.Tables[0].Rows)
{
<tr>
<td>#row["SerialNumber"]</td>
<td>#row["DtTmGenerated"]</td>
<td>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">View Error</button>
</td>
</tr>
}
</thead>
<tbody></tbody>
</table>
#if (Model.Tables[0].Rows.Count != 0)
{
<script type='text/javascript'>
window.onload = function() {
document.getElementById("cssClass").style.display = 'none';
}
</script>
}
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title justify-content-center">Panda Error information</h4>
</div>
<div class="modal-body">
#foreach (DataRow row in Model.Tables[0].Rows)
{
var test = Convert.ToString(row["FriendlyError"]);
if (test != "No Error" )
{
<p>#row["FriendlyError"]</p>
}
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>

I'm a bit late but I had the same problem today and I managed to fix it :D
The problem is the ID of the modal. In each new loop pass your modal is created with the same ID.
In other words: Your values, which come into the modal always change, but because the ID is static, all further modals get the same values as in the first one, because all have the same ID. Try this:
Add this code right after your model (#model ...)
#{
int ModalId = 0;
}
Then change the ID in the button that opens your modal:
data-target="##ModalId"
In the line before you close your foreach, add this
#(ModalId++)
Change your modal to this and put it into your foreach so that it looks like this:
#foreach (DataRow row in Model.Tables[0].Rows)
{
<tr>
<td>#row["SerialNumber"]</td>
<td>#row["DtTmGenerated"]</td>
<td>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="##ModalId">View Error</button>
<!-- Modal -->
<div id="#ModalId" aria-labelledby="#ModalId" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title justify-content-center">Panda Error information</h4>
</div>
<div class="modal-body">
#foreach (DataRow row in Model.Tables[0].Rows)
{
var test = Convert.ToString(row["FriendlyError"]);
if (test != "No Error")
{
<p>#row["FriendlyError"]</p>
}
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
#(ModalId++)
}
</thead>
<tbody>
</tbody></table>
#if (Model.Tables[0].Rows.Count != 0)
{
<script type='text/javascript'>
window.onload = function() {
document.getElementById("cssClass").style.display = 'none';
}
</script>
}
</body>
</html>
In summary: Wherever you had "myModal" as ID, you must replace it with #ModalId

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

Radio button value is null

I'm trying to get the value of the radio button clicked but so far the value is null. The code below has a couple of things going on:
1) when the button is clicked it should move the radio buttons to the left.
2) I need to the get value of which radio button is clicked
The first part works but I can't get the second part. This is my code:
<script>
$(document).ready(function(){
$("#form1").click(function(){
$("#list_of_btns").animate({left: '-150px'});
});
});
</script>
//this is the form for radio button...it must be centered to middle of the page
<div id="list_of_btns" style="padding-top: 80px; position:fixed;">
<div class="row" style="position:fixed;">
<div class="col-md-8 col-md-offset-4" style="position:fixed;">
<div class="list-group" style="position:fixed;">
<form role="radio_button_form" style="position:fixed;">
<div class="radio">
<label><input type="radio" value="male" name="method">male</label>
</div>
<div class="radio">
<label><input type="radio" value="female" name="method">female</label>
</div>
</form>
</div>
</div>
</div>
</div>
//this is the enter button.
<div class="row" style="padding-top: 80px; position:relative;">
<div class="col-md-8 col-md-offset-16" style="position:relative;">
<form id="form1" runat="server" style="position:relative;">
<asp:LinkButton class="btn btn-info" ID="getStarted_btn" runat="server" OnClick="btn_clicked" Text="Enter" />
</form>
</div>
</div>
This is where I am trying to get value of the radio button, in my c# code:
public void btn_clicked (object sender, EventArgs args)
{
Console.Out.WriteLine ("sdsfdsfdfsdf");
if (Request.Form["method"] != null)
{
string selectedGender = Request.Form["method"].ToString();
Console.Out.WriteLine (selectedGender);
}
}
Does anybody have any idea on what I'm doing wrong or is there a better way in achieving this?

I have edited your code and this is working.Plz check
<body>
<form id="form1" runat="server" style="position: relative;">
<div id="list_of_btns" style="padding-top: 80px; position: fixed;">
<div class="row" style="position: absolute;">
<div class="col-md-8 col-md-offset-4" style="position: fixed;">
<div class="list-group" style="position: fixed;">
<div class="radio">
<label>
<input type="radio" value="male" name="method">male</label>
</div>
<div class="radio">
<label>
<input type="radio" value="female" name="method">female</label>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 80px; position: relative;">
<div style="position: relative;">
<asp:LinkButton class="btn btn-info" ID="getStarted_btn" runat="server" OnClick="btn_clicked" Text="Enter" />
</div>
</div>
</form>
Enclose the whole content inside single Form..

MoveToElement and Click() in selenium webdriver is not working for me in C#

I have a toggle button that becomes active/visible only when MoseOver on it. I need to click on it and select the options from the drop down menu. This is the code and my attempts to automate bellow:
<div class="project active">
<div class="header">
<span class="badge badge-info">0 sites</span>
<a class="description" data-original-title="auto test" rel="tooltip" href="#">
<div class="modified">Modified: 2013-01-30 18:46:08Z</div>
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" href="#" data-target="#projectConfigMenu_62">
<i class="icon-cog"></i>
<span class="caret"></span>
</a>
<ul id="projectConfigMenu_62" class="dropdown-menu" style="top: 297.867px; left: 194px; display: none;">
</div>
Here is how I am trying to solve it, I can see the button, but it wouldn't click on it:
IWebElement active_element = driver.FindElement(By.XPath(".//div[#class='project active']"));
IWebElement button = active_element.FindElement(By.XPath("//a[#class='btn btn-mini dropdown-toggle']"));
IWebElement buttondrop = button.FindElement(By.XPath("//i[#class='icon-cog']"));
Actions builder = new Actions(driver);
builder.MoveToElement(active_element).MoveToElement(buttondrop).Click().Build().Perform();