ASP.NET - Separadores

Sometimes we decide to separate process of form filling into several steps (pages). In past at using old ASP, we should solve this problem for example saving entered data into database table after each step. In table in database we would define some flag specifying whether the process of form filling was completed.However ASP.NET 2.0 offers more elegant solution where we can first fill multi page form completely and after store all entered data in table in database. To solve discussed problem we have available MultiView control and Wizard control. Following picture shows these controls in Visual Studio 2005 Toolbox tab.

Figure 1: MultiView and View Controls in Visual Studio toolbox

MultiView acts as container for group of View controls whereas on each View we can place further controls. In context of this tutorial we can sense View as one page of multi page form. Wizard control offers richer functionality than MultiView, it offers extra navigation for moving through several pages of form, header and information panel containing list of all steps where is also current step marked. In this tutorial we focus on MultiView control, because it allows us to create fully customized multipage form. Using of MultiView is very simple and illustrates it next code snippet:

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
      <asp:View ID="View1" runat="server"> ... </asp:View>
      <asp:View ID="View2" runat="server"> ... </asp:View>
      <asp:View ID="View3" runat="server"> ... </asp:View>
      <asp:View ID="View4" runat="server"> ... </asp:View>
</asp:MultiView>

In this snippet we create one MultiView control with 4 View controls. MultiView as container can contain several controls of View type, but only one View can be active. Only controls on active View will be rendered to client. We can set active View setting ActiveViewIndex property or calling SetActiveView method of MultiView control.

As practical demonstration of using MultiView control for creating multi page form we use form for filling basic personal data. In first step will be filled personal data such as name and surname. In second step will be contact data filled and in third step will be displayed summarization of entered data and button for form processing (for example saving into database). Creating this form using MultiView control in Visual Studio 2005 (Designer mode) shows following picture:

Figure 2: MultiView Control in design mode

Source code for this tutorial you can download here.

In this sample is visibility of navigation buttons set in overridden OnPreRender method. Practical demonstration of created multi page form shows following pictures.

Figure 3: First page - Personal data

Figure 4: Second page - Contact data

Figure 5: Third page - Summary

In conclusion we describe method used by MultiView control for storing data between postbacks. MultiView uses ViewState to persist state of controls placed on View controls. States of all Views are stored in ViewState. This can lead into ViewState enlarging when form contains many pages with many controls. This behavior can be sometimes unadvisable, because it enlarges the size of page transferred to client.

We can solve this problem changing place where ViewState is stored. Overriding LoadPageStateFromPersistenceMedium and SavePageStateToPersistenceMedium method of System.Web.UI.Page class we can implement custom mechanism of ViewState storing for example into database.

ASP.NET - Menus estáticos e dinâmicos

Abra o Visual Web Developer Express Edition (você não pode reclamar ele é gratuíto) e crie um novo site web através da opção do menu File -> New Web Site... . A seguir batize o projeto com um nome sugestivo, que tal : menuAspNet ?

A seguir selecione o arquivo Default.aspx criado e no modo Design inclua o controle Menu a partir da ToolBox na seção Navigation:

O controle Menu possui uma propriedade Items que permite definir a árvore de itens a ser exibida pelo menu na página web. Então localize a propriedade items na janela de propriedades do controle e abra a janela Menu Item Editor e defina a estrutura conforme a da figura abaixo. (Utilize os recursos oferecidos na janela : Add root item, add child item , etc. e a propriedade Text)
Agora rode a sua página web usando o servidor web embutido no VWD para exibir o menu conforme as figuras abaixo:
Vocâ acabou de criar um menu com leiaute dinâmico de forma que para exibir os itens de uma opção você tem que passar o mouse sobre a opção correspondente.

Para criar um menu com leiaute estático você não precisa fazer quase nada , basta apenas usar a propriedade StaticDisplayLevels para definir quantos níveis do seu menu serão considerado como estáticos. Por exemplo se definimos o valor desta propriedade como igual a 3 para o nosso exemplo, todos os níveis serão exibidos como estáticos e o menu será exibido conforme a figura abaixo:

Neste leiaute você não precisa passar o mouse sobre as opções para exibir os itens existentes.

A propriedade NavigateURL pode ser usada para direcionar o usuário para uma URL quando um item do menu for clicado.

Esta propriedade pode ser encontrada na janela Menu Item Editor em Properties e selecionando a URL desejada para o direcionamento.

Até agora vimos como criar menus usando apenas o controle vamos mostrar em seguida como tornar este processo mais dinâmico de forma que você possa alterar os itens e opções do Menu sem precisar alterar o código da sua aplicação.

Como exemplo de utilização deste recurso vamos usar uma situação onde cada item do menu de opções representa um determinado produto e você necessita da flexibilidade de incluir um novo produto no menu do seu web site sem ter que alterar o código da sua aplicação.

ASP.NET - Confirmar clique no botão (Javascript)

  <asp:ImageButton ID="ImageButton2" runat="server"
            AlternateText="Esvaziar Cesto" Height="44px"
            ImageUrl="~/Clientes/Images/delete.png" onclick="ImageButton2_Click"
            Width="45px" OnClientClick=" if (confirm('Pretende mesmo esvaziar o cesto?') == false) return false;" />

ASP.NET - Aceder parâmetros SQLDataSource

<asp:GridView AutoGenerateEditButton="true"AutoGenerateColumns="false" DataKeyNames="UserID"DataSourceID="SqlDataSource1" ID="gvUsers" runat="server"OnRowUpdating="gvUsers_RowUpdating">

<Columns>

<asp:TemplateField HeaderText="UserName">

<ItemTemplate>

<asp:Label ID="lblUserName" runat="server" Text='<%# Eval("UserName") %>' />

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox ID="txtUserName" Enabled="false" runat="server"Text = '<%# Bind("UserName") %>' />

</EditItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="FirstName" HeaderText="First Name"/>

<asp:BoundField DataField="LastName" HeaderText="Last Name"/>

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"ConnectionString= "<%$ ConnectionStrings:ConnectionString %>"

SelectCommand="SELECT * FROM Users" UpdateCommand="UPDATE Users SET UserName = @UserName, FirstName = @FirstName, LastName = @LastName WHERE UserID = @UserID"OnUpdating="SqlDataSource1_Updating">

<UpdateParameters>

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="UserName" Type="String" />

</UpdateParameters>

</asp:SqlDataSource>

Agora, considere uma situação onde você não deseja exibir o nome do banco de dados, mas você quer mostrar o usuário atual no TextBox txtUsername. Para isso, você pode facilmente criar um método protegido e uso de DataBind para exibir o nome de usuário no TextBox txtUsername.

protected string GetUserName()

{

// This can also be User.Identity.Name

return "AzamSharp";

}

And in the GridView you can use something like this:

<EditItemTemplate>

<asp:TextBox ID="txtUserName" Enabled="false" runat="server"Text = '<%# GetUserName() %>' />

</EditItemTemplate>

Mas, agora a questão é que como você vai atualizar o nome de usuário ou enviar o nome de usuário para o banco de dados. Você não pode usar ControlParameter desde o nome da TextBox para cada linha GridView é diferente. No entanto, pode adicionar atribuir o parâmetro no evento Updating SqlDataSource.

protected void SqlDataSource1_Updating(object sender,SqlDataSourceCommandEventArgs e)

{

// Attach another parameter

e.Command.Parameters["@UserName"].Value = GetUserName();

}

This will insert the username "AzamSharp" in the database. Offcourse you can use User.Identity.Name to get the current logged user.

ASP.NET - VideoClube (Login)

Depois da teoria dos últimos tutoriais, como prometido, hoje vamos começar a trabalhar no nosso projecto de um Clube de Vídeo. Nestes tutoriais irei escrever mais código, mostrar mais imagens e explicar somente os pontos que acho serem necessários.

Vamos então ao que interessa.

Para começar abram o Visual Studio:
Cliquem em File->New->Project e escolham um projecto ASP.NET Web Application.
Nesta altura definimos a localização do nosso projecto.

Depois de criado projecto a primeira coisa a fazer é apagar a página default.aspx, porquê?

Porque vamos usar uma Master Page que será a mãe de todas as nossas páginas.

Adicionar uma Master Page:
Em cima do projecto, botão direito do rato, add->new-item
e escolhemos uma Master Page o nome será “Site.master”

Agora vamos começar a definir o nosso layout:
Primeiro arrastamos uma tabela HtML (está na toolbox) para a Master Page

Como devem ter reparado esta Master Page tem um controlo chamado “ContentPlaceHolder1”, este controlo serve para definir a área onde as páginas derivadas da Master Pager irão aparecer (um género de iframe).

Vamos colocar o ContentPlaceHolder1 no centro da tabela HTML e colocar o alinhamento vertical dessa célula ao topo.
Inserimos uma nova linha no topo da tabela. Vamos também fazer o merge da 2ª linha da coluna da direita com a 3ª linha e o mesmo com a coluna da esquerda.

Agora vamos ás pastas:
Para adicionar uma nova pasta, botão direito do rato em cima do projecto add->New Folder

Vamos adicionar para já 4 pastas, “Img”,”Scripts”,”Admin”,”User “.

• A pasta “img” vai conter as imagens do projecto.
• A pasta “Scripts” vai conter os ficheiros javascript.
• As pastas “Admin” e “User” vão ser para criar regras de acesso no site.

Adicionar imagem:
Para adicionar imagens ao projecto, clicamos com o botão direito do rato em cima da pasta “img” e add->Existing Item. Procuramos a imagem no disco e adicionamos.

Agora arrastamos a imagem importada para o canto superior esquerdo do nosso layout ou seja a primeira célula da tabela. Adicionamos um texto com o nome do nosso site no topo centro e um rodapé.

O que fizemos até agora.

Depois do Layout vamos tratar do nosso Login.
Para isso vamos á nossa toolbox e adicionamos um controlo LoginView na linha em baixo á imagem, este controlo permite definir o que vemos quando o utilizador está autenticado ou anónimo.

Existem dois templates neste controlo “Anonymous” e”LoggedIn”. Adicionamos ao template “Anonymous” um controlo Login e ao LoggedIn adicionamos o texto “Bem-vindo: ” e á frente adicionamos um controlo LoginName (Mostra o nome do utilizador) e também um controlo LoginStatus (permite fazer Logout).

Vamos colocar o controlo Login mais bonito, clicamos em cima dele e na seta que aparece e escolhemos “Auto Format” , depois escolhemos o tema Profissional.
Podemos também ir às propriedades do controlo e alterar todas as labels para Português, deixo isso para vocês explorarem.

Agora vem a parte complicada (ou não), os acessos!
A Microsoft fez um grande trabalho e o Membership Provider é uma das pérolas do ASP.NET, é tão simples de configurar que até chateia.

Para começar basta ir ao menu Project->ASP.NET Configuration

Irá aparecer-vos a página de administração onde podemos configurar utilizadores, acessos, grupos, etc.

Clicamos no link “Security” e vamos para a página de configuração, onde temos de primeiro fazer a alteração do tipo de atutenticação de” Windows” para “Forms”. Clicamos no link Select Authentication Type e escolhemos a opção “From the internet” e clicamos Done.

Está feito… Dificil hein?!
Neste momento temos disponível esta ferramenta para criar utilizadores, acessos, profiles, etc.

Nota:
Esta ferramenta vem configurada com os padrões de segurança, uma das coisas que mudo sempre é a password strength, não gosto de passwords muito complexas com letras e não alfanuméricos.

Para resolver isto basta colocar um pedaço de código no Web.config onde podemos fazer o override dos defaults.

Podem ver como neste blog.

Continuando na ferramenta e depois destas alterações no Web.Config vamos adicionar um utilizador.

Agora vamos activar os roles e adicionar um novo role com o nome Admin.

E associamos o nosso utilizador a esse role.

Agora vamos ás Access rules e criamos uma nova Access rule.
É aqui que entram as pastas “Admin” e “User” que criamos. Vamos colocar o role “Admin” com acesso à pasta “Admin” e negar aos anonymous users acesso a esta pasta.

Este é o resultado:

Para já ficamos por aqui na ferramenta de administração, mas ainda cá voltamos.

Depois destas alterações o que é que aconteceu? Onde estão guardados estes dados?
Esta ferramenta cria uma base de dados local (ASPNETDB.MDF) com todos estes dados, podem ver esta base de dados na pasta App_Data. Podemos também guardar os dados numa BD SQlServer.

Agora para verificarmos que funciona temos de criar uma página derivada da nossa Master Page.
Para isso, botão direito em cima do projecto Add->New Item e escolhemos uma WebForm, dependendo da vossa versão do Visual Studio, esta pode ser uma página normal onde escolhemos uma checkbox a dizer que tem Master Page ou então adicionamos uma Web Content Form que automaticamente deriva de uma Master Page. O nome desta página TEM de ser default.aspx (poupa trabalho).

O resultado desta página será o layout da Master Page, com um sitio para colocar o conteúdo da página o “ContentPlaceHolder”.
Depois iremos tratar desta página, para já e para finalizar vamos experimentar o nosso Login.

Correu tudo bem? Óptimo, neste momento já têm um site com controlo de acessos e foi tão simples.

Download: ASP.NET – Tutorial 06 [290.87KB]

Bom meus amigos por hoje é tudo espero que tenham gostado, para a semana voltamos com a segunda parte do nosso tutorial.
Qualquer dúvida ou sugestão escrevam em baixo.

Export Data Grid in Excel Word And Text File

<%@ 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>Export Data Grid Data:: TO Excel, Word , Notepad</title>

</head>

<body>

    <form id="form1" runat="server">

        <table cellpadding="10" cellspacing="10" width="100%" align="center" style="background: #33CCFF;">

            <tr>

                <td>

                    <asp:Button ID="btnExcel" runat="server" Text="Export to Excel" OnClick="btnExcel_Click1">

                    </asp:Button>

                    <asp:Button ID="btnWord" runat="server" Text="Export to Word" OnClick="btnWord_Click1">

                    </asp:Button>

                    <asp:Button ID="btnText" runat="server" Text="Export to Text File" OnClick="btnText_Click1">

                    </asp:Button>

                </td>

            </tr>

            <tr>

                <td>

                    <asp:DataGrid ID="myDataGrid" runat="server" AutoGenerateColumns="true" CellPadding="4"

                        ForeColor="#333333" GridLines="None">

                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

                        <EditItemStyle BackColor="#999999" />

                        <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />

                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />

                        <AlternatingItemStyle BackColor="White" ForeColor="#284775" />

                        <ItemStyle BackColor="#F7F6F3" ForeColor="#333333" />

                        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

                    </asp:DataGrid>

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

 

Bind this data grid according to your need.
 

This is the aspx.cs:

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.IO;

using System.Text;

using System.Data.SqlClient;

using System.Configuration;

public partial class _Default : System.Web.UI.Page

{

    SqlDataAdapter da;

    DataSet ds = new DataSet();

    SqlConnection con;

    SqlCommand cmd = new SqlCommand();

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            Binddata();

        }

    }

    public void Binddata()

    {

        con = new SqlConnection("server=.;uid=sa;pwd=wintellect;database=Mydata;");

        cmd.CommandText = "select * from User";

        cmd.Connection = con;

        da = new SqlDataAdapter(cmd);

        da.Fill(ds);

        con.Open();

        cmd.ExecuteNonQuery();

        myDataGrid.DataSource = ds;

        myDataGrid.DataBind();

        con.Close();

    }

//To Import Datagrid in Excel File

    protected void btnExcel_Click1(object sender, EventArgs e)

    {

        Response.Clear();

        Response.AddHeader("content-disposition", "attachment;filename=FileName.xls");

        Response.Charset = "";

        Response.Cache.SetCacheability(HttpCacheability.NoCache);

        Response.ContentType = "application/vnd.xls";

        System.IO.StringWriter stringWrite = new System.IO.StringWriter();

        System.Web.UI.HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWrite);

        myDataGrid.RenderControl(htmlWrite);

        Response.Write(stringWrite.ToString());

        Response.End();

    }

//To Import Datagrid in Word File

    protected void btnWord_Click1(object sender, EventArgs e)

    {

        Response.Clear();

        Response.AddHeader("content-disposition", "attachment;filename=FileName.doc");

        Response.Charset = "";

        Response.Cache.SetCacheability(HttpCacheability.NoCache);

        Response.ContentType = "application/vnd.word";

        System.IO.StringWriter stringWrite = new System.IO.StringWriter();

        System.Web.UI.HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWrite);

        myDataGrid.RenderControl(htmlWrite);

        Response.Write(stringWrite.ToString());

        Response.End();

    }

//To Import Datagrid in Text File

    protected void btnText_Click1(object sender, EventArgs e)

    {

        con = new SqlConnection("server=.;uid=sa;pwd=wintellect;database=Mydata;");

        cmd.CommandText = "select * from User";

        cmd.Connection = con;

        da = new SqlDataAdapter(cmd);

        da.Fill(ds);

        con.Open();

        cmd.ExecuteNonQuery();

        StringBuilder str = new StringBuilder();

        for (int i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)

        {

            for (int j = 0; j <= ds.Tables[0].Columns.Count - 1; j++)

            {

                str.Append(ds.Tables[0].Rows[i][j].ToString());

            }

            str.Append("<BR>");

        }

        Response.Clear();

        Response.AddHeader("content-disposition", "attachment;filename=FileName.txt");

        Response.Charset = "";

        Response.Cache.SetCacheability(HttpCacheability.NoCache);

        Response.ContentType = "application/vnd.text";

        System.IO.StringWriter stringWrite = new System.IO.StringWriter();

        System.Web.UI.HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWrite);

        Response.Write(str.ToString());

        Response.End();

    }

}

When you run the application; 


Image 1.

When it is exported  to Excel;


Image 2.

When the data grid is exported  to Word file;


Image 3.

And, when it is exported to Text file;