c# - 表单未在 MVC 视图中正确呈现

Question

我正在尝试在我的视图中使用删除按钮生成技能列表。使用表单标签来实现使用 [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>
}

以下是生成的 HTML。

<table class="table table-hover">
   <thead>
      <tr>
         <th>
            Skill Category
         </th>
         <th>
            Skill
         </th>
         <th>
         </th>
      </tr>
   </thead>
   <tbody>
      <form action="/Skill/Delete/1" method="post"></form>
      <tr>
         <td>
            Communication Skills
         </td>
         <td>
            Verbal Communication
         </td>
         <td>
            <input type="submit" value="Delete" class="btn btn-link">
         </td>
      </tr>
      <form action="/Skill/Delete/53" method="post"></form>
      <tr>
         <td>
            Personal Skills
         </td>
         <td>
            Competitiveness
         </td>
         <td>
            <input type="submit" value="Delete" class="btn btn-link">
         </td>
      </tr>
      <form action="/Skill/Delete/163" method="post"></form>
      <tr>
         <td>
            IT Skills
         </td>
         <td>
            Java
         </td>
         <td>
            <input type="submit" value="Delete" class="btn btn-link">
         </td>
      </tr>
      <form action="/Skill/Delete/203" method="post"></form>
      <tr>
         <td>
            Custom
         </td>
         <td>
            DummySkill
         </td>
         <td>
            <input type="submit" value="Delete" class="btn btn-link">
         </td>
      </tr>
   </tbody>
</table>

从上面我们可以看到表格在我的表格行上方生成，我的代码可能有什么问题？

标签： c#asp.net-mvcformsasp.net-mvc-views

Answer 1

我会改变这一点，这样你就有一个表格来包裹整个页面，然后使用 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>

    }

然后你有一个脚本：

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

在我看来更容易管理。