Controle de Usuários para Sistemas ASP.NET - Parte 4 - Interface de cadastro de Perfis/Usuários
Olá pessoal! Enfim, já modelamos o banco de dados e as classes que farão parte do nosso controle de usuários para sistemas ASP.NET, o exemplo já se encontra na Página de Suporte, e agora vamos falar sobre as telas de cadastro.
O cadastramento de perfis e usuários será feito de uma maneira que chamo de "single page module", ou seja, TODO o módulo estará em apenas UMA página. Ela é construída utilizando panels para controlar a visualização das grades de pesquisa e por janelas modais que são as telas de cadastro em si.
Esta página, assim como as outras do nosso exemplo, fazem herança visual e de código (veremos como a parte de herança de código será importante na parte 5) de uma master page. Portanto, não estranhem a ausência das tags de header, body e form :-)
Quando o módulo de Cadastro de Perfis/Usuários for acessado, é mostrado em primeiro lugar a grade de pesquisa de Perfis de Usuário. Observem o código desta parte da página, que mostra as grades dos cadastros, acompanhado de seu code-behind:
1: <div id="dvSelModulo" style="text-align:center;width:100%">
2: <span class="textotitulos">Selecione o módulo desejado</span><br />
3: <asp:DropDownList runat="server" ID="ddlSelecionaModulo" AutoPostBack="true" OnSelectedIndexChanged="ddlSelecionaModulo_SelectedIndexChanged">
4: <asp:ListItem Text="Cadastro de Perfis de Usuário" Value="1"></asp:ListItem>
5: <asp:ListItem Text="Cadastro de Usuários" Value="2"></asp:ListItem>
6: </asp:DropDownList>
7: </div>
8: <div id="dvPesqCadPerfil" runat="server">
9: <asp:UpdatePanel runat="server" ID="UpdPesqCadP">
10: <ContentTemplate>
11: <div class="divtitulo">
12: <span>Cadastro de Perfis de Usuário - Pesquisa</span>
13: </div>
14: <div>
15: <div style="position:absolute;width:250px;">
16: <span class="textotitulos">Descrição:</span><br />
17: <asp:TextBox runat="server" ID="tbxPesquisaDescPerfil"></asp:TextBox>
18: </div>
19: <div style="width:150px;left:260px;position:relative;top:6px;">
20: <asp:Button runat="server" ID="btnPesquisarPerfil" Text="Pesquisar Perfil" OnClick="btnPesquisarPerfil_Click" />
21: </div>
22: </div><br />
23: <div style="text-align:center;width:100%;border-top:solid 2px black">
24: <asp:Button runat="server" ID="btnInserirPerfil" Text="Inserir Novo Perfil" OnClick="btnInserirPerfil_Click" />
25: </div>
26: <div>
27: <asp:GridView runat="server" ID="gvCadPerfil" AutoGenerateColumns="false" OnRowDataBound="gvCadPerfil_RowDataBound" Width="100%">
28: <HeaderStyle CssClass="gridheader" />
29: <RowStyle CssClass="gridnormal" />
30: <Columns>
31: <asp:BoundField HeaderText="Código" DataField="PerfilId" />
32: <asp:BoundField HeaderText="Descrição" DataField="Descricao" />
33: <asp:TemplateField>
34: <ItemTemplate>
35: <asp:Button runat="server" ID="btnEditarPerfil" Text="Editar" OnClick="btnEditarPerfil_Click" />
36: <asp:Button runat="server" ID="btnExcluirPerfil" Text="Excluir" OnClientClick="return confirm('Senta o dedo na bagaça?');"
37: OnClick="btnExcluirPerfil_Click" />
38: </ItemTemplate>
39: </asp:TemplateField>
40: </Columns>
41: </asp:GridView>
42: </div>
43: </ContentTemplate>
44: </asp:UpdatePanel>
45: </div>
46: <div id="dvPesqCadUsu" style="display: none;" runat="server">
47: <asp:UpdatePanel runat="server" ID="UpdPesqCadUsu">
48: <ContentTemplate>
49: <div class="divtitulo">
50: <span>Cadastro de Usuários - Pesquisa</span>
51: </div>
52: <div>
53: <div style="position:absolute;width:150px;">
54: <span class="textotitulos">Nome Completo:</span><br />
55: <asp:TextBox runat="server" ID="tbxPesqNomeUsu" CssClass="textboxes"></asp:TextBox>
56: </div>
57: <div style="width:150px;left:160px;position:absolute;">
58: <span class="textotitulos">Login:</span><br />
59: <asp:TextBox runat="server" ID="tbxPesqLoginUsu" CssClass="textboxes"></asp:TextBox>
60: </div>
61: <div style="width:150px;position:absolute;left:320px;">
62: <span class="textotitulos">Perfil:</span><br />
63: <asp:DropDownList runat="server" ID="ddlPesqPerfilUsu" CssClass="textboxes">
64: </asp:DropDownList>
65: </div>
66: <div style="width:100px;position:absolute;left:480px;">
67: <span class="textotitulos">Status:</span><br />
68: <asp:DropDownList runat="server" ID="ddlPesqStatusUsu" CssClass="textboxes">
69: <asp:ListItem Value="" Text="--TODOS--"></asp:ListItem>
70: <asp:ListItem Value="A" Text="ATIVO"></asp:ListItem>
71: <asp:ListItem Value="I" Text="INATIVO"></asp:ListItem>
72: </asp:DropDownList>
73: </div>
74: <div style="position:relative;left:620px;width:100px;top:8px;">
75: <asp:Button runat="server" ID="btnPesquisarUsu" Text="Pesquisar Usuário" OnClick="btnPesquisarUsu_Click" />
76: </div>
77: </div><br />
78: <div style="width:100%;text-align:center;border-top:solid 2px black;">
79: <asp:Button runat="server" ID="btnInserirUsuario" Text="Inserir Novo Usuário" OnClick="btnInserirUsuario_Click" />
80: </div>
81: <div>
82: <asp:GridView runat="server" ID="gvPesqUsuarios" AutoGenerateColumns="false" OnRowDataBound="gvPesqUsuarios_RowDataBound" Width="100%">
83: <HeaderStyle CssClass="gridheader" />
84: <RowStyle CssClass="gridnormal" />
85: <Columns>
86: <asp:BoundField DataField="Login" HeaderText="Login" />
87: <asp:BoundField DataField="Nome" HeaderText="Nome Completo" />
88: <asp:BoundField DataField="Status" HeaderText="Status" />
89: <asp:TemplateField HeaderText="Perfil">
90: <ItemTemplate>
91: <asp:Label runat="server" ID="lbPerfil"></asp:Label>
92: </ItemTemplate>
93: </asp:TemplateField>
94: <asp:TemplateField>
95: <ItemTemplate>
96: <asp:Button runat="server" ID="btnEditarUsuario" Text="Editar" OnClick="btnEditarUsuario_Click" />
97: <asp:Button runat="server" ID="btnExcluirUsuario" Text="Excluir" OnClientClick="return confirm('Senta o dedo na bagaça?');"
98: OnClick="btnExcluirUsuario_Click" />
99: </ItemTemplate>
100: </asp:TemplateField>
101: </Columns>
102: </asp:GridView>
103: </div>
104: </ContentTemplate>
105: </asp:UpdatePanel>
106: </div>
Code Behind:
1: protected void Page_Load(object sender, EventArgs e)
2: {
3: if (!IsPostBack)
4: {
5: ViewState.Add("CodigoPerfil", "0");
6: ViewState.Add("UsuID", "0");
7:
8: //Populando o combo-box de Pesquisa de Perfil
9: ddlPesqPerfilUsu.DataSource = TPerfilUsuario.ListarPerfis("");
10: ddlPesqPerfilUsu.DataValueField = "PerfilId";
11: ddlPesqPerfilUsu.DataTextField = "Descricao";
12: ddlPesqPerfilUsu.DataBind();
13: ddlPesqPerfilUsu.Items.Insert(0, new ListItem("--TODOS--", "0"));
14:
15: //Populando o combo-box de seleção de perfil do cadastro de usuários
16: ddlPerfilUsuario.DataSource = TPerfilUsuario.ListarPerfis("");
17: ddlPerfilUsuario.DataValueField = "PerfilId";
18: ddlPerfilUsuario.DataTextField = "Descricao";
19: ddlPerfilUsuario.DataBind();
20: }
21: }
22:
23: protected void ddlSelecionaModulo_SelectedIndexChanged(object sender, EventArgs e)
24: {
25: switch ((sender as DropDownList).SelectedIndex)
26: {
27: case 0: { dvPesqCadPerfil.Style[HtmlTextWriterStyle.Display] = ""; dvPesqCadUsu.Style[HtmlTextWriterStyle.Display] = "none"; break; }
28: case 1: { dvPesqCadPerfil.Style[HtmlTextWriterStyle.Display] = "none"; dvPesqCadUsu.Style[HtmlTextWriterStyle.Display] = ""; break; }
29: }
30: }
Como vocês podem ver, cada gridview está contido dentro de um div, com o atributo runat=server. O div correspondente ao grid de perfil se encontra visível, e o de usuários oculto. Um drop down permite alternar a visibilidade destes divs, conforme o método SelectedIndexChanged do mesmo: De acordo com a opção, seto o atributo Display para vazio ou none. E note também que cada div contém seu próprio UpdatePanel.
Cada cadastro tem seus próprios filtros de pesquisa e controles também, de forma que sejam completamente independentes um do outro.
No evento PageLoad, faço a pré-carga dos combo-boxes do filtro de pesquisa de perfil e do combo de seleção de perfil do cadastro de usuários, além de inicializar dois Viewstates que são utilizados para controlar o ID do registro selecionado dos grids.
Vamos detalhar agora o cadastro de Perfil de Usuário, com a sua janela e o code-behind correspondente:
1: <div id="dvDetCadPerfil" class="jqmWindow">
2: <asp:UpdatePanel runat="server" ID="UpdatePanel1">
3: <ContentTemplate>
4: <div class="divtitulo">
5: <span>Cadastro de Perfis de Usuário</span>
6: </div>
7: <fieldset>
8: <span class="textotitulos">Código:</span><br />
9: <asp:TextBox runat="server" ID="tbxCodigoPerfil" ReadOnly="true" CssClass="textboxes"></asp:TextBox><br />
10: <span class="textotitulos">Descrição</span><br />
11: <asp:TextBox runat="server" ID="tbxDescricaoPerfil" CssClass="textboxes"></asp:TextBox><br />
12: <div>
13: <asp:Button runat="server" ID="btnCancelarCadPerfil" Text="Cancelar" OnClick="btnCancelarCadPerfil_Click" />
14: <asp:Button runat="server" ID="btnSalvarPerfil" Text="Salvar" OnClick="btnSalvarPerfil_Click" />
15: </div>
16: </fieldset>
17: <div class="divtitulos">
18: <span>Módulos que este perfil pode acessar</span>
19: </div>
20: <asp:GridView runat="server" ID="gvModulosPerfil" AutoGenerateColumns="false" OnRowDataBound="gvModulosPerfil_RowDataBound" Width="100%">
21: <HeaderStyle CssClass="gridheader" />
22: <RowStyle CssClass="gridnormal" />
23: <Columns>
24: <asp:BoundField HeaderText="Código do Módulo" DataField="ModuloId" />
25: <asp:BoundField HeaderText="Descrição do Módulo" DataField="Descricao" />
26: <asp:TemplateField HeaderText="Tem Acesso?">
27: <ItemTemplate>
28: <asp:CheckBox runat="server" ID="chkPermissaoModulo" />
29: </ItemTemplate>
30: </asp:TemplateField>
31: </Columns>
32: </asp:GridView>
33: </ContentTemplate>
34: </asp:UpdatePanel>
35: </div>
1: protected void gvCadPerfil_RowDataBound(object sender, GridViewRowEventArgs e)
2: {
3: if (e.Row.RowIndex > -1)
4: {
5: (e.Row.FindControl("btnEditarPerfil") as Button).CommandArgument = e.Row.RowIndex.ToString();
6: (e.Row.FindControl("btnExcluirPerfil") as Button).CommandArgument = e.Row.RowIndex.ToString();
7: }
8: }
9:
10: protected void gvModulosPerfil_RowDataBound(object sender, GridViewRowEventArgs e)
11: {
12: if (e.Row.RowIndex > -1)
13: {
14: (e.Row.FindControl("chkPermissaoModulo") as CheckBox).Checked = (e.Row.DataItem as TPerfilModulo).PodeAcessar.Equals(1);
15: }
16: }
17:
18: private void SalvarDadosPerfil()
19: {
20: TPerfilUsuario oTUsrPerfil = new TPerfilUsuario();
21: bool ok = false;
22: string script = "";
23: try
24: {
25: oTUsrPerfil.PerfilId = tbxCodigoPerfil.Text.Equals("") ? 0 : Int32.Parse(tbxCodigoPerfil.Text);
26: oTUsrPerfil.Descricao = tbxDescricaoPerfil.Text;
27:
28: //Atribui os valores selecionados no gridview nos módulos que pode acessar
29: foreach (GridViewRow r in gvModulosPerfil.Rows)
30: {
31: if (r.RowType.Equals(DataControlRowType.DataRow))
32: {
33: oTUsrPerfil.Modulos[r.RowIndex].PodeAcessar = (r.FindControl("chkPermissaoModulo") as CheckBox).Checked ? 1 : 0;
34: }
35: }
36:
37: ok = (ViewState["CodigoPerfil"].ToString().Equals("0") ? oTUsrPerfil.Inserir() : oTUsrPerfil.Atualizar());
38: if (ok)
39: {
40: ViewState["CodigoPerfil"] = oTUsrPerfil.PerfilId.ToString();
41: tbxCodigoPerfil.Text = oTUsrPerfil.PerfilId.ToString();
42: PesquisarPerfil();
43: //Populando o combo-box de Pesquisa de Perfil
44: ddlPesqPerfilUsu.DataSource = TPerfilUsuario.ListarPerfis("");
45: ddlPesqPerfilUsu.DataValueField = "PerfilId";
46: ddlPesqPerfilUsu.DataTextField = "Descricao";
47: ddlPesqPerfilUsu.DataBind();
48: ddlPesqPerfilUsu.Items.Insert(0, new ListItem("--TODOS--", "0"));
49:
50: //Populando o combo-box de seleção de perfil do cadastro de usuários
51: ddlPerfilUsuario.DataSource = TPerfilUsuario.ListarPerfis("");
52: ddlPerfilUsuario.DataValueField = "PerfilId";
53: ddlPerfilUsuario.DataTextField = "Descricao";
54: ddlPerfilUsuario.DataBind();
55:
56: }
57: script = Consts.JavaScript.Alert(Consts.Funcoes.Replacer4js(oTUsrPerfil.MsgInfo), false);
58: }
59: finally
60: {
61: oTUsrPerfil.Dispose();
62: }
63: ScriptManager.RegisterStartupScript(this, this.GetType(), "alerta", script, true);
64: }
65:
66: private void ExibirDadosPerfil(string pID)
67: {
68: TPerfilUsuario oTUsrPerfil = new TPerfilUsuario();
69: try
70: {
71: oTUsrPerfil.PerfilId = Int32.Parse(pID);
72: oTUsrPerfil.SetByID();
73: tbxCodigoPerfil.Text = oTUsrPerfil.PerfilId.ToString();
74: tbxDescricaoPerfil.Text = oTUsrPerfil.Descricao.ToString();
75: ViewState["CodigoPerfil"] = oTUsrPerfil.PerfilId.ToString();
76:
77: //Grid de módulos com acesso
78: gvModulosPerfil.DataSource = oTUsrPerfil.Modulos;
79: gvModulosPerfil.DataKeyNames = new string[1] { "ModuloID" };
80: gvModulosPerfil.DataBind();
81:
82: string script = "$dvModalLoader.jqmHide();$dvDetCadPerfil.jqmShow();";
83: ScriptManager.RegisterStartupScript(this, this.GetType(), "abre", script, true);
84: }
85: finally
86: {
87: oTUsrPerfil.Dispose();
88: }
89: }
90:
91: private void PesquisarPerfil()
92: {
93: gvCadPerfil.DataSource = TPerfilUsuario.ListarPerfis(tbxPesquisaDescPerfil.Text.ToUpper());
94: gvCadPerfil.DataKeyNames = new string[1] { "PerfilId" };
95: gvCadPerfil.DataBind();
96: }
97:
98: protected void btnInserirPerfil_Click(object sender, EventArgs e)
99: {
100: tbxCodigoPerfil.Text = "";
101: tbxDescricaoPerfil.Text = "";
102: ViewState["CodigoPerfil"] = "0";
103:
104: //Grid de módulos com acesso
105: TPerfilUsuario pu = new TPerfilUsuario();
106: try
107: {
108: gvModulosPerfil.DataSource = pu.Modulos;
109: gvModulosPerfil.DataKeyNames = new string[1] { "ModuloID" };
110: gvModulosPerfil.DataBind();
111: }
112: finally
113: {
114: pu.Dispose();
115: }
116:
117: string script = "$dvModalLoader.jqmHide();$dvDetCadPerfil.jqmShow();";
118: ScriptManager.RegisterStartupScript(this, this.GetType(), "abre", script, true);
119: }
120:
121: protected void btnSalvarPerfil_Click(object sender, EventArgs e)
122: {
123: SalvarDadosPerfil();
124: }
125:
126: protected void btnCancelarCadPerfil_Click(object sender, EventArgs e)
127: {
128: ViewState["CodigoPerfil"] = "0";
129: string script = "$dvDetCadPerfil.jqmHide();";
130: ScriptManager.RegisterStartupScript(this, this.GetType(), "abre", script, true);
131: }
132:
133: protected void btnPesquisarPerfil_Click(object sender, EventArgs e)
134: {
135: PesquisarPerfil();
136: }
137:
138: protected void btnEditarPerfil_Click(object sender, EventArgs e)
139: {
140: string id = gvCadPerfil.DataKeys[Int32.Parse((sender as Button).CommandArgument)].Value.ToString();
141: ExibirDadosPerfil(id);
142: }
143:
144: protected void btnExcluirPerfil_Click(object sender, EventArgs e)
145: {
146: string msg = "";
147: if (TPerfilUsuario.Excluir(Int32.Parse(gvCadPerfil.DataKeys[Int32.Parse((sender as Button).CommandArgument)].Value.ToString()), out msg))
148: {
149: PesquisarPerfil();
150: }
151: string script = Consts.JavaScript.Alert(Consts.Funcoes.Replacer4js(msg), false);
152: ScriptManager.RegisterStartupScript(this, this.GetType(), "alerta", script, true);
153: }
Como já adiantado, a janela de detalhes do perfil de usuário é uma janela modal construída pelo plugin jqModal do jQuery (as bibliotecas estão declaradas na master page e os modais foram inicializados no final da página do módulo); nela estão os controles que permitem alterar os dados do registro.
Quando clicamos no botão btnInserirPerfil ou btnEditarPerfil, registramos o script que oculta o modal da requisição AJAX (lembra... no artigo sobre como resolver alguns pepinos quando misturamos jQuery e ASP.NET Ajax?) e exibe o cadastro. Nestes botões também colocamos a chave do registro a ser exibido no ViewState "CodigoPerfil". No botão Inserir, colocamos como chave o valor "0" e colocamos alguns valores padrão dentro dos textboxes.
Para obtermos o ID do registro que queremos editar a partir do grid de pesquisa, guardamos esse ID na propriedade CommandArgument dos botões de Editar e Excluir. Isto pode ser feito no evento OnRowDataBound deste grid, usando um FindControl para pegarmos o controle desejado, e guardar o DataKey da linha no CommandArgument. Depois, nos métodos OnClick destes botões, recuperamos este valor.
Note que há nesta janela um gridview que lista os módulos que este perfil pode acessar. Este gridview é alimentado através da propriedade Modulos da classe TPerfilUsuario. Esta propriedade é um List de objetos do tipo TPerfilModulo. No evento RowDataBound deste grid, alteramos a propriedade Checked do checkbox em uma coluna template, baseando-se na propriedade PodeAcessar do objeto TPerfilModulo da linha que está sendo "bindada": Se for 1, o checkbox tem o Checked = true.
As diferenças entre o botão de inserir e atualizar são que no primeiro, não inicializamos valores em um objeto de TPerfilUsuario, ao contrário do segundo, o qual chamamos o método SetByID baseando-se no valor alimentado no viewstate "CodigoPerfil".
Os métodos de pesquisa e exclusão, não apresentam novidades: Instanciamos a classe e chamamos os respectivos comandos. Ao ser aplicados, dão um "refresh" nos dados do grid.
O método SalvarDadosPerfil merece um pouquinho de atenção: Antes de salvarmos o perfil, varremos o gridview com os módulos através de um laço foreach, e pegamos o valor do checkbox em cada linha do grid. Este valor é alimentado na propriedade PodeAcessar da coleção Modulos do perfil que estamos salvando. É como se fosse o "inverso" do que fazemos no RowDataBound do grid de listagem dos módulos.
Feito isso, damos o comando de Inserir ou Atualizar do perfil. Caso o nosso ViewState "CodigoPerfil" for zero, insere; caso contrário, atualiza.
Por fim, atualizamos o ViewState com o ID do registro que acabamos de gravar, o grid da tela inicial e os combo-boxes de seleção de perfil do cadastro de usuários e damos um alert com o resultado da operação.
O cadastro de Usuários tem funcionamento semelhante ao cadastro de Perfil, dispensando maiores explicações (são só a classe instanciada e os nomes dos componentes que mudam hehehe).
Na próxima parte do artigo, faremos a implementação do controle de acesso em um sistema.
Download:
Exemplo Sistema de Login em ASP.NET (com BD Firebird) (289 kB)
Abraços a todos!
[Update 26/02/2008: Para facilitar o download, ao invés da página de suporte hospedada no Geocities, estarei movendo os arquivos para hospedagem própria, diretamente no domínio leonelfraga.com e colocando os links diretos para o arquivo.]
Posts Relacionados:
0 comentários:
Postar um comentário