Click here to Skip to main content
15,042,681 members

Comments by simpledeveloper (Top 9 by date)

simpledeveloper 8-Oct-19 12:41pm View
   
No I did use the same as you said, still it gives me error buddy:
C:\Users\aaleem\Desktop\DevelopedProjects\React\AQView\AQView\ClientApp>codesandbox ./
'codesandbox' is not recognized as an internal or external command,
operable program or batch file.

C:\Users\aaleem\Desktop\DevelopedProjects\React\AQView\AQView\ClientApp>codesandbox ./
'codesandbox' is not recognized as an internal or external command,
operable program or batch file.

C:\Users\aaleem\Desktop\DevelopedProjects\React\AQView\AQView\ClientApp>
simpledeveloper 7-Oct-19 13:51pm View
   
i don't know buddy, for some reason this isn't going well, this is the message I am getting after running the npm install
C:\Users\aaleem\Desktop\DevelopedProjects\React\AQView\AQView\ClientApp>npm install -g codesandbox
npm WARN deprecated datauri@1.1.0: Datauri 2.0 released. See more in https://github.com/data-uri/datauri/releases/tag/v2.0.0
npm WARN deprecated mimer@0.3.2: Mimer 1.0 released. See more in https://github.com/data-uri/mimer/releases/tag/v1.0.0
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
C:\Users\aaleem\AppData\Roaming\npm\codesandbox -> C:\Users\aaleem\AppData\Roaming\npm\node_modules\codesandbox\lib\index.js
+ codesandbox@2.1.10
updated 1 package in 18.971s


Then when I run the following script this is the error that I am getting.
C:\Users\aaleem\Desktop\DevelopedProjects\React\AQView\AQView\ClientApp>codesankbox ./
'codesankbox' is not recognized as an internal or external command,
operable program or batch file.

What is the reason buddy?
simpledeveloper 18-Sep-19 21:24pm View
   
Installing 2015 did work for me, its OK, all our packages are in 2015 so no problem. Thanks for all your help buddy
simpledeveloper 18-Sep-19 12:59pm View
   
thank you and its beautiful for people to come and help, I tried complete VS 2017 installation, it didn't work, what is the reason IDK. I will try the other solution you have provided.
simpledeveloper 25-Dec-18 23:33pm View
   
I made some progress, I was able to call the Get methods, but not able to call the Put and Post methods.
My Web Api methods are as follows, for some reason I am not able to call these Web Api methods, am I doing anything wrong these methods, please let me know:
    [Produces("application/json")]
    [Route("api/Employee")]    
    public class EmployeeController : Controller
    {
        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();

        [HttpGet("[action]")]
        //[Route("api/Employee/Index")]
        public IEnumerable<TblEmployee> Index()
        {
            return objemployee.GetAllEmployees();
        }

        [HttpPost]        
        public int Create(TblEmployee employee)
        {
            return objemployee.AddEmployee(employee);
        }

        [HttpGet("{id}")]
        //[HttpGet("{id}", Name = "Details")]
        public TblEmployee Details(int id)
        {
            return objemployee.GetEmployeeData(id);
        }
        
        [HttpPut("{id}")]
        public int Edit(int id, TblEmployee employee)
        {
            return objemployee.UpdateEmployee(employee);
        }

        [HttpDelete("{id}")]
        public int Delete(int id)
        {
            return objemployee.DeleteEmployee(id);
        }

        [HttpGet("[action]")]
        public IEnumerable<TblCities> GetCityList()
        {
            return objemployee.GetCities();
        }
    }

I am trying to call this method using reactjs component, I am not able to call this method, can you please help me where am I making mistake
Here is my Table rendering component:
    private renderEmployeeTable(empList: EmployeeData[]) {
        return <table className='table'>
            <thead>
                <tr>
                    <th></th>
                    <th>EmployeeId</th>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Department</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                {empList.map(emp =>
                    <tr key={emp.employeeId}>
                        <td></td>
                        <td>{emp.employeeId}</td>
                        <td>{emp.name}</td>
                        <td>{emp.gender}</td>
                        <td>{emp.department}</td>
                        <td>{emp.city}</td>
                        <td>
                            <a className="action" onClick={(id) => this.handleEdit(emp.employeeId)}>Edit</a>  |
                            <a className="action" onClick={(id) => this.handleDelete(emp.employeeId)}>Delete</a>
                        </td>
                    </tr>
                )}
            </tbody>
        </table>;
    }

Now I am calling it as below the Edit method as below
    private handleEdit(id: number) {       
        this.props.history.push("api/employee/edit/" + id);
    }

And I have Delete Web Api method that's not being called too from the above ts script file
        [HttpDelete("{id}")]
        public int Delete(int id)
        {
            return objemployee.DeleteEmployee(id);
        }

And I have Create method which is supposed to be called by ts file at the time of save button click that's not being called as well:
 [HttpPost]        
        public int Create(TblEmployee employee)
        {
            return objemployee.AddEmployee(employee);
        }

The ts script for the create call is as below on the save button click:
import * as React from 'react';
import { RouteComponentProps
simpledeveloper 23-Dec-18 17:01pm View
   
Deleted
I made some progress, I was able to call the Get methods, but not able to call the Put and Post methods.
My Web Api methods are as follows, for some reason I am not able to call these Web Api methods, am I doing anything wrong these methods, please let me know:
    [Produces("application/json")]
    [Route("api/Employee")]    
    public class EmployeeController : Controller
    {
        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();

        [HttpGet("[action]")]
        //[Route("api/Employee/Index")]
        public IEnumerable<TblEmployee> Index()
        {
            return objemployee.GetAllEmployees();
        }

        [HttpPost]        
        public int Create(TblEmployee employee)
        {
            return objemployee.AddEmployee(employee);
        }

        [HttpGet("{id}")]
        //[HttpGet("{id}", Name = "Details")]
        public TblEmployee Details(int id)
        {
            return objemployee.GetEmployeeData(id);
        }
        
        [HttpPut("{id}")]
        public int Edit(int id, TblEmployee employee)
        {
            return objemployee.UpdateEmployee(employee);
        }

        [HttpDelete("{id}")]
        public int Delete(int id)
        {
            return objemployee.DeleteEmployee(id);
        }

        [HttpGet("[action]")]
        public IEnumerable<TblCities> GetCityList()
        {
            return objemployee.GetCities();
        }
    }

I am trying to call this method using reactjs component, I am not able to call this method, can you please help me where am I making mistake
Here is my Table rendering component:
    private renderEmployeeTable(empList: EmployeeData[]) {
        return <table className='table'>
            <thead>
                <tr>
                    <th></th>
                    <th>EmployeeId</th>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Department</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                {empList.map(emp =>
                    <tr key={emp.employeeId}>
                        <td></td>
                        <td>{emp.employeeId}</td>
                        <td>{emp.name}</td>
                        <td>{emp.gender}</td>
                        <td>{emp.department}</td>
                        <td>{emp.city}</td>
                        <td>
                            <a className="action" onClick={(id) => this.handleEdit(emp.employeeId)}>Edit</a>  |
                            <a className="action" onClick={(id) => this.handleDelete(emp.employeeId)}>Delete</a>
                        </td>
                    </tr>
                )}
            </tbody>
        </table>;
    }

Now I am calling it as below the Edit method as below
    private handleEdit(id: number) {       
        this.props.history.push("api/employee/edit/" + id);
    }

And I have Delete Web Api method that's not being called too from the above ts script file
        [HttpDelete("{id}")]
        public int Delete(int id)
        {
            return objemployee.DeleteEmployee(id);
        }

And I have Create method which is supposed to be called by ts file at the time of save button click that's not being called as well:
 [HttpPost]        
        public int Create(TblEmployee employee)
        {
            return objemployee.AddEmployee(employee);
        }

The ts script for the create call is as below on the save button click:
import * as React from 'react';
import { RouteComponentProps
simpledeveloper 21-Dec-18 21:20pm View
   
Deleted
No actually I have installed them all, its not giving me any error message but its saying its not able to find the jsx file, do I need to remove anything from the Layout page or any other Page? What is RenderBody function doing, is it responsible for my page loading the jQuery instead of the jsx files, any help my friend, I don't know that's what making it more complex to learn the errors aren't properly shown, we don't even know what's going wrong, everybody is writing articles about just react but I need that whole application end to end communication from ASP.Net either MVC or MVVM to React components like we do in Projects.
Any help my friend - please, I can learn, if the tool is ready to tell me what I can do what am I missing. Please.
simpledeveloper 21-Dec-18 1:47am View
   
Hi,

I have the following code in the Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - App1</title>
    <base href="~/" />

    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
    <environment exclude="Development">
        <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
    </environment>
</head>
<body>
    @RenderBody()

    <script src="~/dist/vendor.js" asp-append-version="true"></script>
    @RenderSection("scripts", required: false)
</body>
</html>


Can you please let me know what can I remove from the Layout.cshtml, I am very new to the JavaScript libraries World, I tried to comment out all the tag section and ran the application still not able to see any hello message or anything related to react code that I have written, can you please let me know why should I remove it also? Thank you so much my friend - I thought I wouldn't get any answer at all. Thank you so much again.
simpledeveloper 21-Dec-18 1:47am View
   
Hi,

I have the following code in the Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - App1</title>
    <base href="~/" />

    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
    <environment exclude="Development">
        <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
    </environment>
</head>
<body>
    @RenderBody()

    <script src="~/dist/vendor.js" asp-append-version="true"></script>
    @RenderSection("scripts", required: false)
</body>
</html>


Can you please let me know what can I remove from the Layout.cshtml, I am very new to the JavaScript libraries World, I tried to comment out all the tag section and ran the application still not able to see any hello message or anything related to react code that I have written, can you please let me know why should I remove it also? Thank you so much my friend - I thought I wouldn't get any answer at all. Thank you so much again.