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. }
  11. }
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