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.

Answer 1

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