martes, 19 de diciembre de 2017

 

CÓMO MOSTRAR VENTANA EMERGENTE AL CARGAR LA PAGINA USANDO MODAL BOOTSTRAP 4.0

Hola Amigos .Hoy les dejo algo genial que puede ser de mucha utilidad en sus proyectos web.Mostar una ventana emergente.con bootstrap 4


Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuerypersonalizado. Se puede usar para crear ventanas emergentes  para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.






Aqui .el codigo completo de html y java script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CÓMO MOSTRAR VENTANA EMERGENTE DE FORMA AUTOMÁTICA USANDO MODAL BOOTSTRAP 4 </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>

<!-- Modal -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi repellendus, quasi eaque vero omnis praesentium labore autem quam nostrum repellat tempora. Maxime est quis placeat repellendus saepe expedita, animi ratione?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
   
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!--script para javascript para que carga el modal -->
<script>
       
   $(document).ready(function()
   {
      $("#Modal").modal("show");
   });
</script>
</body>
</html>
 
 Esos es todo espero ayudarles...dudas y sugerencias dejanos tu mensaje en los comentarios

Share:

martes, 12 de diciembre de 2017

 

como hacer un login en asp net c# y Bootstrap 4.0

hola gente como están por ahí ,espero que bien . Bueno en es post publicare a como hacer un login en .Asp net y bootstrap 4.00

1.- primeramente creamos nuestro database con sus respectivos tablas

CREATE database ejemplo
use ejemplo
CREATE TABLE [dbo].[Usuario](
 [Codigo] [smallint] IDENTITY(1,1) NOT NULL,
 [CodigoPersona] [smallint] NOT NULL,
 [Nombre] [varchar](20) NOT NULL,
 [Clave] [varchar](20) NOT NULL,
 [Vigencia] [bit] NOT NULL,
 [Tipo] [char](1) NOT NULL
 )


2.- una vez creado nuestro bd ahora diseñamos nuestro formulario en asp como la imagen siguiente



https://cpiprodesign.blogspot.pe/






















codigo de Nuestro formulario en html.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Bootstrap 4 Login Form</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script></head>
<body>
    <form id="form1" runat="server">
          <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-6">
                    <h3>Ingreso al sistema</h3>
                     <img class="img-fluid rounded-circle  centrado" src="https://www.cpiprodesign.com/imagenes/logo1.png" alt="cpiprodesign">
                 
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="inputCity">Usuario</label>
                        <asp:TextBox ID="TextBox1" placeholder="usuario" CssClass="form-control" runat="server"></asp:TextBox>
                    <br />
                     <label for="inputCity">Password</label>

                    <asp:TextBox ID="TextBox2" type="password" placeholder="Password" CssClass="form-control" runat="server"></asp:TextBox><br />
                    <asp:Label ID="Label1" runat="server" ForeColor="#CC0000"></asp:Label>
                    <br />
                    <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Text="Login" OnClick="Button1_Click" />
              
                        </div>
                      
                       
                    </div>
                </div>
            </div>
        </div>
        </form>
</body>

</html>

3.-codigo de Nuestro formulario en c#

codigo para button y cadena de connecion..

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;




public partial class _Default : System.Web.UI.Page
{
    //cadena de connecion
    public SqlConnection cn= new SqlConnection("Data Source=DESKTOP-80G8HDH;Initial Catalog=Farmacia;Integrated Security=True");

    protected void Page_Load(object sender, EventArgs e)
    {
       
    }

 

   
    protected void Button1_Click(object sender, EventArgs e)
    {
        cn.Open();
        string query = "select count(*) from usuario where nombre= @usuario and Clave = @password";
        SqlCommand cm = new SqlCommand(query, cn);
        cm.Parameters.AddWithValue("@usuario", TextBox1.Text);
        cm.Parameters.AddWithValue("@password", TextBox2.Text);

        //Si existe un usuario con los datos retorna true, caso contrario false
        bool correcto = Convert.ToInt32(cm.ExecuteScalar()) > 0;

        if (correcto)
        {
            //Si existe, Bienvenido...
            Response.Redirect("home.aspx");

        }
        else
        {
            Label1.Text = "Su usuario o contraseña incorrecta ";
            TextBox1.Text = "";
            TextBox2.Text = "";
            TextBox1.Focus();

        }
        cn.Close();

    }
}


Eso seria todo cualquier duda y sugerencia dejanos tu mensaje en los mensajes.





Share:

lunes, 11 de diciembre de 2017

 

como hacer login en .NET C# Visual estudio 2017

hola gente como están por ahí ,espero que bien . Bueno en es post publicare a como hacer un login en .NET .



Primeramente creamos nuestro base de datos en SQL SERVER 2017

CREATE database ejemplo
use ejemplo
CREATE TABLE [dbo].[Usuario](
 [Codigo] [smallint] IDENTITY(1,1) NOT NULL,
 [CodigoPersona] [smallint] NOT NULL,
 [Nombre] [varchar](20) NOT NULL,
 [Clave] [varchar](20) NOT NULL,
 [Vigencia] [bit] NOT NULL,
 [Tipo] [char](1) NOT NULL
 )


Procedimiento almacenado sesión
create procedure [dbo].[sesion]
@nombre varchar(20),
@clave varchar(24)
as
select Nombre,Clave,Tipo,Vigencia,Codigo
 from Usuario
 where Nombre=@nombre and Clave=@clave
GO



 Diseñamos nuestro formulario como en la imagen


CODIGO

Sub ingreso()
        Try
            Dim cmd As New SqlCommand("sesion", cn)
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.Add("@nombre", SqlDbType.VarChar, 20).Value = UsernameTextBox.Text
            cmd.Parameters.Add("@clave", SqlDbType.VarChar, 24).Value = PasswordTextBox.Text
            Dim da As New SqlDataAdapter(cmd)
            Dim dt As New DataTable
            dt.Clear()
            da.Fill(dt)
            ' si es asi es porque ma misma tiene datos
           
If dt.Rows.Count <> 0 Then
                MessageBox.Show("Bienvenido" + "...", "Sistema", MessageBoxButtons.OK, MessageBoxIcon.Information)
                Dim f1 As New MDIParent1
                Me.Hide()
                f1.Show()
            Else
                ' si esta parte se ejecuta es porque el usuario no ha sido registrado o se escribieron datos incorrectos, y enviamos un mensaje informando                MessageBox.Show("Usuario invalido o su clave es incorrecta", "Error de usuario o clave", MessageBoxButtons.OK, MessageBoxIcon.Error)
                'limpiarmos los controles para que se escriba de nuevo
                UsernameTextBox.Clear()
                PasswordTextBox.Clear()
                'enviamos el foco a unos de los controles nuemante
                UsernameTextBox.Focus()
            End If
            cn.close
        Catch ex As Exception
            MessageBox.Show(ex.Message)
        End Try
    End Sub

Codigo para button Aceptar

Private Sub OK_Click(sender As Object, e As EventArgs) Handles OK.Click
        ingreso()
    End Sub


El resultado seria lo siguiente



Bueno eso seria todo deja tus dudas o sugerencias en los comentarios saludos.






Share:

martes, 5 de diciembre de 2017

 

Gridview insert update delete EN asp.net C# visual estudio 2017 & Bootstrap 4

En este artículo explicaré cómo realizar seleccionar, insertar, editar, actualizar, eliminar en GridView en ASP.Net usando C #
Este proceso también se conoce como CRUD, es decir, Crear, Leer, Actualizar y Eliminar en GridView con el backend de la base de datos SQL Server en ASP.Net.

1.- primeramente creamos nuestro base de datos
CREATE database crud
use CRUD

CREATE TABLE [dbo].[alumnos](
       [codigo] [char](10)primary key not NULL,
       [nombres] [varchar](50) NULL,
       [telefono] [char](10) NULL
) ON [PRIMARY]

GO

2.-Diseñamos nuestro form1 seria como la imagen siguiente

controles.
codigo html seria lo siguiente

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>CRUD EN C#</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="jumbotron">
  <h3 class="display-3">Listado de Alumnos!</h3>
      </div>
            <div class="row">
                <div class="col-12">
                    <div>
                        <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Ingresar nuevo
</button>
                        <br />
                        <br />

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Registro de Alumnos Nuevos</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="form-group">
    <label for="exampleInputEmail1">codigo</label>

      <asp:TextBox CssClass="form-control"  placeholder="tu codigo" required=""  ID="TextBox3" runat="server"></asp:TextBox>
  <label for="exampleInputEmail1">Nombres</label>
      <asp:TextBox CssClass="form-control" placeholder="tu nombre" required="" ID="TextBox2" runat="server"></asp:TextBox>
  <label for="exampleInputEmail1">telefono</label>
      <asp:TextBox CssClass="form-control" placeholder="tu telefono" required="" ID="TextBox4" runat="server"></asp:TextBox>
             <br />
             <asp:Button CssClass="btn btn-outline-success" ID="Button1" OnClick="Button1_Click" runat="server" Text="Guardar" />
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       <%-- <button type="button" class="btn btn-primary">Save changes</button>--%>
      </div>


    </div>
  </div>
</div>
                    </div>
                      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" DataKeyNames="codigo" DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
                <Columns>
                    <asp:BoundField DataField="codigo" HeaderText="codigo" SortExpression="codigo" />


                    <asp:BoundField DataField="nombres" HeaderText="nombres" SortExpression="nombres" />
                    <asp:BoundField DataField="telefono" HeaderText="telefono" SortExpression="telefono" />
                </Columns>
                          <FooterStyle BackColor="White" ForeColor="#000066" />
                          <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                          <PagerStyle BackColor="White" BorderStyle="Groove" ForeColor="#000066" HorizontalAlign="Left" />
                          <RowStyle ForeColor="#000066" />
                          <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                          <SortedAscendingCellStyle BackColor="#F1F1F1" />
                          <SortedAscendingHeaderStyle BackColor="#007DBB" />
                          <SortedDescendingCellStyle BackColor="#CAC9C9" />
                          <SortedDescendingHeaderStyle BackColor="#00547E" />
            </asp:GridView>
                </div>
               
            </div>
          
                    <div>
                      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                       <asp:Button ID="Button3" runat="server" Text="Buscar" OnClick="Button3_Click" />
                       
                    </div>
          
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CRUDConnectionString %>"
              updateCommand="UPDATE [alumnos] Set[nombres]=@nombres,[telefono]=@telefono where [codigo]=@codigo"
                SelectCommand="SELECT * FROM [alumnos]"
                DeleteCommand="DELETE  FROM [alumnos] Where [codigo]=@codigo"
                ></asp:SqlDataSource>
        </div>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    </form>
    
</body>
</html>

2.-codificacion para el button insertar

para codificar dale doble clik en button1

protected void Button1_Click(object sender, EventArgs e)
        {
            SqlCommand cmd = new SqlCommand("insert into alumnos values('" + TextBox3.Text + "','" + TextBox2.Text + "','" + TextBox4.Text + "')", con);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            TextBox3.Text = "";
            TextBox2.Text = "";
            TextBox4.Text = "";
            Response.Redirect("WebForm2.aspx");


        }


eso seria todo cualquier duda o sugerencia deja tu mensaje en los comentarios..
link de proyectoaqui >>>>http://yoineer.com/3Nus
Share: