Selectable grid row in asp.net with C# like istockphoto
Question
I'm building a website for a friend and would like to know how hard is it to code a selectable menu like http://www.istockphoto.com/stock-photo-8544108-beauty-with-hat.php - the one on the right where you choose picture size. I would like to create something similar in asp.net c#. I searched for 3 hours on google and couldn't find any solution similar or useful. Can someone help please?
2 answers
solution1
0 2009-09-25 09:22:34
This is easy to accomplish
1 - create a new AJAX Enable Web Site in your Visual Studio
alt text http://www.balexandre.com/temp/2009-09-25_1201.png
2 - place an Script Manager 3 - place an Update Panel and add the GridView and Textbox inside 4 - tell the Update panel that ChildrenAsTriggers="true" 5 - add 2 events in the grid view, RowDataBound and 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 - do something in both
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...";
}
solution2
0 2009-09-25 10:04:53
try this:
<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"> </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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.