Question

我正在开发一个C＃ASP.Net项目。我想做的事情与shown in the following website非常相似。

但是，这是HTML <a>标记的解决方案，我正在寻找ASP.NET按钮的解决方案。

我有什么选择？

Answer 1

<asp:LinkButton />是个不错的选择。它实际上与<asp:Button />完全相同，只不过它会创建一个表单来制作超链接，您可以将任何图像放入其中。

我强调使用LinkButton代替ImageButton，因为ImageButton使用不同的事件处理程序，这使得难以在它们之间来回切换。对于Linkbuttons和Buttons，它们使用相同的事件处理程序，因此在它们之间切换相当容易。

Answer 2

他们是一样的，你可以做这样的事情：

<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
            Text="Go&nbsp;" Width="60px" />

some style:
.addButtonStyle {
    border: 1px solid #e1ecfc;
    background-color: #B9D1F4;
    color: #003399;
    background-image: url(partgrad.gif);
    background-repeat: repeat-x;
}

Answer 3

试试这个例子

或在此处查看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 <a href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html</a>
 </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>

就像页面所说的那样，这是最简洁的Java脚本。这是可访问和浏览器友好。

C＃ASP.Net花式按钮

3 个答案: