React components not getting displayed on running the code in asp.net

Question

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";
}


    Create simple form with validation in React
        
        

@* LoaderOptimization css and js library *@


@* Bootstrap css*@

@* jquery library*@

@* React library *@



@* Our react component *@

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 =             }
        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'));
</code></pre>

React components not getting displayed on running the code in asp.net

Answers (1)

Related Questions