Форма не отображается правильно в MVC View - PullRequest
0 голосов
/ 18 февраля 2019

Я пытаюсь создать список навыков с кнопкой удаления на мой взгляд.Использовал тег формы для реализации функции удаления, используя [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>

Из приведенного выше видно, что форма генерируется над моимстроки таблицы, в чем может быть проблема с моим кодом?

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Я бы изменил это, чтобы у вас была одна форма, обертывающая всю страницу, а затем используйте 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>

На мой взгляд, намного проще управлять.

0 голосов
/ 18 февраля 2019

Вы можете попробовать код ниже -

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