Flerbrukssider

Hva

En enkel side med alternativt innhold

Ofte kan det være en fordel å redusere antall filer som skal administres. Det vi skal se på her er verktøy for å lage vevsider som kan inneholde faste komponenter og variable komponenter. I motsetning til teknikken med templates, Masterpages, så er hele beskrivelsen, både av de faste og de variable komponentene administrert i en fysisk fil.-

Dette er muliggjort av komponentene MultiView og View. Vi kan pakke flere Views inn i en MultiView og bestemme i programkoden på tjeneren hvilken av View'ene som skal sendes til klienten til en hver tid. Illustrasjonen viser en side med to faste komponenter og ett MultiView. Bare en av de tre alternative View'ene vises om gangen.

Fordelene med dette er tre:

Vi har en felles referanseramme på siden. Det betyr at vi kan legge fra oss data direkte på siden som vi kan bruke senere, neste oppdatering ( round-trip).
Vi har noe av den samme gevinsten som med masterpages når det gjelder layout
Vi kan editere og administrere kun en fil. Dette er selvsagt ikke noen ubetinget fordel når kompleksiteten øker.

Koden som får dette til å tikke er best illustrert ved følgende svært enkle versjon av Page_Load i den "code-behind"-fila som lages for vår sammensatte side:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        MultiView1.SetActiveView(View1);
}

Altså hvis det er første gangen siden lastes, viser vi View1. Hva vi skal gjøre i andre tilfeller kan vi kontrollere med å lese verdier og respondere på museklikk. F.eks. slik, en button-respons i samme fil:

protected void Submit3_ServerClick(object sender, EventArgs e)
{
    // user has clicked a button that should be answered with View2
    MultiView1.SetActiveView(View2);
}

SetActiveView velger altså ut hva som skal returneres.

Et enkelt eksempel

Vi lager et enkelt eksempel basert på den strukturen vi brukte som illustrasjon ovenfor, faste felter oppe og nede på siden og en MultiView med tre Views.

Du kan teste herhttp://donau.hiof.no/borres/dn/demosite7/Default.aspx

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
            MultiView1.SetActiveView(View1);
        else
            remember.Text += Convert.ToString(MultiView1.ActiveViewIndex+1);
    }
    protected void Button12_Click(object sender, EventArgs e)
    {
        MultiView1.SetActiveView(View2);
    }
    protected void Button13_Click(object sender, EventArgs e)
    {
        MultiView1.SetActiveView(View3);
    }
    protected void Button21_Click(object sender, EventArgs e)
    {
        MultiView1.SetActiveView(View1);
    }
    protected void Button23_Click(object sender, EventArgs e)
    {
        MultiView1.SetActiveView(View3);
    }
    protected void Button31_Click(object sender, EventArgs e)
    {
        MultiView1.SetActiveView(View1);
    }
    protected void Button32_Click(object sender, EventArgs e)
    {
        MultiView1.SetActiveView(View2);
    }
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  
         CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Simple demo</title>
</head>
<body>
<h1>Overskrift</h1>
<p>Felles tekst øverst på siden</p>
<p>
<asp:Label ID="remember" runat="server" Text="Her har du vært:" Width="674px"></asp:Label>
</p>    
<form id="form1" runat="server">
    <div>
     <asp:MultiView ID="MultiView1" runat="server">
         <!-- View 1 -->
         <asp:View ID="View1" runat="server">
         <fieldset style="padding:10px">
             Dette er View 1. Hva vil du se nå:<br />
             <asp:Button ID="Button12" runat="server" Text="View2" OnClick="Button12_Click" />
             <asp:Button ID="Button13" runat="server" Text="View3" OnClick="Button13_Click" />
         </fieldset>
         </asp:View>
         
         <!-- View 2 -->
         <asp:View ID="View2" runat="server">
         <fieldset style="padding:10px">
             Dette er View 2. Hva vil du se nå:<br />
             <asp:Button ID="Button21" runat="server" Text="View1" OnClick="Button21_Click" />
             <asp:Button ID="Button23" runat="server" Text="View3" OnClick="Button23_Click" />
          </fieldset>
         </asp:View>
         
         <!-- View 3 -->
         <asp:View ID="View3" runat="server">
         <fieldset style="padding:10px">
             Dette er View 3. Hva vil du se nå:<br />
             <asp:Button ID="Button31" runat="server" Text="View1" OnClick="Button31_Click" />
             <asp:Button ID="Button32" runat="server" Text="View2" OnClick="Button32_Click" />
         </fieldset>
         </asp:View>
     </asp:MultiView>
    </div>
    </form>
 <p>Felles tekst nederst på siden</p>
</body>
</html>

Referanser

Prosjekt:

https://svn.hiof.no/svn/psource/Csharpsites/demosite7

Vedlikehold

B.Stenseth, januar 2007

(Velkommen) Moduler>Websites>Flerbrukssider (Login)