Conocer las bases de .NET core

1

¿Qué necesitas para aprender a desarrollar aplicaciones profesionales en .NET con Blazor?

2

Todo lo que aprenderás sobre Blazor

3

Evolución de .Net

4

¿Cómo funciona el Desarrollo Web sin Blazor?

5

Instalando Visual Studio Community

6

Instalando SQL Server Express

Entender la estructura de Blazor

7

Webassemblies y .Net Core 3

8

Anatomía de una aplicación Blazor

9

Blazor pages

10

Blazor components

11

Introducción a formularios

12

Inyección de dependencias

Aplicar Entity Framework

13

Arquitectura vs. Patrones de Diseño

14

Estructurando nuestro proyecto

15

¿En qué consiste Entity Framework y por qué vamos a trabajarlo?

16

Creación de entidades

17

Data annotations

18

Trabajando el relacionamiento entre entidades

19

Creando el datacontext

20

Migraciones

21

Alimentando la base de datos

Integrar datos en ambientes Blazor

22

Construyendo la capa intermedia o capa de negocio

23

El CRUD de integración de datos

24

Creación de formularios con Blazor

25

Finalizando el formulario

26

Trabajando listas de datos

27

Agregando filtros a nuestra lista

28

Guardando nuevos registros

29

Creación formulario de actualización de datos

30

Aplicando actualización de datos

31

Registrando productos en almacenamiento

32

Creando página de almacenamiento

33

Cargando productos por Bodega para entradas y salidas

34

Relacionando productos y formulario de entradas y salidas

35

Finalizando el formulario de entradas y salidas

Aplicar Diseño con Bootstrap

36

Revisión de estilos: Introducción a Bootstrap

37

Publicando el sitio

38

Cierre del curso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Blazor pages

9/38
Recursos

Aportes 37

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

No sé por qué se borraron mis comentarios :c pero bueno, esta fue mi solución. El primer div es el que hace que cambie el valor del texto dando clic al botón y el segundo es para que cambie según se va teclando.

<div>
    <input type="text" @bind-value="@input_value" />
    <input type="button" value="Click me" @onclick="ChangeText" />
    <p>@message</p>
</div>

<div>
    <input type="text" @bind="@message2" @bind:event="oninput" />
    <p>@message2</p>
</div>

@code {
    string message;
    string input_value;
    string message2;

    private void ChangeText()
    {
        message = input_value;
    }
}

Reto con alert si faltan datos

@page "/"
@inject IJSRuntime JsRuntime;

<form action="/" method="post">
    <div>
        <input type="text" @bind-value="@user" placeholder="User" required="required" />
    </div>
    <div>
        <input type="email" @bind-value="@email" placeholder="email" required="required" />
    </div>
    <input type="button" name="btnSend" value="Click aquí" @onclick="ChangeText" />
</form>
<div>
    @msg
</div>
@code{

    string user = "";
    string email = "";
    string msg = "";

    private async void ChangeText()
    {
        if(string.IsNullOrEmpty(user) | string.IsNullOrEmpty(email))
        {
            await JsRuntime.InvokeVoidAsync("alert", "User or email is Empty!"); // Alert
        }
        else
        {
            msg = $"usuario: {user} , correo:{email}";
        }
    }
}

Como podríamos hacer bind-value en el momento que se va escribiendo sin necesidad de salir del foco del control?

@page "/"

    <input type="text" name="txt2" @bind-value="@NewMessage" />

    <input type="button" name="btn1" value="Cambiar texto" @onclick="ChangeText" />
    <div>
        <p>@Message</p>
    </div>
@code  
{
    string Message = "Un contenido";
    string NewMessage = "";

    private void ChangeText()
    {
        Message = NewMessage;
    }
}```
@page "/"

<input type="text" @bind-value="@messageValue" />

<input type="button"  value="Has clic" @onclick="ChangeText" />
<div>
    @message
</div>

@code {
    string messageValue;
    string message = "hola mundo";
    private void ChangeText()
    {

        message = messageValue;
    }
}
@page "/"

<div>
    <input type="text" @bind-value="@inputMessage" placeholder="Escribe tu mensaje" />
    <input class="btn btn-success" type="button" value="Cambiar Mensaje" @onclick="ChangeText" />
    <p>@message</p>
</div>


@code {
    string message;
    string inputMessage;

    private void ChangeText()
    {   
        message = inputMessage;
    }
}

Reto
![](

Les comparto la forma en que cumplí el reto 👍


    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Nombre de usurio</label>
            <input type="text" class="form-control" @bind-value="@username" />
            <label for="exampleInputEmail1">¿Tú color fovorito?</label>
            <input type="text" class="form-control" @bind-value="@colorUser" />
            <small id="emailHelp" class="form-text text-muted">@userMessage</small>
        </div>
        <input type="button" class="btn btn-success" value="Magía" @onclick="ChangeText"/>
    </form>


@code{
    string colorUser;
    string username;
    string userMessage;

    private void ChangeText()
    {
       
        userMessage = "Usuario "+username+" color favorito es "+ colorUser;

    }
}


en versiones más recientes no es necesario colocar -value en el bind y se debe de especificar el tipo de evento al que va a aplicar así:

@page "/"

<input type="text" @bind="contenido" @bind:event="oninput" />

<div>
    @contenido
</div>

@code {
    private string contenido = "prueba de contenido";
}
@page "/"

<input type="text" @bind-value="@message1" />
<div>
    @message1
</div>

<input type="text" @bind-value="@message2" >
<div>
    @message2
</div>
<input type="button" value="Haga clic aquí" @onclick="ChangeText" />


@code{
    string message1 = "Algo locochón";
    string message2;

    private void ChangeText()
    {
        message1 = message2;
    }
}

<SurveyPrompt Title="How is Blazor working for you?" />

Mi humilde aporte.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello there!</h1>

<h3>Please fill out the following form, to get to know you better.</h3>

<div>
    <form>
        <label>Name:</label>
        <input type="text" placeholder="Insert your Name" @bind-value=@name/>
        <label>Age:</label>
        <input type="number" placeholder="Insert your Age" @bind-value=@age/>
        <label>Favorite Color:</label>
        <input type="color" placeholder="Insert your Color" @bind-value=@color/>
        <div>
            <input type="button" value="Send" @onclick=updateMessage/>
        </div>
    </form>
</div>

<div>
    <p>@message</p>
</div>

@code {
    private string name = "", color = "", message = "";
    private int age = 0;

    private void updateMessage(){
        message = $"We are glad to have you {name}!" + "\n" +
                  $"You're {age} years old - age is just a number..." + "\n" +
                  $"And your favorite color in HEX is {color}";
    }
}

<SurveyPrompt Title="How is Blazor working for you?" />

Mi solución:

@page "/"

<label for="name">
    Nombre: <input id="name" type="text" @bind-value="@name" />
</label>

<label for="message">
    Mensaje: <input id="message" type="text" @bind-value="@message" />
</label>

<input type="button" value="Enviar" @onclick="ChangeText" />

<div>
    <p>@info</p>
</div>

@code
{
    string message;
    string name;
    string info;

    private void ChangeText()
    {
        info = $"Bienvenido, {name}. Nos has comentado lo siguiente: \n {message}";
        info += ". Gracias por tus comentarios";
    }
}

Reto Cumplido

El reto.

@page "/"

<div class="card text-white mb-3">
    <div class="card-header bg-primary">Sign In</div>
    <div class="card-body">
        <div class="mb-3">
            <input class="form-control" type="text" @bind-value="@user" />
        </div>
        <div class="mb-3">
            <input class="form-control" type="text" @bind-value="@mail" />
        </div>
        <div class="mb-3">
            <input class="btn btn-primary" type="submit" value="Login" @onclick="ChangeText" />
        </div>
        </div>
    </div>

<p>@message</p>

@code{
    string user = "";
    string mail = "";
    string message = "";
    private void ChangeText()
    {
        message = string.Format("{0} {1}", user, mail);
    }
}

Interesante

Les comaprto lo que hice

@page "/"

<!--
Form Creation    
-->

<form class="form-text">
    <label for="id">Id</label>
    <input id="id" type="number" @bind-value="id"/>
    <br />

    <label for="fname">First Name</label>
    <input id="fname" type="text" @bind-value="firstName"/>
    <br />

    <label for="sname">Second Name</label>
    <input id="sname" type="text" @bind-value="lastName"/>
    <br />

    <label for="brth">Birthdate</label>
    <input id="birth" type="date"  @bind-value="birth"/>
    <br />

    <label for="telephone">Telephone</label>
    <input id="telephone" type="number" @bind-value="telephone"/>
    <br />

    <label for="address">Address</label>
    <input id="address" type="text" @bind-value="address" />
    <br />

    <input type="button" value="Hga click aca" @onclick="ChangeText" />
</form>

<!--
    Presentacion de la informacion luego de dar click al boton de cambio de texto
-->

<div>
    @message 

</div>




@code {
    string message;
    int id;
    string firstName;
    string secondName;
    string lastName;
    DateTime birth;
    int telephone;
    string address;

    private void ChangeText() {


        message = "Hola mi id es " + id + "mi primer nombre es: " + firstName + " mi segundo nombre es " + secondName + " mi fecha de cumpleaños es " + birth +
            " mi numero telefonico es " + telephone + " esta es mi direccion " + address;
    }
}

<div class=“row”>

<div class="col-sm-6">
    <div class="form-group">
        <label class="">Nombre</label>
        <input type="text" class="form-control" @bind-value="@nombre" />
    </div>
    <div class="form-group">
        <label>Apellidos</label>
        <input type="text" class="form-control" @bind-value="@apellidos" />
    </div>
    <div class="form-group">
        <label>Telefono</label>
        <input type="text" class="form-control" @bind-value="@telefono" />
    </div>
    <div class="form-group">
        <label>Direccion</label>
        <input type="text" class="form-control" @bind-value="@direccion" />
    </div>
    <div class="form-group">
        <input type="button" @onclick="CambiarTexto" class="btn btn-dark" value="Enviar información" />
    </div>
</div>

<div class="col-sm-6">
    <div class="row">
        <div class="text-center">
            <strong>@((MarkupString)Informacion)</strong>
        </div>
    </div>
</div>

</div>

@code{

string nombre = "";
string apellidos = "";
string telefono = "";
string direccion = "";

string Informacion = "<p>Aqui se mostrara la información</p>";

public void CambiarTexto()
{
    Informacion = "";
    Informacion += "<p>Nombre: "+nombre+"</p></br>";
    Informacion += "<p>Apellidos: "+apellidos+"</p></br>";
    Informacion += "<p>Telefono: "+telefono+"</p></br>";
    Informacion += "<p>Dirección: "+direccion+"</p></br>";
}

Solución sencilla al reto.

@page "/"

<input type="text" @bind-value="@input" />
<input type="button" @onclick="ChangeText" value="Enviar" />
<div>
    @message
</div>
@code {
    string message = "";
    string input;
    private void ChangeText()
    {
        message = input;
    }
}

Yo solamente tuve el problema de que al hacerlo con un form, este hace la peticion ya sea post o get, entonces redirecciona a otra pagina tomando esos parametros pero si funciona porque aparece el texto y rapidamente de quita porque carga la siguiente pagina

el reto es muy sencillo pero muy interesante.

@page "/"

<div>
    <input type="text" @bind-value="@nombre" />
    <input type="number" @bind-value="@edad" />
</div>

<input type="button" value="Haga clic aqui" @onclick="ChangeText" />
<div>
    @message
</div>


@code{
    string message;
    string nombre;
    int edad;
    private void ChangeText()
    {
        message = $"Hola {nombre} , su edad es {edad}";
    }

}```
@page "/"

<h1>Hello, world!</h1>


<input type="text" @bind-value="@nombre"  placeholder="Tu nombre"/>
<input type="text" @bind-value="@ciudad" placeholder="Tu ciudad" />
<input type="button" value="haga click" @onclick="changetext" />
<div>
   @change
</div>

@code{
    string nombre;
    string change;
    string ciudad;



    private void changetext()
    {
        change = $"Su nombre es {nombre} y su ciudad {ciudad}, bienvenido";
    }
}
@page "/"

<input type="text" @bind-value="@message1" />
<br/>
<input type="text" @bind-value="@message2" />
<br/>
<input type="button" value="Haga clic aqui" @onclick="ChangeText" />
<div>
    <p>Mensaje 1: @messageInp1</p>
    <p>Mensaje 2: @messageInp2</p>
</div>

@code{
    string message1 = "Un contenido A";
    string message2 = "Un contenido B";
    string messageInp1 = "";
    string messageInp2 = "";
    private void ChangeText()
    {
        messageInp1 = message1;
        messageInp2 = message2;
    }
}

Para usar la consola de Visual Studio se llama con Ctrl+ ñ

Mi solución al reto:

@page "/"

<input type="text" @bind-value ="@firtsName"/>
<input type="text" @bind-value="@lastName" />
<input type="button" value="Ok" @onclick="ChangeText"/>


<div>
    @message
</div>

@code{
    string message = "";
    string firtsName = "Nombres";
    string lastName = "Apellidos";

    private void ChangeText()
    {
        message = string.Format("Bienvenido {0} {1}",firtsName,lastName);
    }
}

Este es mi código, sin embargo quería hacer que apenas se diera clic el formulario desapareciera y el mensaje apareciera pero no pude encontrar una buena referencia, en caso de que alguno sepa seria de gran ayuda. yo lo estaba pensando hacer como en Javascript que tomas el objeto controlas la accion con un toggle pero no se como se podrá realizar aquí, les recomiendo.
Saludos!!

@page "/"

<h1>Hello, world!</h1>

<div class="formIndex" id="formIndex">
  <form action="" method="post">
    <label for="Nombre">Nombre</label>
    <input type="text" @bind-value="@name" name="Nombre" id="Nombre" placeholder="Nombre..." />
    <label for="Apellido">Apellido</label>
    <input type="text" @bind-value="@lastName" name="Apellido" id="Apellido" placeholder="Apellido..."/>
    <label for="Pais">Pais</label>
    <input type="text" @bind-value="@countryInput" name="Pais" id="Pais" placeholder="Tu pais de origen..." />
    <input type="button" value="Enviar" @onclick="ChangeText" />
  </form>
</div>
<div class="outIndex hide" id="outIndex">
  <h3>Welcome @fullName</h3>
  <h3>Greetings to @country!!</h3>
</div>

@code{
  string name = "";
  string lastName = "";
  string fullName = "";
  string countryInput = "";
  string country = "";
  private void ChangeText(){
    fullName = ($"{name} {lastName}");
    country = countryInput;
  }
}


Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Mi aporte

<input type="text" @bind-value="@message" />
<input type="text" @bind-value="@anotherMessage" />
<input type="button" value="Cambiar texto" @onclick="ChangeText" />

@code{
    string message = "Un contenido";
    string anotherMessage = "";

    private void ChangeText()
    {
        message = $"{anotherMessage}";
    }
} 

Le agregue nombre, apellido y user 😃

<label> Ingrese datos</label>
<br />
<input type="text"@bind-value="@name"/>
<br />
<input type="text" @bind-value="@last" />
<br />
<input type="text" @bind-value="@user" />
<br />
<button type="button" @onclick="ChangeText" >Enviar</button>


<div>
@mssg
</div>
@code{
    string mssg;
    string name;
    string last;
    string user;
    int count;
    private void ChangeText()
    {
        mssg = $"mi nombre es: {name}, mi apellido es: {last} y me user en steam es {user}";
    }
}

Le agregue una pequeña validación, soy nuevo en esto así que piedad, se aceptan todo tipo de criticas constructivas y mejoras sobre el pequeño aporte.

<h1>Register</h1>

@if (messageSucces != null)
{
    <div class="alert alert-success" role="alert">
        @messageSucces
    </div>
}

@if (messageError != null)
{
    <div class="alert alert-danger" role="alert">
        @messageError
    </div>
}

<form action="/" method="post">
    <div class="form-group">
        <label for="name">Name: </label>
        <input type="text" class="form-control" id="name" placeholder="Enter name" @bind-value="name">
    </div>
    <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" @bind-value="email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" @bind-value="pwd">
    </div>
    <input class="btn btn-primary" type="button" value="Enviar" @onclick="ChangeText" />
</form>

@code{

    string name;
    string email;
    string pwd;
    string messageSucces;
    string messageError;

    private void ChangeText()
    {
        if (!string.IsNullOrWhiteSpace(name) && !string.IsNullOrWhiteSpace(email) && !string.IsNullOrWhiteSpace(pwd))
        {
            messageSucces = $"Welcome: {name.ToUpper()} is beautiful person.  your email has been registered: {email}";
        }
        else
        {
            messageError = "I’m sorry you couldn’t register";
        }
    }
}

estoy emocionado esta genial el curso!!!

@page “/”
<input type=“text” @bind-value="@messageinput" />
<input type=“text” @bind-value="@message" />
<input type=“button” value=“Haga clic aqui” @onclick=“ChangeText” />
<div>
@message
</div>

@code{
string messageinput="";
string message = “”;

private void ChangeText()
{
    message = messageinput;
}

}

Esta es mi solucion

@page "/"

<input type="text" @bind-value="@name" placeholder="Name"/>
<input type="text" @bind-value="@country" placeholder="Country"/>
<input type="button" value="Click me" @onclick="GetInformation"> 

<div style="background-color:darkgray; color:blueviolet">
    @message
</div>

@code {
    string name = string.Empty;
    string country = string.Empty;
    string message = string.Empty;

    private void GetInformation()
    {
        message = $"Welcome {name}, Welcome {country}";
    }
} 

Algo simple pero bueno 😅

@page "/"

<div>
    <input type="text" placeholder="Ingresa tu nombre" @bind-value="@nombre" />
    <br />
    <input type="text" placeholder="Ingresa tu carrera" @bind-value="@carrera" />
    <br />
    <input type="button" value="Guardar informacion" @onclick="Change" />
    <br />
    <p>@mensaje</p>
</div>


@code {
    string nombre, carrera, mensaje;

    private void Change()
    {
        mensaje = $"Hola {nombre}! Es genial que estudies {carrera}";
    }
}

Mi solución al reto:

@page "/"



<input type="text" @bind-value=@message placeholder="Ingrese dato"/>
<input type="text" value="@message2"/>
<input type="button" value="Ingresar Dato" @onclick="ChangeText"/>



@*Codigo C#*@
@code{

    private string message = "";
    private string message2 = "";
    private void ChangeText() {

        message2 = message;

    }
}```