Crea un sito web con Asp.Net e Monodevelop su Linux

Oltre a sviluppare web in Windows abbiamo Visual Studio .Net e il server IIS, in Linux possiamo usare Monodevelop e il server Apache con il modulo XSP.

ASP.NET con Apache

Il modulo mod_mono Apache utilizzato per eseguire applicazioni ASP.NET sul server web Apache.
Il modulo mod_mono viene eseguito all'interno di un processo Apache e passa tutte le richieste dalle applicazioni ASP.NET a un processo Mono esterno che ospita le applicazioni ASP.NET.

Installeremo Monodevelop su Linux

 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF echo "deb http://download.mono-project.com/repo/debian wheezy main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list sudo apt-get update 

Installeremo il server per testare XSP 4 su Linux

 sudo apt-get install mono-xsp4-base

Che cos'è l'XPS?XSP è un server da utilizzare nei test di sviluppo, se vogliamo che un server o un'applicazione web funzionino in modo professionale, è meglio usare Apache e mod_mono, così otterremo la scalabilità e la sicurezza fornite da Apache.
Allora apriamo Monosviluppo e selezioniamo Nuovo progetto (Nella pagina di benvenuto o nel menu File), per aprire la finestra di dialogo Nuova soluzione. Nell'elenco dei tipi di progetto a sinistra espandere la categoria C# e selezionare l'opzione ASP.NET.

Assegniamo un nome al progetto di esempio Aspnet e selezioniamo una directory dove salvare il progetto.
All'avvio vedremo che i file predefiniti vengono generati nei progetti, sono:

• Predefinito.aspx che sarà la home page.
• Global.asax che sarà il file con le impostazioni globali del codice c# per la funzionalità del sito.
• Web.config È il file xml con le impostazioni del sito web.

Struttura del web

Definiremo la struttura di un sito web dove avremo la necessità di ripetere alcune parti di una pagina del sito come l'intestazione, il menu e per non ripetere quel codice in tutte le pagine quello che possiamo fare è creare una Pagina Master e farne riferimento nelle altre pagine.

Le pagine principali su ASP.net hanno l'estensione del file .maestro e nei settori in cui vogliamo che il web sia dinamico o cambi il contenuto utilizziamo un oggetto chiamato ContentPlaceHolder, nella struttura delle pagine possiamo utilizzare html oppure html5, css e js.
Creeremo la pagina principale o la pagina principale, per questo faremo File> Webform ASP.NET> pagina principale con Codebihind, la chiameremo home.master
Dentro home.master scriviamo la struttura html del web

 Il mio Web ASP.netLa mia demo Web ASP.net

Ora creiamo il file css che si chiamerà styles.css e lo metteremo nella stessa cartella del progetto.

 corpo {sfondo: # f8f8f8; margine: 0; imbottitura: 0; dimensione del carattere: 11px; altezza della linea: 16px; font-family: Arial, Tahoma;} a {color: # 333333;} a: hover {text-decoration: none;} #head {background: # 258dc8 repeat-x; box-shadow: 0 0 20px # f2f2f2 riquadro; altezza: 100px; } #logo {larghezza: 780 px; margine: 0; imbottitura: 8px; } #logo a {colore: #FFFFFF; decorazione del testo: nessuna; font-weight: grassetto; altezza: 12px; dimensione del carattere: 20px; text-transform: maiuscolo;} #logo a: hover {} #menu {background: # 666666; width: 1000px; margin-top: 33px; padding: 0px; display: inline-block;} #menu ul {background: blu;larghezza: 780px; margine: 0 automatico; margin-top: 3px;list-style: nessuno; imbottitura: 0; text-align: left;} #menu ul li {display: inline} #menu ul a {display: block; galleggiante: sinistro; font-weight: grassetto; dimensione del carattere: 13px; decorazione del testo: nessuna; colore: #fff; imbottitura: 8px 10px; larghezza: 118px; allineamento del testo: centro; text-transform: maiuscolo;} #menu ul a: hover {color: # 232323;} #menu ul a.active {color: # 232323;} #menu ul a.active: hover {color: # 232323;} #contenitore {larghezza: 1000 pixel; margine: 0 auto;} #body {larghezza: 100%; margine: 0px; float: left;} # largeimage {altezza: 150px; nessuna ripetizione # fe5d00; riempimento: 30px 0 30px 50px; line-height: 24px;} #content {float: left; sfondo: #ffffff ripeti-x; margine: 0px; larghezza: 750px; colore: # 6f6e6e; imbottitura: 10px; } #colonna {float: sinistra; colore di sfondo: #cccccc; bordo: 1px solido # e3e3e3; raggio di confine: 4px; box-shadow: 0 0 20px # f2f2f2 riquadro; ripetizione-x; margine: 0px; larghezza: 200px; colore: # 6f6e6e; imbottitura: 10px; } #torta {sfondo: # 333333; ripetizione-x; altezza: 40px; margine superiore: 20 px; clear: both;} Successivamente nel file home.master aggiungeremo il menu ASP.NET

Questo controllo Menu ci consente di assegnare diverse proprietà come orientamento, dimensione, colore di sfondo, può essere progettato visivamente in Visual Studio.net in Monodevelop è conveniente per noi gestirlo da CSS. Dobbiamo anche definire le aree di contenuto oi blocchi per la colonna e il contenuto web con il controllo ContentPlaceHolder
Per la colonna il codice sarà il seguente:

Per il contenuto il codice sarà il seguente:

Per il piede definiremo il blocco del piede e il codice sarà il seguente:

Quindi dobbiamo indicare quale sarà il web di partenza da mostrare che sarà collegato alla pagina principale, nel file Predefinito.aspx Eliminiamo il contenuto predefinito e scriviamo il seguente codice:

Qui indichiamo qual è la pagina master che è il file dov'è il codice della pagina che andremo a mostrare e qual è la pagina in questo caso Default.
Facciamo anche riferimento alle zone dinamiche per aggiungere contenuto. La colonna ID può essere qualsiasi nome per identificare quel particolare contenuto:

Sezioni

I saldi
Auto nuove
Auto usate

Cercare: 

Il blocco di contenuto assegniamo un'immagine:

Dobbiamo anche indicare qual è la home page tramite l'evento load nel file Default.aspx.cs, scriviamo l'evento load

 classe parziale pubblica Predefinito: System.Web.UI.Page {protected void Page_Load (mittente oggetto, EventArgs e) {}} 

Vediamo come appare il web in Monodevelop fon F5 o dal menu Esegui

Aggiungiamo la pagina Servizi, lo faremo File> Nuovo file> Moduli Web ASP.Net e selezioniamo l'opzione Modulo di contenuto con Codebihind e ci mostrerà una finestra di dialogo per selezionare la pagina principale a cui si collegherà in questo caso Home.master

Apri il file Servizi.aspx e aggiungiamo il seguente codice:

Servizi

Accessori automobilistici
Motori e sterzo
Lamiera e vernice
Elettronica automobilistica

Cercare:
Siamo un'azienda dedicata alla riparazione e alla manutenzione dell'aria condizionata per autoveicoli e forniamo una vasta gamma di servizi per il tuo veicolo

Eseguiamo nuovamente per compilare le modifiche e vedremo che premendo il menu Servizi cambia il contenuto della colonna e del blocco di contenuto:

Infine definiamo la struttura per la pagina Contatti. Aggiungiamo la pagina Contatti, lo faremo File> Nuovo file> Moduli Web ASP.Net e selezioniamo l'opzione Modulo di contenuto con Codebihind e ci mostrerà una finestra di dialogo per selezionare la pagina principale a cui si collegherà in questo caso Home.master
Apriamo il file Contatto.aspx e aggiungiamo il seguente codice:

 
Contatto
 
 
Telefono
 
XXXXXXXX
 

 
 
l'attenzione del pubblico
lunedi al venerdì
dalle 09:00 alle 17:00
 

 
 
E-mail
 
[email protected]

 

 
 
 
Nome:
 
 

 
 
E-mail:
 
 

 
 
Messaggio:
 
 

 
 
 
 

 

 

Eseguiamo di nuovo per compilare il web e farlo apparire nel nostro browser e andare al menu Contatto, il risultato sarà il seguente:

Vediamo così come le colonne dinamiche hanno modificato il contenuto ma il menu e l'intestazione non sono mai cambiati e li abbiamo sempre riutilizzati senza riscriverli. Finora abbiamo visto come creare una pagina master con c# e MonodevelopPossiamo anche creare un web con dati dinamici con Mysql o SqlServer, per testare il web su un server reale, abbiamo bisogno di un server che supporti asp.net, ce ne sono diversi gratuiti, caricare il web via ftp e caricare tutti i file del progetto.