Form not getting rendered properly in MVC View

Question

I am trying to generate list of skills with delete button in my view. Used a form tag to implement delete functionality using [HttpPost]. But problem is form is not getting generated properly. My table rows are not getting generated inside the form, but are being generated after form.

Following is my code in view.

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

Following is the generated 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>

From the above we can see that form is getting generated above my table rows, What could be the problem with my code?

A form cannot be a child element of html table. rather you can put the entire html table inside form — TanvirArjel, Feb 18 '19 at 07:51
I want each row to be inside my form, something like this
Communication Skills Verbal Communication — Prasanth Kumar Vinakota, Feb 18 '19 at 07:53
A single form should be enough for this, just move `BeginForm` helper outside the loop. However, you should provide `id` with another way, e.g. using `ActionLink` with route value set with iterated values. — Tetsuya Yamamoto, Feb 18 '19 at 07:56

score 0 · Answer 1 · answered Feb 18 '19 at 08:36

I would change this so you have one form wrapping the whole page then use jQuery (for example) to carry out your delete via each delete button's 'click'.

Your output would look something like this for each row:

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

    }

Then you have a script:

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

Much easier to manage in my opinion.

score -1 · Answer 2 · answered Feb 18 '19 at 08:01

You can try below code -

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

Form not getting rendered properly in MVC View

2 Answers2