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?

Answer 1

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.

Answer 2

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. 

Answer 3

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.

Answer 4

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

        }