在Asp.Net Core 2.1.0 Razor页面中创建批量记录

Question

I want to update the default scenario to insert multiple records at a time by doing following.

1. On Form Submit, data to be submitted to a List/Table and display on the same page. May be using Ajax or server-side.

2. On Final Submit post, insert all records to the DB.

My Entity

public class ItemAttribute
{
    [Key]
    public int ID { get; set; }
    public int ItemID { get; set; }
    public string UoM { get; set; }
    public decimal SaleVal { get; set; }

    [ForeignKey("ItemID")]
    public Item Item { get; set; }
}

My Create Model

private readonly Test3.Models.Test3Context _context;
    public CreateModel(Test3.Models.Test3Context context)
    { _context = context; }

    public IActionResult OnGet()
    {
        ViewData["ItemID"] = new SelectList(_context.Item, "ItemID", "ItemID");
        return Page();
    }

    [BindProperty]
    public ItemAttribute ItemAttribute { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        _context.ItemAttribute.Add(ItemAttribute);
        await _context.SaveChangesAsync();

        return RedirectToPage("./Index");
    }

Here is Razor Page

<form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="ItemAttribute.ItemID" class="control-label"></label>
            <select asp-for="ItemAttribute.ItemID" class ="form-control" asp-items="ViewBag.ItemID"></select>
        </div>
        <div class="form-group">
            <label asp-for="ItemAttribute.UoM" class="control-label"></label>
            <input asp-for="ItemAttribute.UoM" class="form-control" />
            <span asp-validation-for="ItemAttribute.UoM" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ItemAttribute.SaleVal" class="control-label"></label>
            <input asp-for="ItemAttribute.SaleVal" class="form-control" />
            <span asp-validation-for="ItemAttribute.SaleVal" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </form>

Here everything works for single record insertion to the DB.

Please suggest me the way to achieve this.

Answer 1

There is no any direct way as such.

You can use library which will store entire object in client side. ie Knockout JS or Angular JS

and in the last post all data to server side

 var data = JSON.stringify({ 'values': values});

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: 'yourURL',
        data: data,
        success: function () {          
            $('#result').html('successfully called.');
        },
        failure: function (response) {          
            $('#result').html(response);
        }
    }); 

and in the controller :

public async Task<IActionResult> saveData(List<ItemAttribute> data)
{
        foreach(var item in data)
        {
          _context.ItemAttribute.Add(item);
        }
        await _context.SaveChangesAsync();
}

Answer 2

I have found a solution using Session and List<T> .

1. Add one more Input button to handle the data to store in Session with asp-page-handler="AddtoList"

2. OnPostAddtoList method, load already existing session data to List<T> and append new record to it and save to session back.

Here is the OnPostAddtoList()

        var key = "ItemList";
        List<ItemAttribute> TempList = new List<ItemAttribute>();

        var value = HttpContext.Session.GetString(key);
        if (value != null)
        { TempList = JsonConvert.DeserializeObject<List<ItemAttribute>>(value); }

        var ItemAttribute1 = new ItemAttribute { UoM = ItemAttribute.UoM, SaleVal = ItemAttribute.SaleVal};
        TempList.Add(ItemAttribute1);

        ItemAttributeList = TempList;

        HttpContext.Session.SetString(key, JsonConvert.SerializeObject(ItemAttributeList));

        return Page();

3. So your list is available on .cshtml and in Session . Repeat the it till your list completes.
4. On final Submit, Load your Session List to List<T> and do DB saving or whatever your want.

Note: Following is the code to session to work in Asp.Net Core

In Startup.cs , Configuration method,

services.AddDistributedMemoryCache();
        services.AddSession(options =>
        {
            // Set a short timeout for easy testing.
            options.IdleTimeout = TimeSpan.FromMinutes(30);
            options.Cookie.HttpOnly = true;
        });

And in Configure method, add app.UseSession(); before app.UseMvc();