I am developing a C# ASP.Net project. And I would like to do something very similar to what is shown in the following website.
However, that is a solution for the HTML <a> tag, and I am looking for a solution for ASP.NET buttons.
What are my options?
<asp:LinkButton /> is a good choice. It is virtually identical to <asp:Button />, except it creates a form enacting hyperlink that you can put any image in it that you want to.
I stress using LinkButton instead of ImageButton because ImageButton uses different event handlers, which makes it difficult to switch back and forth between them. With Linkbuttons and Buttons, they use the same event handlers, so it's rather easy to switch between them.
They are the same, you can do something like this:
<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
Text="Go " Width="60px" />
some style:
.addButtonStyle {
border: 1px solid #e1ecfc;
background-color: #B9D1F4;
color: #003399;
background-image: url(partgrad.gif);
background-repeat: repeat-x;
}
Try this example
or view it here My Example Link
<!DOCTYPE html>
<html>
<head>
<title>Hello World | Button Config</title>
</head>
<body>
<div>
<h1>Working with Buttons</h1>
<p>Small, large, or medium size buttons can have css properties that you can benefit from rather that using images. Please look at the examples below</p>
<textarea>
<asp:button runat="server" id="helloWorld" CssClass="button" text=" --- See examples --- " />
</textarea>
<ol>
<li>
<input type="submit" class="button" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button" value="Short"/>
</li>
</ol>
<ol>
<li>
<input type="submit" class="button round" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button round" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button round" value="Short"/>
</li>
</ol>
<p>
In theory you always want the cleanest markup. So linkButtons on are NO GO! LinkButtons are Javascript based and can cause accessibility issues.
</p>
<h3>IE doesn't have my rounded corners?</h3>
<p>
Gotcha, lets do it without JS and lets use the images found from the link below. IE doesnt take advantage of some of the cooler CSS tricks we find in other browsers. - Shame on them! In the next example we simply wrap the asp:button with a span and then a b element.
</p>
<ol>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="This is a Long Button"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Search Now!"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Short"/>
</b>
</span>
</li>
</ol>
<textarea>
<span id="btn-wrap">
<b>
<asp:button runat="server" id="helloWorld" text=" --- See examples --- " />
</b>
</span>
</textarea>
<h3>Wrapping it up</h3>
<p>
In this demo, you've seen a single background image used as a repeating object to give us a gradient effect similar to the one found here http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
</p>
<style>
input[type="submit"], span, b {background:transparent none repeat scroll 0 0;border:0 none;display:inline-block;margin:0;padding:0;cursor:pointer;outline:none;} /* reset the button */
input.button {background:url(http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png) repeat-x; text-shadow:0 1px 1px #FFFFFF /* Just for looks */; padding:4px 5px;}
input.button:active {background:#FED58F;}
.round {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
/* http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png thank you hotmail for the image */
span#btn-wrap {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) repeat-x scroll 0 0;}
span#btn-wrap b {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat scroll right 0;height:18px;padding:3px 10px;}
span#btn-wrap:active {background-position: 0 -24px;}
span#btn-wrap:active b {background-position: right -24px;}
li {margin:5px 0;}
textarea {background:#323232; color:white; padding:10px; width:900px; height:80px; overflow:hidden;}
</style>
</div>
</body>
</html>
Like the page says, this is the cleanest java Script less way to do it. This is accessible and browser friendly.
Related
HTML
<head></head>
<body class=" products show us">
<header id="header"></header>
<div id="wrap">
::before
<div id="container" style="opacity: 1;">
<div class="sidebar"></div>
<article itemtype="http://schema.org/Product" itemscope="itemscope">
::before
<figure>
<img id="img-main" src="test.jpg" itemprop="image" alt="test"></img>
<div id="zoom-lens"></div>
<div id="zoom-holder" style="background: url("test.jpg") no-repeat scroll 0px 0px transparent;" data-background-image="test.jpg"></div>
</figure>
::after
</article>
<div id="details" data-style-limited-with-count="0" data-style-limited="false">
<h1 itemprop="name"></h1>
<p class="style" itemprop="model">
White
</p>
<p class="description" itemprop="description"></p>
<ul class="styles "> // STEP 1: GENERATE LIST OF STYLES PER data-style-name and select the one that matches via adding "selected" to a class""!
::before
<li>
<a class="selected" data-style-name="White" data-style-id="10570" data-sold-out="false" data-images="{"detail_url":"..."..."}" href="..." data-no-tubolink="data-no-tubolink"></a>
</li>
<li>
<a class="" data-style-name="Black" data-style-id="10571" data-sold-out="true" data-images="{"detail_url":"..."..."}" href="..." data-no-tubolink="data-no-tubolink"></a>
</li>
::after
</ul>
<p class="price" itemtype="http://schema.org/Offer" itemscope="itemscope" itemprop="offers"></p>
<div id="cart-controls">
<div id="cart-controls"> // STEP 2 => OPEN THIS!
<form id="cart-addf" class="add" method="post" data-remote="true" action="/shop/168934/add" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline"></div> // STEP 3: GENERATE LIST OF OPTIONS (UNKNOWN AMOUNT OF FIELDSETS) AND SELECT OPTION(S)!
<fieldset>
<select id="size" name="size">
<option value="25134"></option>
<option value="25135"></option>
<option value="25136"></option>
</select>
</fieldset>
<fieldset>
<select id="qty" name="qty">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
</select>
<a class="next" href="..."></a>
</fieldset>
<fieldset id="add-remove-buttons">
<input class="button" type="submit" value="add to cart" name="commit"></input> // STEP 4: CLICK BUTTON!
<a class="button continue" href="/shop"></a>
</fieldset>
</form>
</div>
</div>
<script id="cart-controls-add" type="text/x-nano-tmpl"></script>
<script id="cart-controls-remove" type="text/x-nano-tmpl"></script>
<script id="cart-controls-sold-out" type="text/x-nano-tmpl"></script>
<script id="cart-controls-limited" type="text/x-nano-tmpl"></script>
</div>
</div>
::after
</div>
<footer id="nav" style="opacity: 1;"></footer>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
</body>
</html>
DESC
Above is the HTML code that I would like to access, modify values, & then submit data.
I am using c# net 4.0 and HTMLAGILITYPACK to achieve this.
I wrote inside the HTML above 4 total comments (4 things in total that is needed).
I was wondering if the goal of editing values is possible with HTMLAGILITYPACK and if it was possible to click a button on the webpage to submit the values that would be edited.
I found a few references regarding this matter but do not know how to put to proper use.
1: How to click a link element programmatially with HTMLElement?
2: Clicking button automatically using HtmlAgilityPack
PSEUDO CODE
HtmlAgilityPack.HtmlDocument doc = null;
doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(new WebClient().DownloadString("website above that contains that HTML"));
Not quite sure what you want to accomplish, but I think this might be on the right track:
See this to change any attributes in JQuery http://api.jquery.com/attr/
See this to change/add things that'll happen when you click something https://api.jquery.com/click/
Needless to say, I don't think you need to make the button "click itself", what's the point of it then? :P
But you can make it that if you click it, it does the first thing it should first, and then the second thing after that, within the JQuery click function you'll presumably make.
But like pasty said, I'd like you to elaborate a bit more, feel free to comment and ask if something is unclear in this post.
Could anyone give me an idee on how could I generate dynamically this piece od code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" runat="server">
<span class="caret"></span></button>
<ul class="dropdown-menu" id="testingPurposes">
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 1</span>
<asp:Image ID="Image1" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 2 </span>
<asp:Image ID="Image2" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
</ul>
</div>
The main idea of this code is to have some kind of dropdown list looking control that would have a span with text, and an image on each row.
This is basicly how my control shoud look when it's clicked:
Text1 img1
Text2 img2
If a user clicks TextN i get an event for that click, and i can update the page based on selected item.
If a user clicks imgN then TextN and imgN would disappear from the list.
I am trying to implement a dropDownList which, on each row to contain two controls: a Label and a Button, but my problem is that I have no clue how to do that.
Searching on google gave me no usefull results, so I don't know from where to start, or perhaps I don't know what to search. This dropDownList should work as a standard one if user clicks on the label, or rise a different event if the button is clicked.
I know this in not the standard type of question here, but if anyone could help me would be greatly appreciated.
Dropdownlist is simply a list. then Why you need Button and label in Dropdownlist ?
The DropDownList is a control. So it is not possible to add buttons and label in dropdownlist
If you need to do some activities when dropdownvalue changed then you can use OnSelectedIndexChanged . You can use it like buttonclick event
If button and Label are necessary for you then add them in a different way Use frames, or in OnSelectedIndexChanged event create your buttons and labels
Try this if you are looking for double options related to dropdownlist then try something like below
css
ul.dropdown-menu li{
width: 500px;
}
ul.dropdown-menu li a.text-left{
float: left;
width: 49%;
}
ul.dropdown-menu li a.text-right{
float: right;
width: 50%;
}
html
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">big button</button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
</ul>
</div>
I have an update panel witch works in timer every 30 seconds.
the page contains many checkbox. when the update panel works, the check boxes return to their default statuses though some of them were selected before the update panel works.
any help please?
There are the checkboxs:
<div ID="campaignDiv" runat="server" >
<ul>
<li>
<span class="textDropdown">Text1</span>
<input type="checkbox" id="1" value="1"/>
<label for="1"></label>
</li>
<li>
<span class="textDropdown">Text1</span>
<input type="checkbox" id="2" value="2"/>
<label for="2"></label>
</li>
<li>
<span class="textDropdown">Text1</span>
<input type="checkbox" id="3" value="3"/>
<label for="3"></label>
</li>
<li>
<span class="textDropdown">Text1</span>
<input type="checkbox" id="4" value="4"/>
<label for="4"></label>
</li>
</ul>
</div>
Add attribute runat="server" to your checkboxes. This will make them server-side controls and allow to use ASP.NET ViewState to save their states.
Note that you may have to change IDs of the checkboxes (and related for labels) currently yours are numeric like "1", you will have to make them alphanumeric e.g. "C1".
I am building a Dashboard app in asp.net. I have placed 3 input buttons inside a div tag. When a user is moused over a table cell I would like for the buttons to show. How can I accomplish this using .css, javascript or jQuery?
My HTML looks like this:
<td id="bold_cell1" valign="top" width="33%" Height="33%">
<div id="buttonBlock">
<input type="button" id="btnAdd" value="Add" style="font-size:8px" />
<input type="button" id="btnEdit" value="Edit" style="font-size:8px" />
<input type="button" id="btnDelete" value="Delete" style="font-size:8px" />
</div>
</td>
Thanks
The old-fashioned way: CSS:
#buttonBlock input{
display:none;
}
#bold_cell1:hover #buttonBlock input{
display:block;
}
demo link