Question

我正在为朋友建立一个网站，并且想知道如何编写像http://www.istockphoto.com/stock-photo-8544108-beauty-with-hat.php这样的可选菜单有多难 - 您选择图片尺寸的右侧菜单。我想在asp.net c＃中创建类似的东西。我在谷歌搜索了3个小时，找不到任何类似或有用的解决方案。有人可以帮忙吗？

alt text http://www.balexandre.com/temp/2009-09-25_1158.png

Answer 1

这很容易实现

1 - 在Visual Studio中创建一个新的AJAX启用网站

alt text http://www.balexandre.com/temp/2009-09-25_1201.png

2 - 放置一个脚本管理器 3 - 放置一个更新面板并在里面添加GridView和Textbox 4 - 告诉Update面板，ChildrenAsTriggers =“true” 5 - 在网格视图中添加2个事件，RowDataBound和SelectedIndexChanged

<body>
   <form id="form1" runat="server">
   <asp:ScriptManager ID="sm" runat="server" />
   <div>
      <asp:UpdatePanel ID="pnl" runat="server">
         <ContentTemplate>
            <asp:GridView ID="grid" runat="server" OnRowDataBound="grid_RowDataBound" OnSelectedIndexChanged="grid_SelectedIndexChanged">
               <Columns>
                  <asp:CommandField ShowSelectButton="True" />
               </Columns>
            </asp:GridView>
            <br />
            Credits:
            <asp:Label ID="lbl" runat="server" Text="Label" Font-Bold="true" />
         </ContentTemplate>
      </asp:UpdatePanel>
   </div>
   </form>
</body>

6 - 在两者中做点什么

protected void grid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onclick", "javascript:__doPostBack('grid','Select$" + e.Row.RowIndex + "')");
    }
}
protected void grid_SelectedIndexChanged(object sender, EventArgs e)
{
    lbl.Text = "changed...";
}

Answer 2

试试这个：

<style type="text/css">
  .selectedRow{background-color:#E8E8FF;}
</style>

<table id="selectMenu">
  <tr><th>Size</th><th>Pixles</th><th>File size</th><th>Credits</th></tr>
  <tr><td>Small</td> <td>849 × 565 px</td> <td>555.96 KB</td> <td>20</td></tr>
  <tr><td>Medium</td> <td>1698 × 1131 px</td> <td>1.89 KB</td> <td>30</td></tr>
</table>

<div style="height:50px;width:200px">
    <div style="float:right;text-align:left;">
    Total Credits: <span id="credits">&nbsp;</span>
        //YOU CAN USE ASP.net HIDDEN FIELD TO WORK ON SERVER SIDE
        <input type="hidden" id="creditsValue" value=""/>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
    $("table#selectMenu tr td").click(function(){
    var row=$(this).parent();
    //un-highlight any previously row
    $("table#selectMenu tr").removeClass("selectedRow");
    //highlight current row
    $(row).addClass("selectedRow");

    //get credits (from last td)
    var c=$(row).children(":last").text();
    //show credits required in span below table
    $("span#credits").text(c);
    $("#creditsValue").attr("value",c);
    })
});
</script>

asp.net中的可选网格行与C＃像istockphoto一样

2 个答案: