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

Question

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" }))
{%>

Answer 1

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
         ))
{%>