Answered by:
Bulk insert into table In Blazor

Question
-
User2041008840 posted
Hello, I want to bulk insert data into database from multiple textbox
I tried google but didnt find any solution. Also I create the this bulk entry in asp.net mvc but I dont getting logic properly for blazor
can anyone please share link and put example of source code How can i post multple data from multiple textbox into database.
in Blazor?Thursday, August 13, 2020 5:55 PM
Answers
-
User475983607 posted
Where's the Web API, EF Core Query, code to post values???
Anyway, below is an example that I pieced together from the Blazor todo tutorial on this site, the fetch data example that comes with the standard Blazor template, and the official Call a web API from ASP.NET Core Blazor. My point is the information is readily available on this site and standard docs.
Operation: click the Add todo button to add inputs dynamically on the page. Enter values in the inputs and click Save todo. The save button click invokes HttpClient which sends an HTTP post to the the Todo Web API controller. The JSON Todo list is returned to the Blazor app and displaced on the page. I'm leaving the EF Core save for you to write.
@page "/postexample" @inject HttpClient Http <h3>PostExample</h3> <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3> <ul> @foreach (var todo in todos) { <li> <input type="checkbox" @bind="todo.IsDone" /> <input @bind="todo.Title" /> </li> } </ul> <input placeholder="Something todo" @bind="newTodo" /> <button @onclick="AddTodo">Add todo</button> <hr /> <div> <button @onclick="SaveTodo">Save Todo</button> </div> <div> @jsonResponse </div> @code { private IList<TodoItem> todos = new List<TodoItem>(); private string newTodo; private string jsonResponse = string.Empty; private void AddTodo() { if (!string.IsNullOrWhiteSpace(newTodo)) { todos.Add(new TodoItem { Title = newTodo }); newTodo = string.Empty; } } private async Task SaveTodo() { HttpResponseMessage response = await Http.PostAsJsonAsync("https://localhost:44379/api/todo", todos); jsonResponse = await response.Content.ReadAsStringAsync(); } }
Web API
namespace ApiDemo.Controllers { [Route("api/[controller]")] [ApiController] public class TodoController : ControllerBase { private readonly ILogger<TodoController> _logger; private readonly List<TodoItem> items; public TodoController(ILogger<TodoController> logger) { _logger = logger; items = new List<TodoItem>(); } [HttpGet] public ActionResult<List<TodoItem>> Get() { return items; } [HttpPost] public ActionResult<List<TodoItem>> Post(List<TodoItem> todoItems) { return todoItems; } } public class TodoItem { public string Title { get; set; } public bool IsDone { get; set; } } }
I built a separate Web API project and therefore must enable CORS in the Web API application.
public void ConfigureServices(IServiceCollection services) { services.AddCors(options => { options.AddDefaultPolicy( builder => { builder.WithOrigins("https://localhost:44331", "https://localhost:44301") .AllowAnyHeader() .AllowAnyMethod() .AllowCredentials(); }); }); services.AddControllers() .AddJsonOptions(options => options.JsonSerializerOptions.IgnoreNullValues = true); }
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, August 14, 2020 12:04 PM
All replies
-
User475983607 posted
Hello, I want to bulk insert data into database from multiple textbox
I tried google but didnt find any solution. Also I create the this bulk entry in asp.net mvc but I dont getting logic properly for blazor
can anyone please share link and put example of source code How can i post multple data from multiple textbox into database.
in Blazor?Blazor Server or Blazor WASM? Is Web API involved? What data access are you using EC Core? What does "Bulk load for multiple textboxes" mean. Are you trying to upload a file? Or simply accept user input?
Share the code that you have written up to this point, explain how you expect the code to function and what actually happens.
Thursday, August 13, 2020 8:53 PM -
User2041008840 posted
I want to insert multiple record rows at once into table.
I am using Blazor wasm and ASP.net core web api using ef
its goes like this
textbox
textbox
textbox
save button
when i am click save button it save all the data into single table. i can also add dynamically textbox to add another value into database.
Friday, August 14, 2020 3:45 AM -
User2041008840 posted
@page "/Home/" @layout EmptyLayout @for (int i = 0; i < 3; i++) { <input @bind="Text" id="@i" placeholder="Text @i" /> <br /> <br /> } @foreach (var item in Name) { @item <br /> } <button type="submit" @onclick="@(()=>Insert())">Submit</button> @code { string Text; List<string> Name { get; set; } = new List<string>(); List<string> inputName { get; set; } = new List<string>(); private void Insert() { Name.Add(Text); } }
I tried like this but it not getting each textbox value its takes only one textbox value. By ID i set unique id its still not working.
How I can achieve this? If I get textbox entries in list then i can apply foreach loop and insert into database or list.Friday, August 14, 2020 4:34 AM -
User475983607 posted
Where's the Web API, EF Core Query, code to post values???
Anyway, below is an example that I pieced together from the Blazor todo tutorial on this site, the fetch data example that comes with the standard Blazor template, and the official Call a web API from ASP.NET Core Blazor. My point is the information is readily available on this site and standard docs.
Operation: click the Add todo button to add inputs dynamically on the page. Enter values in the inputs and click Save todo. The save button click invokes HttpClient which sends an HTTP post to the the Todo Web API controller. The JSON Todo list is returned to the Blazor app and displaced on the page. I'm leaving the EF Core save for you to write.
@page "/postexample" @inject HttpClient Http <h3>PostExample</h3> <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3> <ul> @foreach (var todo in todos) { <li> <input type="checkbox" @bind="todo.IsDone" /> <input @bind="todo.Title" /> </li> } </ul> <input placeholder="Something todo" @bind="newTodo" /> <button @onclick="AddTodo">Add todo</button> <hr /> <div> <button @onclick="SaveTodo">Save Todo</button> </div> <div> @jsonResponse </div> @code { private IList<TodoItem> todos = new List<TodoItem>(); private string newTodo; private string jsonResponse = string.Empty; private void AddTodo() { if (!string.IsNullOrWhiteSpace(newTodo)) { todos.Add(new TodoItem { Title = newTodo }); newTodo = string.Empty; } } private async Task SaveTodo() { HttpResponseMessage response = await Http.PostAsJsonAsync("https://localhost:44379/api/todo", todos); jsonResponse = await response.Content.ReadAsStringAsync(); } }
Web API
namespace ApiDemo.Controllers { [Route("api/[controller]")] [ApiController] public class TodoController : ControllerBase { private readonly ILogger<TodoController> _logger; private readonly List<TodoItem> items; public TodoController(ILogger<TodoController> logger) { _logger = logger; items = new List<TodoItem>(); } [HttpGet] public ActionResult<List<TodoItem>> Get() { return items; } [HttpPost] public ActionResult<List<TodoItem>> Post(List<TodoItem> todoItems) { return todoItems; } } public class TodoItem { public string Title { get; set; } public bool IsDone { get; set; } } }
I built a separate Web API project and therefore must enable CORS in the Web API application.
public void ConfigureServices(IServiceCollection services) { services.AddCors(options => { options.AddDefaultPolicy( builder => { builder.WithOrigins("https://localhost:44331", "https://localhost:44301") .AllowAnyHeader() .AllowAnyMethod() .AllowCredentials(); }); }); services.AddControllers() .AddJsonOptions(options => options.JsonSerializerOptions.IgnoreNullValues = true); }
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, August 14, 2020 12:04 PM