How to create a Master Details page in ASP.NET Core Razor Page?

Question

I want to create a Master Details Razor Page. On the Top(Master) Page will have info from the Master table and in the bottom(Details) page will have info from the Details table.

The like to add multiple records from the details page and the records goes in the details table? Hoe can I achieve it?

Thanks. Muder

|** MASTER RECORDS** | EmpId: Employee Type:

|DETAiLS RECORDS | | FName: | LName: | Address: | City: |State : | Zip:

I should be allow to enter multiple details records.

Answer 1

I don't think show all the details in the page is a good idea, Because one master has many details, If the you have a lot of details records in db and show all of them in the page, It will make the page look very cluttered. In my opinion, In the top of the page, You can create a table show all the Masters, Then each Master has a button called 'Show details'. When user click this button , It ill show related details in the bottom of the page. Here is my code to achieve it:

Models

public class Master
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

public class Details
    {
        public int Id { get; set; }
        public string FName { get; set; }
        public string LName { get; set; }
        public int MasterId { get; set; }
        public Master master { get; set; }
    }

Controller

public async Task<IActionResult> Master()
        {
            var masters = await _context.masters.ToListAsync();
            return View(masters);
        }


        [HttpGet]
        public async Task<List<Details>> GetDetails(string name)
        {
            var result = await _context.masters.FirstOrDefaultAsync(x => x.Name == name);
            var details = await _context.details.Where(x => x.MasterId == result.Id).ToListAsync();
            return details;
        }


        [HttpPost]
        public async Task<IActionResult> AddDetails(string fName,string lName,string master)
        {
            var relatedmaster = await _context.masters.FirstOrDefaultAsync(x => x.Name == master);
            var details = new Details();
            details.FName = fName;
            details.LName = lName;
            details.master = relatedmaster;
            var result =  await _context.details.AddAsync(details);
            await _context.SaveChangesAsync();
            return Ok(details);
        }

View

@model List<Master>

    <style>
        table,table tr th, table tr td { 
         border:1px solid #ccc;
         }
    </style>

<table cellspacing="0" cellpadding="0" width="100%" >
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count(); i++)
        {
            <tr>
                <td>@(i +1)</td>
                <td>@Model[i].Name</td>
                <td><button onclick="Show(event)">Show details</button></td>
            </tr>
        }
    </tbody>
</table>

<hr />


<div id="tableContainer"></div>
<div id="formContainer"></div>

@section Scripts{
    <script>
        function Show(event){
           var button = event.target
            var name = button.parentNode.previousElementSibling.textContent.trim();
            $('#tableContainer').empty();
            $('#formContainer').empty();

            $.ajax({
                type: 'Get',
                url: '/Home/GetDetails',
                data: {'name' : name},
                contentType: "application/json",
                success: function (data) {
                    var table = $('<table></table>');

                    // Create table header
                    var tableHeader = $('<thead><tr><th>First Name</th><th>Last Name</th></tr></thead>');
                    table.append(tableHeader);

                    // Create table body
                    var tableBody = $('<tbody></tbody>');

                    
                
                    for(var i = 0; i< data.length; i++ ){
                        // Create table row and cells for each data entry
                        var row = $('<tr></tr>');

                        var fNameCell = $('<td>' + data[i].fName + '</td>');
                        var lNameCell = $('<td>' + data[i].lName + '</td>');

                        // Append cells to the row
                        row.append(fNameCell);
                        row.append(lNameCell);

                        // Append row to the table body
                        tableBody.append(row);
                    }

                    var button = $('<button>Add Details</button>');

                    button.click(function () {
                       
                        button.prop('disabled', true);
                        // Generate the form dynamically
                        var form = $('<form></form>');
                        // Create input fields
                        var fNameInput = $('<input type="text" name="fName" placeholder="Enter First Name">');
                        var lNameInput = $('<input type="text" name="lName" placeholder="Enter Last Name">');
                        var MasterNameInput = $('<input type="text" hidden name="master" value='+name+'>')

                        // Create a submit button
                        var submitButton = $('<input type="submit" value="Submit">');

                        // Add input fields and submit button to the form
                        form.append(fNameInput);
                        form.append(MasterNameInput)
                        form.append(lNameInput);
                        form.append(submitButton);

                        // Append the form to a container element (e.g., a div with id "formContainer")
                        $('#formContainer').append(form);

                        // Attach a submit event handler to the form
                        form.submit(function (event) {
                            // Prevent default form submission
                            event.preventDefault();
                            button.prop('disabled', false);
                            $('#formContainer').empty();
                            // Perform AJAX request
                            $.ajax({
                                url: "/Home/AddDetails",
                                method: "POST",
                                data: form.serialize(), // Serialize form data
                                success: function (response) {
                                    // Handle success response
                                    var row = $('<tr></tr>');

                                    var fNameCell = $('<td>' + response.fName + '</td>');
                                    var lNameCell = $('<td>' + response.lName + '</td>');
                                    row.append(fNameCell);
                                    row.append(lNameCell);
                                    tableBody.append(row);
                                }
                            });
                        });
                    });

                    


                    // Append table body to the table
                    table.append(tableBody);

                    // Append the table to a container element (e.g., a div with id "tableContainer")
                    $('#tableContainer').append(table);
                    $('#tableContainer').append(button);
                }
               
            })
        }
    </script>
}

Gif demo

From above gif demo, You can check how it works, If you wanna update each record, You can add a button to each record, When user click this button, Generate a form for user to input new value.