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

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

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

    }
}

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;

    }
}```