Parte Grafica:
Ho un UpdatePanel (lo chiamo UpdatePanelFormNews) sulla sinistra del form. In questo Update ho inserito un asp:FormView: all'interno potete mettere nel ItemTemplate i campi che volete, label, textbox, ecc...
Questo mi serve per visualizzare il dettaglio della news.
Ho un'altro UpdatePanel (lo chiamo UpdatePanelListNews) sulla destra del form.
In questo Update ho inserito un asp:GridView. Ho impostato una sola colonna con il TemplateField e all'interno ho messo una label nascosta con l'id della news, due link button, uno per la categoria e l'altro per la data.
Codice:
1) intercetto l'evento RowCreated del gridview (lista delle news) e per ogni riga aggancio l'evento onmouseover e onmouseout javascript:
protected void ListNews_RowCreated(object sender, GridViewRowEventArgs e)
{
string rowID = String.Empty;
if (e.Row.RowType == DataControlRowType.DataRow)
{
rowID = "row" + e.Row.RowIndex;
e.Row.Attributes.Add("id", "row" + e.Row.RowIndex);
e.Row.Attributes.Add("onmouseover", "SelectRowOver(" + "'" + rowID + "'" + ")");
e.Row.Attributes.Add("onmouseout", "UnSelectRowOver(" + "'" + rowID + "'" + ")");
}
}
<script language="javascript" type="text/javascript">
function SelectRowOver(rowID) {
if (document.getElementById(rowID).className != 'selectedgridrowstyleListNews') {
document.getElementById(rowID).className = 'selectedgridrowstyleListNewsOnMouseOver';
}
}
function UnSelectRowOver(rowID) {
if (document.getElementById(rowID).className != 'selectedgridrowstyleListNews') {
document.getElementById(rowID).className = 'gridrowstyleListNews';
}
}
</script>
2)Implemento il RowCommand del gridview (Lista delle News). Recupero la label nascosta che contiene l'id della news e carico la news nel FormView
protected void ListNews_RowCommand(object sender, GridViewCommandEventArgs e)
{
int IDNews = 0;
try
{
IDNews = Convert.ToInt16(e.CommandArgument);
}
catch
{
return;
}
string carica = CaricaNewsForm(IDNews);
int row = 0;
for (int i = 0; i < ListNews.Rows.Count; i++)
{
string id = ((Label)ListNews.Rows[i].FindControl("id_news")).Text;
if ( Convert.ToInt16(id) == IDNews)
{
row = i;
break;
}
}
GridViewRow Riga = ListNews.Rows[row];
Riga.CssClass = "selectedgridrowstyleListNews";
}
3)Nella PageLoad se non sei in postBack carico La lista delle news. Se il query string contiene un id della news(vengo dalla homepage) carico quella altrimenti carico la prima della lista.
Poi io ho implementato tutta la parte di pagina avanti e indietro sia della lista che della form view a mano.
Sostanzialmente non faccio nulla di particolare solo che approfitto dell'update panel per non far ricaricare tutta la pagina. Qui non c'è jquery ma potrebbe essere implementato....molto semplicemente.
