In my modal header, I need the x button to do some serverside work, so it needs to be an asp button.
I have both here:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<asp:Button ID="btnX" CssClass="close no-bg" runat="server" Text="×"
OnClientClick="closeModal('#projectModal')"
OnClick="btnClose_Click" aria-hidden="true" />
<h3 id="projectModalLabel">Edit Project</h3>
</div>
However, my asp button still looks like a button while the other html button with boostrap close style looks correct just displaying an 'x'.
How can I make the asp button look like the html one (eg remove background)
Thanks
That's because the <asp:Button> managed control renders an <input> element not a <button> element. They can be styled differently. You can read about the differences here.
Edit: In the example you cite they use an anchor <a> element and style that using background images, etc. You could use a LinkButton and style that as needed.
Related
Good morning everybody. I seem to be stuck between a rock and a hard place and fear I may be missing something incredibly simple. I am currently developing a webforms application using an ASP.NET GridView control.
I have a bootstrap modal that is intended to display gridview row details through an ASP button on each row. I understand there are other posts on this topic but my issue seems to be a little different.
The button I use to toggle the bootstrap modal is in an asp control:
<asp:TemplateField HeaderText="Approval Information">
<ItemTemplate >
<asp:Button Text="Stats" runat="server" CommandName="ApprovalModal" type="button" class="btn btn-info" OnClientClick="return false" data-toggle="modal" data-target="#myModal"/>
</ItemTemplate>
</asp:TemplateField>
This button can currently toggle my modal just fine. The problem is, I want to subscribe to the RowCommand event in GridView so I can change the text of the ASP Literal control in the modal to display Row stats for each individual row when clicked:
protected void gvwApprovals_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "ApprovalModal")
{
approvalModalText.Text = "Some Unique Row Stats";
approvalModalText.Visible = true;
}
}
The only way I can subscribe to this event and have it fire is if I take out OnClientClick="return false"
However, if I take that out of the ASP button, I subscribe to the event, but then the bootstrap modal now just flashes and disappears.
Here is my modal:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="display: block;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Approval Information - Relevant Statistics</h4>
</div>
<div class="modal-body" >
<asp:Literal ID="approvalModalText" runat="server" Text='placeholder' Visible="false" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What am I missing here? Available to clarify any further questions. Fairly new to ASP controls in general, so I'm not sure if there's something super simple I might just be totally unaware of.
EDIT:
Of course there is a post that happens to fire the RowCommand which reloads the page and the modal disappears. Thanks to Alex for pointing it out to me in the comments (I knew it was something dumb and simple). Must use RegisterStartupScript in Row Command handler to show the modal rather than just doing a straight toggle. jQuery here I come.
In ASP.NET Core I can set an action to a link item a, however if I change it to a button it doesn't work anymore.
What is the correct way to bind an action/controller to a button click?
<a asp-action="Delete" asp-route-id="#item.Id">remove</a> #*work*#
vs
<button asp-action="Delete" asp-route-id="#item.Id">remove</button> #*does not work*#
It's not that it does not work, they are different Tag Helpers with different usage:
If you hover over the <a> you will see it implements AnchorTagHelper, while the <button> implements the FormActionTagHelper, because it is supposed to be used in <form>s.
So, in order to get the same behavior, you would do this:
<a asp-action="Index">aaaa</a>
<form>
<button asp-action="Index">bbbbb</button>
</form>
Note, though, that the button is rendered as formaction="/", not as href="/", and this is why you need to wrap it inside a form.
The second could also be written like this:
<form asp-action="Index">
<button type="submit">bbbbb</button>
</form>
I have a modal that pops up when you click a button, inside that modal I have a save button. When that save button is pressed I would like to fire some C# code in a with an OnClick function....
Can anyone tell me why this isn't working for me?
ASP.NET
<div class="modal fade" id="deviceModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Select</h4>
</div>
<div class="modal-body">
<asp:DropDownList ID="drpDownID" runat="server" CssClass="fields" EnableViewState="true">
<asp:ListItem Text="<Select>" Value="0" />
</asp:DropDownList>
</div>
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" Text="Save" data-dismiss="modal" CssClass="btn btn-primary" OnClick="btnSave_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" data-dismiss="modal" CssClass="btn btn-danger" OnClick="btnClose_Click" />
</div>
</div>
</div>
</div>
C#
protected void btnSave_Click(object sender, EventArgs e)
{
string test = "";
test = drpDownID.SelectedItem.ToString();
}
It won't even hit my break point.... And this is embedded in a form tag with a runat server
It works fine if I take the save button outside of the modal, but that completely defeats the purpose of the modal. So it has to be something with modal don't like click events very much...
Have you tried adding () to the onclick? like OnClick="btnSave_Click()".
EDIT: You can probably ignore that. It doesn't seem to matter for asp tags. Maybe this question can help you: ASP.NET button inside bootstrap modal not triggering click event
If your click on the save doesn't trigger a postback inside the dialog and it does outside the dialog: Can you use Firebug in Firefox to see whether the Save button is still part of the form?
I know JQuery dialog brings the container to the bottom of the body and therefor takes it out of a possible form, resulting in form posts not triggering from dialogues. I have a nice fix for this JQuery dialog issue, but that's probably not part of this topic.
I am writing my first web application using Twitter Bootstrap and ASP.NET with C# on the back-end. I have buttons and labels inside of a Bootstrap panel. I would like to align the labels to the left and the buttons to the right. Here is my code so far:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel body">
<p>
<asp:Label ID="BandsProducedLabel" runat="server" Text="Bands Produced:"></asp:Label>
<asp:Button class="btn btn-default" ID="BandsProducedBtn" runat="server" Text="Hello" style="text-align:right" />
</p>
<\div>
<\div>
How can I accomplish this task? This is only a small snippet of code. I have about 15 other panels that I would like to apply the same styling to.
If you want to use standard Bootstrap styles, you can give the label the CSS class "pull-left" and the button "pull-right".
For the correct result, you might have to reverse the source order, that is, have the button come first and then the label, in the markup.
Another option would be to use the Bootstrap grid system to place these two elements side by side.
I've created another question which I think is the cause for this error: Why does the Selenium Firefox Driver consider my modal not displayed when the parent has overflow:hidden?
Selenium version 2.33.0
Firefox driver
The code that causes the error:
System.Threading.Thread.Sleep(5000);
var dimentions = driver.Manage().Window.Size;
var field = driver.FindElement(By.Id("addEmployees-password")); //displayed is true
field.Click(); //works fine
var element = driver.FindElement(By.Id(buttonName)); //displayed is false
element.Click(); //errors out
The button that its trying to click:
<div id="addEmployees" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addEmployeesLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Add Employee</h3>
</div>
<div class="modal-body">
<p class="alert alert-info">
<input name="addEmployees-username" id="addEmployees-username" />
<input name="addEmployees-password" id="addEmployees-password" type="password" />
<input name="addEmployees-employee" id="addEmployees-employee" />
</p>
</div>
<div class="modal-footer">
<button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button>
</div>
</div>
If I change the call to FindElements then I get ONE element, so there isn't anything else on the page.
If I FindElement on a field that occurs right before the button, say addEmployees-employee, then addEmployees-employee is displayed
In the browser itself, it shows up fine, all i need to do is actually click the button and the desired behavior executes, but the webdriver refuses to consider the element displayed
How is it that one field can be considered displayed and the other is not?
The modal with the add button in the bottom right, all the other elements are displayed = true
The window size is 1200x645 per driver.Manage().Window.Size;
The element location is: 800x355y per driver.FindElement(By.Id(buttonName)).Location
The element dimentions are: 51x30 per driver.FindElement(By.Id(buttonName)).Size
The password element location is: 552x233y per driver.FindElement(By.Id("addEmployees-password")).Size
Brian's response was right: use an explicit wait versus Thread.Sleep(). Sleep() is generally brittle, you're losing five seconds needlessly, and moreover it's just a really rotten practice for automated testing. (It took me a long, LONG time to learn that, so you're not alone there.)
Avoid implicit waits. They generally work for new items being added to the DOM, not for transitions for things like a modal to become active.
Explicit waits have a great set of ExpectedConditions (detailed in the Javadox) which can get you past these problems. Use the ExpectedCondition which matches the state you need for your next action.
Also, see Ian Rose's great blogpost on the topic, too.
Selenium WebDriver does not just check for opacity != 0, visibility = true, height > 0 and display != none on the current element in question, but it also searches up the DOM's ancestor chain to ensure that there are no parent elements that also match these checkers.
(UPDATE After looking at the JSON wire code that all the bindings refer back to, SWD also requires overflow != hidden, as well as a few other cases.)
I would do two things before restructuring the code as #Brian suggests.
Ensure that the "div.modal_footer" element does not have any reason for SWD to consider it to not be visible.
Inject some Javascript to highlight the element in question in your browser so you know absolutely you have selected the right element. You can use this gist as a starting point. If the button is highlighted in a yellow border, then you know you have the right element selected. If not, it means that the element selected is located elsewhere in the DOM. If this is the case, you probably don't have unique IDs as you would expect, which makes manipulation of the DOM very confusing.
If I had to guess, I would say that number two is what you are running into. This has happened to me as well, where a Dev reused an element ID, causing contention in which element you're supposed to find.
After discussing this with you in chat, I think the best solution (for now, at least) is to move the button out of the footer for your modal and into the body of it.
This is what you want (for now):
<div class="modal-body">
<p class="alert alert-info">
<input name="addEmployees-username" id="addEmployees-username" />
<input name="addEmployees-password" id="addEmployees-password" type="password" />
<input name="addEmployees-employee" id="addEmployees-employee" />
<button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button>
</p>
</div>
And not this:
<div class="modal-body">
<p class="alert alert-info">
<input name="addEmployees-username" id="addEmployees-username" />
<input name="addEmployees-password" id="addEmployees-password" type="password" />
<input name="addEmployees-employee" id="addEmployees-employee" />
</p>
</div>
<div class="modal-footer">
<button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button>
</div>
I had the same issue of element not visible so cannot be interacted with. it just got solved. i updated my selenium stand alone server. previous version was 2.33.0 and now it is 2.35.0
In my case the element was already present in the page but it was disabled,
so this didn't work (python):
wait.until(lambda driver: driver.find_element_by_id("myBtn"))
driver.find_element_by_id("myBtn").click()
it failed with error:
“Element is not currently visible and so may not be interacted with"
To solve my problem, I had to wait a couple of seconds ( time.sleep(5) ) until the element became visible.
You can also enable the element using JavaScript, a python example:
driver.execute_script("document.getElementById('myBtn').disabled='' ")
driver.execute_script("document.getElementById('myBtn').click() ")