Crie um site com Asp.Net e Monodevelop no Linux

Além de desenvolver web em Windows temos o Visual Studio .Net e o servidor IIS, no Linux podemos usar o Monodevelop e o servidor Apache com o módulo XSP.

ASP.NET com Apache


O módulo mod_mono Apache usado para executar aplicativos ASP.NET no servidor da web Apache.
O módulo mod_mono é executado dentro de um processo Apache e passa todas as solicitações de aplicativos ASP.NET para um processo Mono externo que hospeda aplicativos ASP.NET.

Vamos instalar o Monodevelop no 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 

Vamos instalar o servidor para testar o XSP 4 no Linux

 sudo apt-get install mono-xsp4-base
O que é XPS?O XSP é um servidor para uso em testes de desenvolvimento, se queremos ter um servidor ou aplicação web rodando profissionalmente, é melhor usar Apache e mod_mono, assim conseguiremos a escalabilidade e segurança que o Apache oferece.
Então nós abrimos MonoDevelop e nós selecionamos Novo projeto (Na página de boas-vindas ou no menu Arquivo), para abrir a caixa de diálogo Nova solução. Na lista de tipos de projeto à esquerda, expanda a categoria C # e selecione a opção ASP.NET.

Atribuímos um nome ao projeto de exemplo Aspnet e selecionamos um diretório onde salvar o projeto.
Quando começarmos veremos que os arquivos padrão são gerados nos projetos, são eles:
  • Default.aspx que será a página inicial.
  • Global.asax que será o arquivo com as configurações globais do código c # para a funcionalidade do site.
  • Web.config É o arquivo xml com as configurações do próprio site.

Estrutura da web


Vamos definir a estrutura de um site onde teremos a necessidade de repetir algumas partes de uma página do site como o cabeçalho, o menu e para não repetir esse código em todas as páginas o que podemos fazer é criar uma Master Page e referenciá-lo nas outras páginas.

As páginas mestras em ASP.net têm a extensão de arquivo .mestre e nos setores onde queremos que a web seja dinâmica ou altere o conteúdo usamos um objeto chamado ContentPlaceHolder, na estrutura das páginas podemos usar html ou html5, css e js.
Vamos criar a página mestra ou página mestra, para isso vamos Arquivo> ASP.NET Webforms> página mestra com Codebihind, vamos chamá-la home.master
Dentro de home.master, escrevemos a estrutura html da web
 My Web ASP.netMy Web ASP.net Demo
Agora vamos criar o arquivo css que se chamará styles.css e o colocaremos na mesma pasta do projeto.
 body {background: # f8f8f8; margem: 0; preenchimento: 0; tamanho da fonte: 11px; altura da linha: 16px; font-family: Arial, Tahoma;} a {color: # 333333;} a: hover {text-decoration: none;} #head {background: # 258dc8 repeat-x; box-shadow: 0 0 20px # f2f2f2 inserido; altura: 100px; } #logo {largura: 780px; margem: 0; preenchimento: 8px; } #logo a {color: #FFFFFF; decoração de texto: nenhum; intensidade da fonte: Negrito; altura: 12px; tamanho da fonte: 20px; text-transform: uppercase;} #logo a: hover {} #menu {background: # 666666; width: 1000px; margin-top: 33px; padding: 0px; display: inline-block;} #menu ul {background: blue; largura: 780px; margem: 0 automático; margin-top: 3px; estilo de lista: nenhum; preenchimento: 0; alinhamento de texto: esquerdo;} #menu ul li {display: inline} #menu ul a {display: block; flutuar: esquerda; intensidade da fonte: Negrito; tamanho da fonte: 13px; decoração de texto: nenhum; cor: #fff; preenchimento: 8px 10px; largura: 118px; alinhamento de texto: centro; text-transform: uppercase;} #menu ul a: hover {color: # 232323;} #menu ul a.active {color: # 232323;} #menu ul a.active: hover {color: # 232323;} #container {largura: 1000px; margem: 0 auto;} #body {largura: 100%; margem: 0px; float: left;} # imagem grande {height: 150px; no-repeat # fe5d00; preenchimento: 30px 0 30px 50px; altura da linha: 24px;} #content {float: left; plano de fundo: #ffffff repeat-x; margem: 0px; largura: 750px; cor: # 6f6e6e; preenchimento: 10px; } #column {float: left; cor de fundo: #cccccc; borda: 1px sólido # e3e3e3; raio da borda: 4px; box-shadow: 0 0 20px # f2f2f2 inserido; repeat-x; margem: 0px; largura: 200px; cor: # 6f6e6e; preenchimento: 10px; } #pie {background: # 333333; repeat-x; altura: 40px; margem superior: 20px; limpar: ambos;} Em seguida, no arquivo home.master, adicionaremos o menu ASP.NET
Este controle de Menu nos permite atribuir diferentes propriedades, como orientação, tamanho, cor de fundo, pode ser projetado visualmente no Visual Studio.net no Monodevelop, é conveniente para nós manipulá-lo a partir de CSS. Devemos também definir as áreas de conteúdo ou blocos para a coluna e o conteúdo da web com o controle ContentPlaceHolder
Para a coluna, o código será o seguinte:
Para o conteúdo, o código será o seguinte:
Para o pé, definiremos o bloco do pé e o código será o seguinte:
A seguir devemos indicar qual será a web inicial a mostrar que será vinculada à página mestra, no arquivo Default.aspx Excluímos o conteúdo padrão e escrevemos o seguinte código:
 
Aqui indicamos qual é a página master qual é o arquivo onde está o código da página que vamos mostrar e qual é a página neste caso Default.
Também referenciamos as zonas dinâmicas para adicionar conteúdo a elas. A coluna ID pode ser qualquer nome para identificar esse conteúdo específico:

Seções

  • Vendas
  • Novos carros
  • Carros usados
Olhe para:
O bloco de conteúdo que atribuímos uma imagem:
  
Devemos também indicar qual é a página inicial através do evento load no arquivo Default.aspx.cs, escrevemos o evento load
 classe pública parcial Padrão: System.Web.UI.Page {protected void Page_Load (objeto remetente, EventArgs e) {}} 
Vamos ver como fica a web em Monodevelop fon F5 ou no menu Executar

Nós adicionamos a página de serviços, vamos Arquivos> Novo arquivo> Formulários da Web ASP.Net e selecionamos a opção Formulário de conteúdo com Codebihind e ele nos mostrará uma caixa de diálogo para selecionar a página mestra para a qual ele se vinculará neste caso Home.master

Abra o arquivo Services.aspx e adicionamos o seguinte código:

Serviços

  • Acessórios automotivos
  • Motores e direção
  • Chapa metálica e tinta
  • Eletrônica automotiva
Olhe para:

Somos uma empresa que se dedica à reparação e manutenção de climatização automotiva, e prestamos um amplo leque de serviços para o seu veículo

Executamos novamente para compilar as alterações e veremos que ao pressionar o menu Serviços altera o conteúdo da coluna e do bloco de conteúdo:

Por fim, definimos a estrutura da página de contato. Nós adicionamos a página de contato, nós iremos Arquivos> Novo arquivo> Formulários da Web ASP.Net e nós selecionamos a opção Formulário de conteúdo com Codebihind e ele nos mostrará uma caixa de diálogo para selecionar a página mestra para a qual ele se vinculará neste caso Home.master
Abrimos o arquivo Contact.aspx e adicionamos o seguinte código:
 

Contato

Telefone XXXXXXXX
Atenção ao públicoSegunda a Sexta
09:00 às 17:00
E-mail [email protected]
Nome:
E-mail:
Mensagem:
Executamos novamente para compilar a web e fazê-la aparecer em nosso navegador e ir ao menu Contato, o resultado será o seguinte:

Assim, vemos como as colunas dinâmicas mudaram o conteúdo, mas o menu e o cabeçalho nunca mudaram e sempre os reutilizamos sem reescrevê-los. Até agora nós vimos como criar uma página-mestre com c # e MonodevelopTambém podemos criar uma web com dados dinâmicos com Mysql ou SqlServer, para testar a web em um servidor real, precisamos de um servidor que suporte asp.net, existem vários gratuitos, carregue a web via ftp e carregue todos os arquivos do projeto.

Você vai ajudar o desenvolvimento do site, compartilhando a página com seus amigos

wave wave wave wave wave