How to insert data to details Table in mvc core using (Jquery) or (Jquery and Ajax)

Question

old school c# developer here.. long story short, the company I'm working for has decided to continue developing using core technology and as a former winforms developer I'm not familiar with the web concepts and having trouble saving the details table to the master table. Any help is very appreciated.

I have two Tables with 1 to many Relationship

TOURNAMENTS_M (Master)

TOURNAMENTS_D (Detail) 

I have edited the scaffolded Create page to include the fields for the detail table for entry.

I have even managed to update the table(visually) for the added details records using Jquery.

I'm having trouble to save this information to my database though, there have been a couple of different tutorials I've been following to with different approaches.. yet could't manage to succeed using neither approaches...

1st Approach is using Jquery and Ajax method. I've seen examples where people save data through a modal window and when save is clicked the data is updated on the gridview so as I understood(correct me if I'm wrong) Ajax is used to reload data without refreshing the page, and to postback the data to the controller. In my case I'm no sure if this is the right method to use since both master and child controls are on the same page.

2nd Approach is using just Jquery

in this approach my Create method in the controller and jquery methods are as following

[HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(TOURNAMENTS_M pTournamentsM)
    {

        if (ModelState.IsValid)
        {
            _context.Add(pTournamentsM);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(pTournamentsM);
    }

function GetCurrentDetail() {

var TD_LEVEL = $("#TD_LEVEL").val();
var TD_SB = $("#TD_SB").val();
var TD_BB = $("#TD_BB").val();


var tourDetail = {
    "TD_LEVEL": TD_LEVEL,
    "TD_SB": TD_SB,
    "TD_BB": TD_BB
};

return tourDetail;

}

//triggers when clicked on add tour details button function CreateRowForTourDetails() {

    var current = GetCurrentDetail();
    var index = $("#detailsTable").children("tr").length;


    var indexcell = "<td style='display:none'> <input type='hidden' id='index" + index + "' name='TOURNAMENTS_D.index' value = '" + index + "' /> </td>";

    var TD_LEVEL = "<td> <input type='hidden' id='TD_LEVEL" + index + "' name='TOURNAMENTS_D[" + index + "].TD_LEVEL ' value = '" + current.TD_LEVEL + "' />" + current.TD_LEVEL + " </td>";
    var TD_SB =    "<td> <input type='hidden' id='TD_SB" + index + "' name='TOURNAMENTS_D[" + index + "].TD_SB ' value = '" + current.TD_SB + "' />" + current.TD_SB + " </td>";
    var TD_BB =    "<td> <input type='hidden' id='TD_BB" + index + "' name='TOURNAMENTS_D[" + index + "].TD_BB ' value = '" + current.TD_BB + "' />" + current.TD_BB + " </td>";

    //var removeButton = "<td><a id ='myRemove' data-itemId='0'  class='btn btn-primary'>Remove</a></td>";

    var tourDetail = "<tr>" +indexcell +  +TD_LEVEL + TD_SB + TD_BB  + "</tr>";

    var detailsTableBody = $("#DetailsTableBody");

    detailsTableBody.append(tourDetail);     
}

with this method when I place my break point inside the Create function in my controller I can see that the count of TOURNAMENTS_D increases however the value is null

Answer 1

Try Web Browser Debug tool to check the request, make sure your request like below:

Here is My Model:

    public class Order
{
    public int Id { get; set; }
    public string OrderNo { get; set; }
    public ICollection<OrderDetail> OrderDetails { get; set; }
}

public class OrderDetail
{
    public int Id { get; set; }
    public int ProductId { get; set; }
}