Scribd
Upload
3 views

EditForm Modelstring

The document outlines a Blazor component for managing user data, including a form for adding and editing users with fields for ID, name, and address. It connects to a SQL database using stored procedures to add and retrieve user information. Additionally, it displays a table of users with options to edit or delete each entry.

Uploaded by

Angel Monares
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

EditForm Modelstring

The document outlines a Blazor component for managing user data, including a form for adding and editing users with fields for ID, name, and address. It connects to a SQL database using stored procedures to add and retrieve user information. Additionally, it displays a table of users with options to edit or delete each entry.

Uploaded by

Angel Monares
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

<EditForm Model ="Input" OnValidSubmit="AddUser" FormName ="edit-form"

method="post">

<div class="form-group">
<label class="form-label"> Id</label>
<InputText class="form-control" @bind-Value="Input.UserId"/>
</div>
<div class="form-group">
<label class="form-label"> Name</label>
<InputText class="form-control" @bind-Value="Input.UserName"/>
</div>
<div class="form-group">
<label class="form-label">Address</label>
<InputText class="form-control" @bind-Value="Input.UserAddress"/>
</div>

<button type="submit"> Add</button>


<button type="button" @onclick ="NewUser"> New</button>
<button type="button" @onclick="ReplaceUser"> Replace</button>
</EditForm>

<h3>Users Table</h3>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var item in Users)
{
<tr>
<td>@item.UserId</td>
<td>@item.UserName</td>
<td>@item.UserAddress</td>
<td>
<button @onclick="() => EditUser(item)">Edit</button>
<button @onclick="() => DeleteUser(item)">Delete</button>
</td>
</tr>
}
</tbody>
</table>

@code
{
private User Input { get; set; } = new();
private IEnumerable<User>? Users;

private async Task AddUser()


{
var connectionString = "Data Source=(localdb)\\MSSQLLocalDB;Initial
Catalog=Users;Integrated Security=True;Connect Timeout=60;Encrypt=True;Trust Server
Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False";
using IDbConnection connection = new SqlConnection(connectionString);
var storedProc = "[dbo].[CreateUser]";
var parameters = new DynamicParameters();
parameters.Add("@Id", Input.UserId, DbType.String, ParameterDirection.Input);
parameters.Add("@Name", Input.UserName, DbType.String, ParameterDirection.Input);
parameters.Add("@Address", Input.UserAddress, DbType.String, ParameterDirection.Input);

await connection.ExecuteAsync(storedProc, parameters, commandType:


CommandType.StoredProcedure);

storedProc = "[dbo].[GetUsers]";
Users = await connection.QueryAsync<User>(storedProc, commandType:
CommandType.StoredProcedure);
}
protected override async Task OnInitializedAsync()
{
var connectionString = "Data Source=(localdb)\\MSSQLLocalDB;Initial
Catalog=Users;Integrated Security=True;Connect Timeout=60;Encrypt=True;Trust Server
Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False";
using IDbConnection connection = new SqlConnection(connectionString);

var storedProc = "[dbo].[GetUsers]";


Users = await connection.QueryAsync<User>(storedProc, commandType:
CommandType.StoredProcedure);

await base.OnInitializedAsync();
}

You might also like