React with MVC data annotations and unobtrusive validation
<p>We are currently looking to experiment with modern frontend frameworks like react on an MVC4 project. We use data annotations in our models and we have a lot of forms that use unobtrusive validation on the UI.</p>
<p>The main thing is finding a way to use react to generate the content while still being able to make use of features like unobtrusive validation. As I understand it, it really is just a bunch of <code>data-val</code> attributes dynamically generated when using HTML helpers like <code>TextAreaFor</code>, <code>ValidationMessageFor</code> with the attributes getting values from the data annotations in the model classes.</p>
<p>I've tried several things including</p>
<pre><code> ReactDOM.render(
 @using (Html.BeginForm(&quot;xyz&quot;, &quot;xyz&quot;, FormMethod.Post))
 {
      @Html.TextBoxFor(x =&gt; x.Email)
</code></pre>
<p>which results in the input box not being editable for some reason.</p>
<p>I'd prefer to do something more like</p>
<pre><code> ReactDOM.render(
      &lt;form&gt;&lt;input type=&quot;text&quot; data-val=&quot;@Model.datannotations[1].val&quot; /&gt;&lt;/form&gt;
</code></pre>
<p>Is that possible? How does one get the <code>data-val</code> values from the model anyway? What is the best way to achieve this?</p>