I am new to react. I have created a simple form with reactjs in mvc asp.net. But on execution, react components are not getting displayed in the webpage. I have shared my code below. Please let me know where I have gone wrong.
Below is the Model class for my data:
public partial class ContactsData
{
public int ContactID { get; set; }
public string Fullname { get; set; }
public string Email { get; set; }
public string Message { get; set; }
}
Below is the HomeController:
namespace ReactForm.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult SaveContactData(ContactsData contact)
{
bool status = false;
string message = "";
if(ModelState.IsValid)
{
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
dc.ContactsDatas.Add(contact);
dc.SaveChanges();
status = true;
message = "Thank you for submitting your query";
}
}
else
{
status = false;
message = "Failed! Please try again";
}
return new JsonResult { Data = new { status = status, message = message } };
}
}
}
Below is the Index.cshtml:
@{
ViewBag.Title = "Create simple form with validation in React.JS";
}
<div class="container">
<h2>Create simple form with validation in React</h2>
<div id="contactFormArea">
</div>
</div>
@* LoaderOptimization css and js library *@
@* Bootstrap css*@
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
@* jquery library*@
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
@* React library *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
@* Our react component *@
<script src="~/scripts/ContactForm.js"></script>
<style type="text/css">
.form-control.error {
border-color:red;
background-color:#FFF6F6;
}
spam.error{
color:red;
}
.servermessage{
font-size:32px;
margin-top:20px;
}
</style>
Below is the Reactjs code ContactForm.js:
//React component for input component
var MyInput = React.createClass({
//onchange event
handleChange: function (e) {
this.props.onChange(e.target.value);
var isValidField = this.isValid(e.target);
},
//validation function
isValid: function (input) {
//check required field
if (input.getAttribute('required') != null && input.value === "") {
input.classList.add('error'); //add class error
input.nextSibling.textContent = this.props.messageRequired; //show error message
return false;
}
else {
input.classList.remove('error');
input.nextSibling.textContent = "";
}
//check data type
if (input.getAttribute('type') == "email" && input.value != "") {
if (!this.validateEmail(input.value)) {
input.classList.add('error');
input.nextSibling.textContent = this.props.messageEmail;
}
else {
input.classList.remove('error');
input.nextSibling.textContent = "";
}
}
return true;
},
//email validation function
validateEmail: function (value) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(value);
},
componentDidMount: function () {
if (this.props.onComponentMounted) {
this.props.onComponentMounted(this); //register this input in the form
}
},
//render
render: function () {
var inputField;
if (this.props.type == 'textarea') {
inputField = <textarea value={this.props.value} ref={this.props.name} name={this.props.name} className='form-control' required={this.props.isrequired} onChange={this.handleChange}/>
}
else{
inputField = <input type={this.props.type} ref={this.props.name} name={this.props.name} className='form-control' required={this.props.isrequired} onChange={this.handleChange}/>
}
return (
<div className="form-group">
<lable htmlFor={this.props.htmlFor}>{this.props.lable}</label>
{inputField}
<span className="error"></span>
</div>
);
}
});
//React component for generate form
var ContactForm = React.createClass({
//get initial statement
getInitialState : function(){
return{
Fullname : '',
Email : '',
Message : '',
Fields : [],
ServerMessage : ''
}
},
// submit function
handleSubmit : function(e){
e.preventDefault();
//validate entire form here
var validForm = true;
this.state.Fields.forEach(function(field){
if(typeof field.isValid === "function"){
var validField = field.isValid(field.refs[field.props.name]);
validForm = validForm && validField;
}
});
//after validation complete post to server
if(validForm){
var d={
Fullname: this.state.Fullname,
Email : this.state.Email,
Message : this.state.Message
}
$.ajax({
type :"POST",
url : this.props.urlPost,
data: d,
success : function(data){
//will clear form here
this.setState({
Fullname : '',
Email : '',
Message: '',
ServerMessage: data.message
});
}.bind(this),
error : function(e){
console.log(e);
alert('Error! Please try again');
}
});
}
},
//handle change full name
onChangeFullname : function(value){
this.setState({
Fullname : value
});
},
//handle change email
onChangeEmail : function(value){
this.setState({
Email : value
});
},
//handle change message
onChangeMessage : function(value){
this.setState({
Message : value
});
},
//register input controls
register : function(field){
var s = this.state.Fields;
s.push(field);
this.setState({
Fields : s
});
},
//render
render : function(){
//Render form
return{
<form name="contactForm" noValidate onSubmit=[this.handleSubmit]>
<MyInput type={'text'} value={this.state.Fullname} label={'Full Name'} name={'Fullname'} htmlFor={'Fullname'} isrequired={true} onchange={this.onChangeFullname} onComponentMounted={this.register} messageRequired={'Fullname required'} />
<MyInput type={'email'} value={this.state.Email} label={'Email'} name={'Email'} htmlFor={'Email'} isrequired={false} onchange={this.onChangeEmail} onComponentMounted={this.register} messageRequired={'Invalid Email'} />
<MyInput type={'textarea'} value={this.state.Message} label={'Message'} name={'Message'} htmlFor={'Message'} isrequired={true} onchange={this.onChangeMessage} onComponentMounted={this.register} messageRequired={'Message required'} />
<button type="submit" className="btn btn-default">submit</button>
<p className="servermessage">{this.state.ServerMessage}</p>
</form>
};
}
});
//Render react component into the page
ReactDOM.render(<ContactForm urlPost="/home/SaveContactData" />, document.getElementById('contactFormArea'));
