Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div id="app1"> </div>

@* React *@
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

<script type="text/babel">



    class ReactCRUD extends React.Component {

        constructor(props) {
            super(props);
            this.state = {data: [], HaveChange: "Нет"};

            this.Load = this.Load.bind(this);
            this.Save = this.Save.bind(this);

            this.OnAdd = this.OnAdd.bind(this);
            this.OnChange = this.OnChange.bind(this);
            this.OnRemove = this.OnRemove.bind(this);

            this.Load();
        }


    @*async Load(){
            let url = "/ReactCRUD/List";

            var res = await $.get(
                {
                    url: url,
                    dataType: "application/json"
                }
            );

            this.setState({data: res});
        )*@

    Load(){
        let url = "/ReactCRUD/List";

        $.get({
            url: url,
            success: function(data){
                this.setState({data: data, HaveChange: "Нет"});
            }.bind(this),
            dataType: "json"
        }
    );
    }



    Save(){
     let url = "/ReactCRUD/SaveChange";

     $.post({
        url: url,
        data: { json: JSON.stringify(this.state.data) },
        success: function(data){
            this.Load();
        }.bind(this),
        dataType: "json"
     });
    }


    OnAdd(){
        var data = this.state.data;
        data.push({ ID: -1, Name: "NewElem", State: 1 });

        this.setState({data: data, HaveChange: "Да"});
    }

    OnChange(e){
        var data = this.state.data;
        var row_id = parseInt(e.target.id);
        var elem = this.state.data[row_id];

        elem.Name = e.target.value;
        if (elem.State != 1)
            elem.State = 2;

        this.setState({data: data, HaveChange: "Да"});
    }

    OnRemove(e){
        var data = this.state.data;
        var row_id = parseInt(e.target.id);
        var elem = data[row_id];

        elem.State = 3;

        this.setState({data: data, HaveChange: "Да"});
    }

    render() {
    var data = this.state.data;@*.filter((elem) => elem['State'] != 3);*@

    return (
    <div>
        <p>Список</p>
        <p>Есть несохраненные изменения: {this.state.HaveChange}</p>

        <table class="table">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th></th>
            </tr>

            {
                data.map(function( elem, i, arr ){
                    if (elem.State != 3){
                        return [
                        <tr>
                            <td>{elem.ID}</td>
                            <td><input id={i} type="text" value={elem.Name} onChange={this.OnChange} /></td>
                            <td><button id={i} onClick={this.OnRemove}>Удалить</button></td>
                        </tr>
                        ];
                    }
                    else
                        return "";
                }.bind(this))
            }
            @*<div key={i}>{component}</div>)}*@
        </table>

        <button onClick={this.Load}>Обновить (изменения будут утеряны)</button><br />
        <button onClick={this.OnAdd}>Добавить</button><br />
        <button onClick={this.Save}>Сохранить</button><br />

    </div>
    );
    }
    }


    ReactDOM.render(
    <ReactCRUD />,
    document.getElementById("app1")
    )

</script>