C# 表单未在MVC视图中正确渲染

我试图在视图中使用删除按钮生成技能列表。使用表单标记使用[HttpPost]实现删除功能。但问题是表单并没有正确生成。我的表行不是在表单内部生成的，而是在表单之后生成的

下面是我的代码视图

@if (Model.Count() <= 0)
{
    @Html.DisplayText("Skills not added, please add")
}
else
{
    <br />
        <table  class="table table-hover">
            <thead>
                <tr>
                    <th>
                        Skill Category
                    </th>
                    <th>
                        Skill
                    </th>
                    <th>

                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var fam in Model.ToList())
                {
                    using(@Html.BeginForm("Delete", "Skill", new { id = @fam.SkillId }))
                    {
                        <tr>
                            <td>
                                @fam.Skill.SkillCategory.Description
                            </td>
                            <td>
                                @fam.Skill.Description
                            </td>
                            <td>
                                <input type="submit" value="Delete" class="btn btn-link">
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
}

---

@if（Model.Count（）您可以在下面的代码中尝试-

@if (Model != null && Model.Count > 0)
{

<table class="table table-hover">
    <thead>
        <tr>
            <th>
                Skill Category
            </th>
            <th>
                Skill
            </th>
            <th>

            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var fam in Model.ToList())
        {

                <tr>
                    <td>
                        @fam.Skill.SkillCategory.Description
                    </td>
                    <td>
                        @fam.Skill.Description
                    </td>
                    <td>
                        using (@Html.BeginForm("Delete", "Skill", new { id = @fam.SkillId }))
                        {
                        @Html.Hidden("SkillId", fam.SkillId)
                        <input type="submit" value="Delete" class="btn btn-link">
                        }
                    </td>
                </tr>

        }
    </tbody>
</table>
}
 else
 {
    @Html.DisplayText("Skills not added, please add")
  }

@if（Model！=null&&Model.Count>0）
{
技能类别
技巧
@foreach（Model.ToList（）中的var fam）
{
@fam.Skill.SkillCategory.Description
@家庭技能描述
使用（@Html.BeginForm（“Delete”，“Skill”，new{id=@fam.SkillId}））
{
@Html.Hidden（“SkillId”，fam.SkillId）
}
}
}
其他的
{
@Html.DisplayText（“未添加技能，请添加”）
}
我会更改此设置，这样您就有一个表单包装整个页面，然后使用jQuery（例如）通过每个删除按钮的“单击”执行删除

对于每一行，您的输出如下所示：

    @foreach (var fam in Model.ToList())
    {

            <tr id="row-@(fam.SkillId)>
                <td>
                    @fam.Skill.SkillCategory.Description
                </td>
                <td>
                    @fam.Skill.Description
                </td>
                <td>
                    <input type="button" id="btn-@(fam.SkillId) value="Delete" class="btn btn-link btn-deleteaction" data-id="@fam.SkillId">

                </td>
            </tr>

    }

@foreach（Model.ToList（）中的var fam）
{
}

然后你有一个脚本：

<script>
$(document).ready(function() {
    $(".btn-deleteaction").on("click", function(e) {
        e.preventDefault();

        var deleteId = $(this).attr("data-id");

        $.post("~/skill/delete", { id : deleteId }, function(response) {

             //make the controller response JSON so you can tell if it is a success
             //  -- if success, remove the row
             //  -- if fail, show an error  
             if(response.success) {
                 $("row-" + id).remove();
                 alert("Successfully deleted");
             }
             else {
                 alert("Sorry, there was a problem deleting your item");
             }
        });  
    });
});
</script>


$（文档）.ready（函数（）{
$（.btn deleteaction”）。在（“单击”，函数（e）{
e、 预防默认值（）；
var deleteId=$（this.attr（“数据id”）；
$.post（“~/skill/delete”，{id:deleteId}，函数（响应）{
//将控制器响应设置为JSON，以便判断是否成功
//--如果成功，请删除该行
//--如果失败，则显示错误
if（response.success）{
$（“行-”+id）.remove（）；
警报（“已成功删除”）；
}
否则{
警报（“抱歉，删除您的项目时出现问题”）；
}
});  
});
});

在我看来，管理起来要容易得多。
是的，对于每一行，表单不能是html表的子元素。相反，你可以将整个html表放在表单中。我希望每一行都在我的表单中，类似这样的沟通技巧—口头沟通一个表单就足够了，只需将
BeginForm
helper移出循环即可。但是，您应该用另一种方式提供
id
，例如使用
ActionLink
，路由值设置为迭代值。
<script>
$(document).ready(function() {
    $(".btn-deleteaction").on("click", function(e) {
        e.preventDefault();

        var deleteId = $(this).attr("data-id");

        $.post("~/skill/delete", { id : deleteId }, function(response) {

             //make the controller response JSON so you can tell if it is a success
             //  -- if success, remove the row
             //  -- if fail, show an error  
             if(response.success) {
                 $("row-" + id).remove();
                 alert("Successfully deleted");
             }
             else {
                 alert("Sorry, there was a problem deleting your item");
             }
        });  
    });
});
</script>