How can I put data attributes within an Ajax.BeginForm?

asp.net-mvc, knockout.js

Solution

You need to use unserscore (`_`) in your attribute name and the `Ajax.BeginForm` helper (in fact all the HTML helpers replaces unserscore with dashes in the given htmlAttributes object parameters) will be automatically replace it with a dash (`-`)

new { data_bind="submit: save", @class="employeeListEditor" }

And you need use an `Ajax.BeginForm` overload which accepts htmlAttributes like this one:

<% using (Ajax.BeginForm(
          "GetCalendar", // actionName
          null, // routeValues
          new AjaxOptions { UpdateTargetId = "siteRows" }, // ajaxOptions
          new { data_bind="submit: save", @class="employeeListEditor" } // htmlAttributes
         ))
{%>

Problem

Because I am using Knockout in my view, I have set my form tag accordingly; ``` <form class="employeeListEditor" data-bind="submit: save"> ``` However when I click the submit button, I want to do a partial page refresh. So how do I set the data-bind attribute in the Ajax.BeginForm? This syntax does not work; ``` <% using (Ajax.BeginForm("GetCalendar", new AjaxOptions { UpdateTargetId = "siteRows" }, new { data-bind="submit: save", class="employeeListEditor" })) {%> ```

Original source