如何在ASP.NET Core Razor Page中创建主细节页面?

huangapple go评论66阅读模式
英文:

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

问题

我想创建一个主细节Razor页面。顶部(主)页面将包含主表的信息,底部(细节)页面将包含细节表的信息。

我想要从细节页面添加多条记录,这些记录将存储在细节表中。我如何实现这一点?

谢谢。
Muder

|主记录|
EmpId: 员工类型:

|细节记录|
| 名字: | 姓氏:
| 地址: | 城市:
|州: | 邮编:

我应该能够输入多条细节记录。

英文:

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.

答案1

得分: 0

以下是您提供的内容的中文翻译:

我认为在页面中显示所有细节不是一个好主意,因为一个主项有许多细节。如果数据库中有许多细节记录并在页面上全部显示出来,页面会看起来非常混乱。在我看来,在页面顶部,您可以创建一个表格显示所有主项,然后每个主项都有一个名为“显示详细信息”的按钮。当用户点击此按钮时,它将在页面底部显示相关的细节。以下是我的代码实现:

模型

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

控制器

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

视图

@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)">显示细节</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>');

                    // 创建表头
                    var tableHeader = $('<thead><tr><th>名字</th><th>姓氏</th></tr></thead>');
                    table.append(tableHeader);

                    // 创建表体
                    var tableBody = $('<tbody></tbody>');

                    for(var i = 0; i < data.length; i++ ){
                        // 创建表行和单元格
                        var row = $('<tr></tr>');

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

                        // 添加单元格到行
                        row.append(fNameCell);
                        row.append(lNameCell);

                        // 添加行到表体
                        tableBody.append(row);
                    }

                    var button = $('<button>添加细节</button>');

                    button.click(function () {
                        button.prop('disabled', true);

                        // 动态生成表单
                        var form = $('<form></form>');

                        // 创建输入字段
                        var fNameInput = $('<input type="text" name="fName" placeholder="输入名字">');
                        var lNameInput = $('<input type="text" name="lName" placeholder="输入姓氏">');
                        var MasterNameInput = $('<input type="text" hidden name="master" value='+name+'>');

                        // 创建提交按钮
                        var submitButton = $('<input type="submit" value="提交">');

                        // 添加输入字段和提交按钮到表单
                        form.append(fNameInput);
                        form.append(MasterNameInput);
                        form.append(lNameInput);
                        form.append(submitButton);

                        // 添加表单到容器元素 (例如,具有 id "formContainer" 的 div)
                        $('#formContainer').append(form);

                        // 附加提交事件处理程序到表单
                        form.submit(function (event) {
                            event.preventDefault();
                            button.prop('disabled', false);
                            $('#formContainer').empty();

                            // 执行 AJAX 请求
                            $.ajax({
                                url: "/Home/AddDetails",
                                method: "POST",
                                data: form.serialize(), // 序列化表单数据
                                success: function (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);
                                }
                            });
                        });
                    });

                    // 添加表体到表格
                    table.append(tableBody);

                    // 添加表格到容器元素 (例如,具有 id "tableContainer" 的 div)
                    $('#tableContainer').append(table);
                    $('#tableContainer').append(button);
                }
            })
        }
    </script>
}

这是您提供的代码和说明的中文翻译。如果您需要进一步的帮助或有其他问题,请随时提出。

英文:

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&lt;IActionResult&gt; Master()
{
var masters = await _context.masters.ToListAsync();
return View(masters);
}
[HttpGet]
public async Task&lt;List&lt;Details&gt;&gt; GetDetails(string name)
{
var result = await _context.masters.FirstOrDefaultAsync(x =&gt; x.Name == name);
var details = await _context.details.Where(x =&gt; x.MasterId == result.Id).ToListAsync();
return details;
}
[HttpPost]
public async Task&lt;IActionResult&gt; AddDetails(string fName,string lName,string master)
{
var relatedmaster = await _context.masters.FirstOrDefaultAsync(x =&gt; 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&lt;Master&gt;
&lt;style&gt;
table,table tr th, table tr td { 
border:1px solid #ccc;
}
&lt;/style&gt;
&lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;100%&quot; &gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;td&gt;Id&lt;/td&gt;
&lt;td&gt;Name&lt;/td&gt;
&lt;td&gt;Action&lt;/td&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
@for (int i = 0; i &lt; Model.Count(); i++)
{
&lt;tr&gt;
&lt;td&gt;@(i +1)&lt;/td&gt;
&lt;td&gt;@Model[i].Name&lt;/td&gt;
&lt;td&gt;&lt;button onclick=&quot;Show(event)&quot;&gt;Show details&lt;/button&gt;&lt;/td&gt;
&lt;/tr&gt;
}
&lt;/tbody&gt;
&lt;/table&gt;
&lt;hr /&gt;
&lt;div id=&quot;tableContainer&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;formContainer&quot;&gt;&lt;/div&gt;
@section Scripts{
&lt;script&gt;
function Show(event){
var button = event.target
var name = button.parentNode.previousElementSibling.textContent.trim();
$(&#39;#tableContainer&#39;).empty();
$(&#39;#formContainer&#39;).empty();
$.ajax({
type: &#39;Get&#39;,
url: &#39;/Home/GetDetails&#39;,
data: {&#39;name&#39; : name},
contentType: &quot;application/json&quot;,
success: function (data) {
var table = $(&#39;&lt;table&gt;&lt;/table&gt;&#39;);
// Create table header
var tableHeader = $(&#39;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;First Name&lt;/th&gt;&lt;th&gt;Last Name&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&#39;);
table.append(tableHeader);
// Create table body
var tableBody = $(&#39;&lt;tbody&gt;&lt;/tbody&gt;&#39;);
for(var i = 0; i&lt; data.length; i++ ){
// Create table row and cells for each data entry
var row = $(&#39;&lt;tr&gt;&lt;/tr&gt;&#39;);
var fNameCell = $(&#39;&lt;td&gt;&#39; + data[i].fName + &#39;&lt;/td&gt;&#39;);
var lNameCell = $(&#39;&lt;td&gt;&#39; + data[i].lName + &#39;&lt;/td&gt;&#39;);
// Append cells to the row
row.append(fNameCell);
row.append(lNameCell);
// Append row to the table body
tableBody.append(row);
}
var button = $(&#39;&lt;button&gt;Add Details&lt;/button&gt;&#39;);
button.click(function () {
button.prop(&#39;disabled&#39;, true);
// Generate the form dynamically
var form = $(&#39;&lt;form&gt;&lt;/form&gt;&#39;);
// Create input fields
var fNameInput = $(&#39;&lt;input type=&quot;text&quot; name=&quot;fName&quot; placeholder=&quot;Enter First Name&quot;&gt;&#39;);
var lNameInput = $(&#39;&lt;input type=&quot;text&quot; name=&quot;lName&quot; placeholder=&quot;Enter Last Name&quot;&gt;&#39;);
var MasterNameInput = $(&#39;&lt;input type=&quot;text&quot; hidden name=&quot;master&quot; value=&#39;+name+&#39;&gt;&#39;)
// Create a submit button
var submitButton = $(&#39;&lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;&#39;);
// 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 &quot;formContainer&quot;)
$(&#39;#formContainer&#39;).append(form);
// Attach a submit event handler to the form
form.submit(function (event) {
// Prevent default form submission
event.preventDefault();
button.prop(&#39;disabled&#39;, false);
$(&#39;#formContainer&#39;).empty();
// Perform AJAX request
$.ajax({
url: &quot;/Home/AddDetails&quot;,
method: &quot;POST&quot;,
data: form.serialize(), // Serialize form data
success: function (response) {
// Handle success response
var row = $(&#39;&lt;tr&gt;&lt;/tr&gt;&#39;);
var fNameCell = $(&#39;&lt;td&gt;&#39; + response.fName + &#39;&lt;/td&gt;&#39;);
var lNameCell = $(&#39;&lt;td&gt;&#39; + response.lName + &#39;&lt;/td&gt;&#39;);
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 &quot;tableContainer&quot;)
$(&#39;#tableContainer&#39;).append(table);
$(&#39;#tableContainer&#39;).append(button);
}
})
}
&lt;/script&gt;
}

Gif demo

如何在ASP.NET Core Razor Page中创建主细节页面?

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.

huangapple
  • 本文由 发表于 2023年7月18日 07:13:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76708628.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定