React with MVC data annotations and unobtrusive validation

Question

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.

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 data-val attributes dynamically generated when using HTML helpers like TextAreaFor, ValidationMessageFor with the attributes getting values from the data annotations in the model classes.

I've tried several things including

 ReactDOM.render(
 @using (Html.BeginForm("xyz", "xyz", FormMethod.Post))
 {
      @Html.TextBoxFor(x => x.Email)

which results in the input box not being editable for some reason.

I'd prefer to do something more like

 ReactDOM.render(
      <form><input type="text" data-val="@Model.datannotations[1].val" /></form>

Is that possible? How does one get the data-val values from the model anyway? What is the best way to achieve this?

Answer 1

it should not be possible.

These are two differents ways to delvelop the ui. The razor way is preprocessing the markup code in server side to fill it.

And react works in another flow using the lifecycle methods, you should have already loaded the data-anotations values for accessing it on render.

Therefore, to make this works you have to run razor engine first to fill the markup and next using react engine. I don't recommend use this approach because it's too hard to develop on it and the developers team have to keep that flow in mind while they are developing

Note this

ReactDOM.render(<ComponentMustHaveJSX/>)