Click here to Skip to main content
14,360,972 members

JavaScript

 
GeneralRe: Injecting an external page to a div using ajax. Pin
Member 1125974617-Jan-19 1:36
memberMember 1125974617-Jan-19 1:36 
QuestionCan someone help me reverse engineer this code and get it working as jQuery? Pin
Member 1411874515-Jan-19 5:14
memberMember 1411874515-Jan-19 5:14 
QuestionJavaScript Pin
Bram van Kampen11-Jan-19 14:52
memberBram van Kampen11-Jan-19 14:52 
AnswerRe: JavaScript Pin
Richard MacCutchan11-Jan-19 23:50
protectorRichard MacCutchan11-Jan-19 23:50 
AnswerRe: JavaScript Pin
Nathan Minier14-Jan-19 2:16
professionalNathan Minier14-Jan-19 2:16 
QuestionGet html element position on window scroll Pin
Vinod Jangle9-Jan-19 4:43
memberVinod Jangle9-Jan-19 4:43 
AnswerRe: Get html element position on window scroll Pin
Richard Deeming9-Jan-19 9:12
mveRichard Deeming9-Jan-19 9:12 
QuestionFailing to call the put and post Web Api methods from the react js components Pin
simpledeveloper24-Dec-18 10:55
membersimpledeveloper24-Dec-18 10:55 
I have a put method in web api as below:
[HttpPut("{id}")]
public int Edit(int id, TblEmployee employee)
{
    return objemployee.UpdateEmployee(employee);
}

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 } from 'react-router';
import { Link, NavLink } from 'react-router-dom';
import { EmployeeData } from './FetchEmployee';
interface AddEmployeeDataState {
    title: string;
    loading: boolean;
    cityList: Array<any>;
    empData: EmployeeData;
}
export class AddEmployee extends React.Component<RouteComponentProps<{}>, AddEmployeeDataState> {
    constructor(props) {
        super(props);
        this.state = { title: "", loading: true, cityList: [], empData: new EmployeeData };
        fetch('api/Employee/GetCityList')
            .then(response => response.json() as Promise<Array<any>>)
            .then(data => {
                this.setState({ cityList: data }                
                );

                console.log(data);
            });
        var empid = this.props.match.params["empid"];
        // This will set state for Edit employee  
        if (empid > 0) {
            fetch('api/Employee/Details/' + empid)
                .then(response => response.json() as Promise<EmployeeData>)
                .then(data => {
                    this.setState({ title: "Edit", loading: false, empData: data });
                });
        }
        // This will set state for Add employee  
        else {
            this.state = { title: "Create", loading: false, cityList: [], empData: new EmployeeData };
        }
        // This binding is necessary to make "this" work in the callback  
        this.handleSave = this.handleSave.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
    }
    public render() {
        let contents = this.state.loading
            ? <p>Loading...</p>
            : this.renderCreateForm(this.state.cityList);
        return <div>
            <h1>{this.state.title}</h1>
            <h3>Employee</h3>
            <hr />
            {contents}
        </div>;
    }
    // This will handle the submit form event.  
    private handleSave(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        // PUT request for Edit employee.  
        if (this.state.empData.employeeId) {
            fetch('api/Employee/Edit', {
                method: 'PUT',
                body: data,
            }).then((response) => response.json())
                .then((responseJson) => {
                    this.props.history.push("/fetchemployee");
                })
        }
        // POST request for Add employee.  
        else {
            fetch('api/Employee/Create', {
                method: 'POST',
                body: data,
            }).then((response) => response.json())
                .then((responseJson) => {
                    this.props.history.push("/fetchemployee");
                })
        }
    }
    // This will handle Cancel button click event.  
    private handleCancel(e) {
        e.preventDefault();
        this.props.history.push("/fetchemployee");
    }
    // Returns the HTML Form to the render() method.  
    private renderCreateForm(cityList: Array<any>) {
        return (
            <form onSubmit={this.handleSave} >
                <div className="form-group row" >
                    <input type="hidden" name="employeeId" value={this.state.empData.employeeId} />
                </div>
                < div className="form-group row" >
                    <label className=" control-label col-md-12" htmlFor="Name">Name</label>
                    <div className="col-md-4">
                        <input className="form-control" type="text" name="name" defaultValue={this.state.empData.name} required />
                    </div>
                </div >
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="Gender">Gender</label>
                    <div className="col-md-4">
                        <select className="form-control" data-val="true" name="gender" defaultValue={this.state.empData.gender} required>
                            <option value="">-- Select Gender --</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                </div >
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="Department" >Department</label>
                    <div className="col-md-4">
                        <input className="form-control" type="text" name="Department" defaultValue={this.state.empData.department} required />
                    </div>
                </div>
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="City">City</label>
                    <div className="col-md-4">
                        <select className="form-control" data-val="true" name="City" defaultValue={this.state.empData.city} required>
                            <option value="">-- Select City --</option>
                            {cityList.map(city =>
                                <option key={city.cityId} value={city.cityName}>{city.cityName}</option>
                            )}
                        </select>
                    </div>
                </div >
                <div className="form-group">
                    <button type="submit" className="btn btn-default">Save</button>
                    <button className="btn" onClick={this.handleCancel}>Cancel</button>
                </div >
            </form >
        )
    }
}

Basically all the Get Api methods are being called but not the put or post methods, any help would be very very helpful, thanks in advance

modified 25-Dec-18 19:04pm.

Questionget a function to countdown (from any number) to zero Pin
Member 1409810523-Dec-18 15:49
memberMember 1409810523-Dec-18 15:49 
QuestionRe: get a function to countdown (from any number) to zero Pin
Richard MacCutchan25-Dec-18 22:18
protectorRichard MacCutchan25-Dec-18 22:18 
AnswerRe: get a function to countdown (from any number) to zero Pin
Bohdan Stupak9-Jan-19 20:40
professionalBohdan Stupak9-Jan-19 20:40 
Questionhow to get a js fuction to return html opening and closing tag Pin
Member 1409810522-Dec-18 18:34
memberMember 1409810522-Dec-18 18:34 
AnswerRe: how to get a js fuction to return html opening and closing tag Pin
Richard MacCutchan23-Dec-18 0:35
protectorRichard MacCutchan23-Dec-18 0:35 
GeneralRe: how to get a js fuction to return html opening and closing tag Pin
Member 1409810523-Dec-18 15:31
memberMember 1409810523-Dec-18 15:31 
QuestionGet an html table multiple rows as a string URL for Ajax Pin
Member 1409585019-Dec-18 23:55
memberMember 1409585019-Dec-18 23:55 
AnswerRe: Get an html table multiple rows as a string URL for Ajax Pin
Afzaal Ahmad Zeeshan23-Dec-18 1:29
mveAfzaal Ahmad Zeeshan23-Dec-18 1:29 
Questiondebug shopping cart project Pin
ghazabaz13-Dec-18 16:56
memberghazabaz13-Dec-18 16:56 
Questione.target.value, switch-case operators Pin
ghazabaz6-Dec-18 20:22
memberghazabaz6-Dec-18 20:22 
QuestionRe: e.target.value, switch-case operators Pin
Richard MacCutchan7-Dec-18 0:26
protectorRichard MacCutchan7-Dec-18 0:26 
QuestionRe: e.target.value, switch-case operators Pin
ghazabaz7-Dec-18 4:47
memberghazabaz7-Dec-18 4:47 
AnswerRe: e.target.value, switch-case operators Pin
Richard MacCutchan7-Dec-18 5:29
protectorRichard MacCutchan7-Dec-18 5:29 
AnswerRe: e.target.value, switch-case operators Pin
Richard Deeming7-Dec-18 6:37
mveRichard Deeming7-Dec-18 6:37 
QuestionRe: e.target.value, switch-case operators Pin
ghazabaz7-Dec-18 7:44
memberghazabaz7-Dec-18 7:44 
AnswerRe: e.target.value, switch-case operators Pin
Richard Deeming7-Dec-18 7:51
mveRichard Deeming7-Dec-18 7:51 
AnswerRe: e.target.value, switch-case operators Pin
Richard Deeming7-Dec-18 7:54
mveRichard Deeming7-Dec-18 7:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.