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>

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

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>

我认为管理起来容易得多。

Answer 2

您可以尝试以下代码-

@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")
  }

表单无法在MVC视图中正确呈现

2 个答案: