ASP.NET Core视图中点击Create按钮才显示Create视图的问题求助

核心问题 #

你遇到的问题根源有两个：

• DOM ID重复：循环中每个创建视图所在的<tr>都使用@sez.Rqkey作为ID，而同一个请求下的所有Seizure的Rqkey是相同的，导致多个元素共用同一个ID，浏览器无法正确识别和控制元素的显示隐藏，最终引发加载时Create视图意外显示的问题。
• 按钮位置错误：Create Record按钮被放在了隐藏的<tr>内部，这会导致按钮初始状态也是隐藏的，不符合“点击按钮显示Create视图”的交互逻辑。

修复步骤 #

1. 修正唯一ID，避免冲突

将创建视图所在的<tr>的ID改为唯一值，比如结合Szkey和Rqkey生成：

<tr style="display:none" id="create-seizure-@sez.Szkey-@sez.Rqkey">
    @await Html.PartialAsync("CreateSeizure", sez)
</tr>

2. 调整按钮位置，移到可见区域

把Create Record按钮放到显示数据的<tr>中，新增一列放置按钮：

<tr id="@rownum">
    <td><input type="button" value="Update" onclick="showSeizure(@sez.Szkey); hide(@rownum)" /></td>
    <td><a asp-action="DeleteSeizure" onclick="return confirm('Are you sure you want to remove @sez.Item?')" asp-route-id="@sez.Szkey">Delete</a></td>
    <td>@(rownum+1)</td>
    <td>@sez.Category</td>
    <td>@sez.Item</td>
    <td>@sez.Qty</td>
    <td>@sez.Value</td>
    <td><input type="button" value="Create Record" onclick="showcreate('create-seizure-@sez.Szkey-@sez.Rqkey')" /></td>
</tr>

3. 修正JavaScript函数参数传递与显示逻辑

因为ID现在是包含连字符的字符串，调用时需要用引号包裹，同时将display: contents改为display: table-row，更符合表格行的显示规范：

function showcreate(key){
    document.getElementById(key).style.display = "table-row";
}

function showSeizure(key){
    document.getElementById(key).style.display = "table-row";
}

完整修正后的关键代码片段

@model RequestViewModel
<div style="background-color:lightgray; width:25%">
<table>
    <tr>
        <td>
            <table class="table table-bordered table-striped" style="width:75%;
            background-color:white; border:1px solid black;">
            <thead>
                    <tr>
                        <th><!--Edit--></th>
                        <th><!--Delete--></th>
                        <th>#</th>
                        <th>Category</th>
                        <th>Item</th>
                        <th>Qty</th>
                        <th>Value</th>
                        <th>Create</th>
                    </tr>
            </thead>
            <tbody>
                <input type="hidden" asp-for="Rqkey"/>
                <input type="hidden" asp-for="Szkey"/>
                   
                    @{
                        if(Model.Seizures != null)
                        {
                            int rownum = 0;
                            foreach (Seizure sez in Model.Seizures)
                            {
                                                <tr id="@rownum">
                                                    <td><input type="button" value="Update" onclick="showSeizure(@sez.Szkey); hide(@rownum)" /></td>
                                                    <td><a asp-action="DeleteSeizure" onclick="return confirm('Are you sure you want to remove @sez.Item?')" asp-route-id="@sez.Szkey">Delete</a></td>
                                                    <td>@(rownum+1)</td>
                                                    <td>@sez.Category</td>
                                                    <td>@sez.Item</td>
                                                    <td>@sez.Qty</td>
                                                    <td>@sez.Value</td>
                                                    <td><input type="button" value="Create Record" onclick="showcreate('create-seizure-@sez.Szkey-@sez.Rqkey')" /></td>
                                                </tr>
                                                <tr style="display:none" id="@sez.Szkey">
                                                    @await Html.PartialAsync("UpdateSeizure", sez)
                                                </tr>
                                                <tr style="display:none" id="create-seizure-@sez.Szkey-@sez.Rqkey">
                                                      @await Html.PartialAsync("CreateSeizure", sez)
                                                </tr>
                                                rownum++;
                            }
                        }
                    }
            </tbody>
                
            </table>
        </td>
    </tr>
    
</table>

</div>
<script type="text/javascript">
function showSeizure(key){
    document.getElementById(key).style.display = "table-row";
}
function hide(rownum){
    document.getElementById(rownum).style.display = "none";
}
function showcreate(key){
    document.getElementById(key).style.display = "table-row";
}
function hidetable(rownum) {
    document.getElementById(rownum).style.display = "none";
}
</script>

额外说明 #

同一视图中使用多个PartialAsync完全没问题，这不是导致问题的原因。同时要确保CreateSeizure分部视图本身没有设置强制显示的样式，避免覆盖外部的display:none。

内容的提问来源于stack exchange，提问作者mag232913