Scribd
Upload
3 views2 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views2 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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