Conocer las bases de .NET core

1

Desarrollo de Aplicaciones Web con Blazor y Entity Framework

2

Evolución de las tecnologías .NET

3

Evolución y Uso de Visual Studio Code en Desarrollo .NET

4

Desarrollo Web: Cliente, Servidor y Optimización con JavaScript

5

Instalación de Visual Studio Community paso a paso

6

Instalación y Configuración de SQL Server Express 2019

Entender la estructura de Blazor

7

Desarrollo de Aplicaciones con Blazor Server y WebAssembly

8

Estructura y Configuración de Aplicaciones en Visual Studio Code

9

Creación de Formularios Dinámicos con Blade y C#

10

Creación y Uso de Componentes en Glaceau para Formularios Reutilizables

11

Creación y Gestión de Formularios HTML Básicos

12

Arquitectura y Patrones de Diseño en Desarrollo de Software

Aplicar Entity Framework

13

Arquitectura por Capas y Patrones de Diseño en Software

14

Modelado de Datos para Aplicación de Inventario

15

Modelo de Datos para Gestión de Inventarios

16

"Creación de Entidades en .NET Core para Bases de Datos"

17

Diseño y Configuración de Entidades en Bases de Datos

18

Construcción de Relaciones en Modelos de Datos con Entity Framework

19

Creación de Capas de Acceso a Datos con Entity Framework

20

Configuración y migración de bases de datos con Entity Framework

21

Precarga de Datos en Bases de Datos con Entity Framework

Integrar datos en ambientes Blazor

22

Creación de Capas de Negocio en Aplicaciones .NET

23

CRUD Básico en Bases de Datos Relacionales

24

"Creación de Formularios para Registro de Productos en Inventario"

25

"Creación de Formularios y Menús Desplegables en Páginas Web"

26

Listar y Mostrar Productos en Tabla HTML con C#

27

Filtrado Dinámico de Productos por Categoría en HTML

28

Creación y Navegación de Páginas con Listados y Formularios en Sitios Web

29

Actualización de Información de Productos en Componentes Web

30

Actualización y Gestión de Formularios en Aplicaciones Web

31

Integración de Productos en Bodegas: Formularios y Almacenamiento

32

Asociación de Productos con Bodegas en Sitios Web

33

Gestión de Entradas y Salidas en Almacenamiento de Bodegas

34

Cargar y asociar productos a bodegas en Entity Framework

35

Gestión de Inventarios: Actualización y Control de Stocks

Aplicar Diseño con Bootstrap

36

Diseño Responsivo con Vustra: Mejora la Experiencia del Usuario

37

Publicación de Sitios Web en Azure Paso a Paso

38

Arquitectura y Herramientas para Desarrollo Web

No tienes acceso a esta clase

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

Creación de Formularios Dinámicos con Blade y C#

9/38
Recursos

¿Cómo empezar a construir tu aplicación usando Blade?

Comenzar a desarrollar una aplicación con Blade puede sonar intimidante, pero con una buena guía y paciencia, se convierte en una tarea manejable y gratificante. Blade es un motor de plantillas para Laravel que simplifica el uso de plantillas mediante el código PHP limpio y potente. A lo largo de este contenido, exploraremos cómo estructurar tu aplicación, cómo funcionan los elementos comunes de Blade y cómo podemos iniciar con una estructura simple que te llevará a una aplicación más robusta.

El concepto esencial que debe destacar es que todas las páginas de Blade se construirán como componentes. Cada una tiene una extensión .blade.php. Esto no solo facilita la organización del contenido, sino que también lo hace más manejable y reutilizable.

¿Cómo se organiza la navegación y el enrutamiento en Blade?

La navegación en una aplicación de Blade se organiza mediante un enrutador que permite estructurar toda la información en función de los parámetros de navegación deseados.

  • Página por defecto: La página index es designada como la página por defecto, es decir, el navegador aterriza automáticamente en esta página gracias a la estructura inherente de Blade.
  • Rutas personalizadas: Las rutas específicas pueden manejarse fácilmente. Por ejemplo, cambiando simplemente el nombre en el enrutador puedes redirigir a una nueva dirección sin modificar toda la construcción de tu aplicación.
  • Errores manejables: Cuando se comete un error en una ruta no configurada, Blade proporciona un mensaje de error preconfigurado que es personalizable.
Route::get('/', function () {
    return view('index');
});

¿Cómo se controla el contenido dinámico con Blade?

Blade permite la integración del código del lado del cliente, como HTML, con el código del lado del servidor, escrito en C#. Esto abre la puerta a un mundo de posibilidades en cuanto a contenido dinámico.

  • Creación de elementos HTML: Puedes crear elementos de formulario, como entradas de texto utilizando controles HTML5.
  • Interacción dinámica: La magia comienza cuando puedes combinar la información del cliente y del servidor sin complicaciones. Puedes, por ejemplo, mostrar el contenido de un mensaje almacenado en el servidor directamente en una página del cliente.
<input type="text" :value="message">

¿Cómo manejar la interacción bidireccional entre cliente y servidor?

La interacción bidireccional al actualizar datos tanto en el cliente como en el servidor ocurre a través de 'v-bind'. Esto permite que los datos sean reflejados y actualizados dinámicamente.

  • Uso de V-MODEL: Utiliza v-model para establecer un vínculo reactivo entre los datos del componente y los inputs del cliente.
<input v-model.lazy="message" />
<p>@{{ message }}</p>
  • Cambio de datos al instante: Cambiar datos que se reflejan instantáneamente en todos los puntos vinculados es sencillo, favoreciendo aplicaciones interactivas sofisticadas.

¿Qué aspectos importantes considerar al crear métodos en Blade?

La creación de métodos en Blade es vital para manejar eventos y procesos. Al integrar métodos privados de C# puedes hacer mucho más que operaciones sencillas.

  • Métodos privados: Permiten encapsular la lógica del negocio que no quieres que esté expuesta.
  • Ejemplos claros de uso: Implementar un método que actualiza un mensaje al pulsar un botón.
private void ChangeMessage() {
    message = "Contenido actualizado!";
}

¿Cómo empezar a construir formularios?

Se presenta como un reto útil: crear un formulario que envíe datos al servidor y los maneje de manera efectiva.

  • Creación de un formulario básico: Puedes empezar creando input y buttons, enlazando estos elementos con el servidor mediante eventos y datos reactivos.
  • Confirmación de cambios: Implementa verificaciones y acciones de cambio al hacer clic en botones, optimizando la respuesta y funcionalidad del formulario.
<button @click="submitForm">Enviar</button>

Es recomendable continuar explorando la documentación de C# y Blade para manejar eficientemente la estructura del servidor y seguir avanzando. Con este conocimiento básico, se abren infinitas posibilidades para crear aplicaciones sofisticadas e interactuar dinámicamente con los datos. ¡Sigue aprendiendo y construyendo!

Aportes 45

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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}";
        }
    }
}
Si al escribir o al presionar el botón no se te actualiza la pagina, colócale esta linea al inicio del código. **@rendermode InteractiveServer** ![](https://static.platzi.com/media/user_upload/image-f39b64ff-636e-417c-a0d0-f94e37086be1.jpg)
@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;
    }
}```

Reto
![](

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" @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;
    }
}

Algo sencillo, pero útil

@page "/"

<input type="text" @bind-value=@name />
<input type="button" value="Submit" @onclick="ChangeText" />
<div>@message</div>

@code {
        string name;
        string message;

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

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";
}

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;

    }
}


Mi propuesta ![](https://static.platzi.com/media/user_upload/image-3288a7f8-3d60-4823-b590-aa4cecf16098.jpg) ```js @page "/" @rendermode InteractiveServer @attribute [StreamRendering] <PageTitle>Home</PageTitle> <input type="text" name="name" @bind-value="@nombre" /> <input type="text" name="name" @bind-value="@apellido" /> <input type="button" value="Haga click aqui" @onclick="ChangeText" />
El nombre es: @nombreInt

El apellido es: @apellidoInt

@code{ string nombre, nombreInt; string apellido, apellidoInt; private void ChangeText() { nombreInt = nombre; apellidoInt = apellido; } } ```
```js @page "/" <input id="input1" type="text" placeholder="Ingrese algun texto" @bind-value=@msgIn/> <input id="button1" type="button" value="Cambiar Texto" @onclick="chageText" />
@msgOut
@code { string msgIn = ""; string msgOut = ""; public void chageText(){ msgOut = msgIn; //Clean msgIn msgIn = ""; } } ```@page "/" \<input id="input1" type="text" placeholder="Ingrese algun texto" @bind-value=@msgIn/\> \<input id="button1" type="button" value="Cambiar Texto" @onclick="chageText" /\> \
@msgOut \
@code { string msgIn = ""; string msgOut = ""; public void chageText(){ msgOut = msgIn; //Clean msgIn msgIn = ""; } }
Mi Solución ```js @page "/" <input id="input1" type="text" placeholder="Ingrese algun texto" @bind-value=@msgIn/> <input id="button1" type="button" value="Cambiar Texto" @onclick="chageText" />
@msgOut
@code { string msgIn = ""; string msgOut = ""; public void chageText(){ msgOut = msgIn; //Clean msgIn msgIn = ""; } } ```@page "/" \<input id="input1" type="text" placeholder="Ingrese algun texto" @bind-value=@msgIn/\> \<input id="button1" type="button" value="Cambiar Texto" @onclick="chageText" /\> \
@msgOut \
@code { string msgIn = ""; string msgOut = ""; public void chageText(){ msgOut = msgIn; //Clean msgIn msgIn = ""; } }
```js @page "/" <input id="input1" type="text" placeholder="Ingrese algun texto" @bind-value=@msgIn/> <input id="button1" type="button" value="Cambiar Texto" @onclick="chageText" />
@msgOut
@code { string msgIn = ""; string msgOut = ""; public void chageText(){ msgOut = msgIn; //Clean msgIn msgIn = ""; } } ```Mi solución
Mi solucion: `@page "/"` `<input id="input1" type="text" placeholder="Ingrese algun texto" @bind-value=@msgIn/>` `<input id="button1" type="button" value="Cambiar Texto" @onclick="chageText" />` `
` ` @msgOut` `
` `@code` `{` ` string msgIn = "";` ` string msgOut = "";` ` public void chageText(){` ` msgOut = msgIn;` ` //Clean msgIn` ` msgIn = "";` ` }` `}`

Este es mi solución al reto

@page "/"


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


@code 
{
    string message1 = "";
    string message2 = "";
    string completedMessage = "";
    private void ChangeText()
    {
        completedMessage = message1 + ", " + message2;
        
    }
}

@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;

    }
}```