Ajax.BeginForm in MVC is working only in IE

Question

I have created a table in my Asp.Net MVC application using Razor. Each rows in this table are generating dynamically using a FOREACH loop. Each row contains a FORM with one text field and one button.

The code looks like,

var trId = 0;
foreach(var item in Model.MyData)
    {
      trId++;
      <tr>
        @using (Ajax.BeginForm("SaveData","User",null, new AjaxOptions {HttpMethod = "POST", InsertionMode = InsertionMode.Replace}, new {id = "form1", role = "form", @class = "form-horizontal"}))
        {
          <td>
            @Html.TextBoxFor(modelitem => item.Name)
          </td>
          <td>
            <button type="submit" title="Update" class="btn btn-primary" id="btnUpdate_@trId" onclick="return Validate(item.Name)">
              Save Data
            </button>
          </td>
        }
      </tr>
    }

This will work in IE. But it's not working in Edge or Chrome.

When I inspect the page in IE, the html code will be like,

<tr>
  <form class="form-horizontal" id="form1" role="form" action="/User/SaveData" method="post" data-ajax-method="POST" data-ajax="true">
    <td>
      <input name="item.Name" type="text" value="test" />
    </td>
    <td>
      <button title="Update" class="btn btn-primary" id="btnUpdate_1" onclick="return Validate('test')" type="submit">Save Data</button>
    </td>
  </form>
</tr>

But in Chrome and Edge, the form is not holding the text field and button.

<tr>
  <form class="form-horizontal" id="form1" role="form" action="/User/SaveData" method="post" data-ajax-method="POST" data-ajax="true"></form>
    <td>
      <input name="item.Name" type="text" value="test" />
    </td>
    <td>
      <button title="Update" class="btn btn-primary" id="btnUpdate_1" onclick="return Validate('test')" type="submit">Save Data</button>
    </td>
</tr>

Why this Ajax.BeginForm is not working in Edge/Chrome , but works fine in IE? Is there any relation between this issue and the HTML difference? Why the html looks different in IE and Edge?

Can anyone suggest a solution for this issue?

Note: I am generating this table rows in a PartialView.

I see you placed the `form` element directly ``. In HTML syntax, under `tr` should be is `td` or `th`. Also, you set the same id for forms. Please try set unique id for each form element — Le Vu, Sep 24 '21 at 12:37
@LeVu : I tried with unique form id also. But still I am getting the same issue. This works fine in IE. Why in IE and Edge, we are getting 2 different HTML code for same UI? — itzmebibin, Sep 24 '21 at 12:54
Can you move the `form` to surround the entire table instead? — Rojo, Sep 24 '21 at 13:10
@Rojo : The table header part is static in the main View. Only portion is generating dynamically in a PartialView. First few blocks have this FORM and few others are using another FORM and defined in an another PartialView. So, it's not possible to move this FORM to surround the entire table. — itzmebibin, Sep 24 '21 at 14:07
This link might help you https://stackoverflow.com/questions/5967564/form-inside-a-table — Arib Yousuf, Sep 24 '21 at 18:22

score 0 · Answer 1 · answered Sep 24 '21 at 19:16

you cannot have form inside <form>, you can have it inside <td> though.

eg.

var trId = 0;
foreach(var item in Model.MyData)
    {
      trId++;
      <tr>
          <td>
          @using (Ajax.BeginForm("SaveData","User",null, new AjaxOptions {HttpMethod = "POST", InsertionMode = InsertionMode.Replace}, new {id = "form1", role = "form", @class = "form-horizontal"}))
          {
            @Html.TextBoxFor(modelitem => item.Name)

            <button type="submit" title="Update" class="btn btn-primary" id="btnUpdate_@trId" onclick="return Validate(item.Name)">
              Save Data
            </button>
          }
          </td>
      </tr>
    }

Thanks Saad. But, if I apply this code, both the textbox and button will be in one . But in the table header part, we have 2 separate , one is for textbox and the second one is for the action button. So this will make some layout issues. — itzmebibin, Sep 25 '21 at 15:45

Ajax.BeginForm in MVC is working only in IE

1 Answers1