Bind Data To Table Using ReactJS And MVC

Step 1

Create an asp.net MVC Application.

Step 2

Create a table and stored procedure.
  • Create a table.
    1. Create Table Country(CountryID int Primary key identity(5001,1),CountryName varchar(50))  
  • Insert data into the table.
    1. insert Country(CountryName)values('INDIA'),('USA'),('UK'),('IRAN'),('JAPAN')  
  • Create procedure.
    1. Create Procedure SP_GetCountry  
    2. as  
    3. begin  
    4. select * from Country  
    5. end  
Step 3

Add DataAccessLogic in models folder.

Create a class Country.
  1. public class Country  
  2. {  
  3.     public int CountryID {  
  4.         get;  
  5.         set;  
  6.     }  
  7.     public string CountryName {  
  8.         get;  
  9.         set;  
  10.     }  
  11. }  
Create a method GetCountry.
  1. public List < Country > GetCountry() {  
  2.     DataSet ds = new DataSet();  
  3.     using(SqlConnection con = new SqlConnection(strCon)) {  
  4.         using(SqlCommand cmd = new SqlCommand("SP_GetCountry", con)) {  
  5.             using(SqlDataAdapter da = new SqlDataAdapter(cmd)) {  
  6.                 da.Fill(ds);  
  7.             }  
  8.         }  
  9.     }  
  10.     List < Country > countries = new List < Country > ();  
  11.     for (int i = 0; i < ds.Tables[0].Rows.Count; i++) {  
  12.         Country country = new Country();  
  13.         country.CountryID = Convert.ToInt32(ds.Tables[0].Rows[i][0]);  
  14.         country.CountryName = ds.Tables[0].Rows[i][1].ToString();  
  15.         countries;.Add(country);  
  16.         country = null;  
  17.     }  
  18.     return countries;  
  19. }  
Step 4

Create a Controller.
  1. public class HomeController: Controller {  
  2.     ClientDataService1 sc = new ClientDataService1();  
  3.     // GET: Home  
  4.     public ActionResult Index() {  
  5.         return View();  
  6.     }  
  7.     public JsonResult GetName() {  
  8.         List < Country > Country = sc.GetCountrt();  
  9.         return Json(Country, JsonRequestBehavior.AllowGet);  
  10.     }  
Step 5

Add a JSX file.
  1. var TableExample = React.createClass({  
  2.             getInitialState: function() {  
  3.                 return {  
  4.                     Country: []  
  5.                 };  
  6.             },  
  7.             componentDidMount: function() {  
  8.                 $.ajax({  
  9.                     url: this.props.url,  
  10.                     dataType: 'json',  
  11.                     success: function(data) {  
  12.                         this.setState({  
  13.                             Country: data  
  14.                         });  
  15.                     }.bind(this),  
  16.                     error: function(xhr, status, err) {  
  17.                         console.error(this.props.url, status, err.toString());  
  18.                     }.bind(this)  
  19.                 });  
  20.             },  
  21.             render: function() {  
  22.                 return ( < table > {  
  23.                         this.state.Country.map(function(item, key) {  
  24.                                 return ( < tr key = {  
  25.                                         key  
  26.                                     } > < td > {  
  27.                                         item.CountryID  
  28.                                     } < /td> < td > & nbsp; < /td> < td > {  
  29.                                         item.CountryName  
  30.                                     } < /td> < /tr>)  
  31.                                 })  
  32.                         } < /table>);  
  33.                 }  
  34.             }); ReactDOM.render( < TableExample url = "/Home/GetName" / > , document.getElementById('container'));  
Step 6

Add a view, drag and drop all JS, JSX files.
  1. <div id="container"></div>  
  2. <script src="~/Scripts/react/react.js"></script>  
  3. <script src="~/Scripts/react/react-dom.js"></script>  
  4. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  5. <script src="~/Scripts/JSX/Country.jsx"></script>   
Output
 
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now