话不多说,直接上代码,有哪些细节不会的问题可以直接问我,我会尽我所能回答
添加页面:
@{ ViewData["Title"] = "Add"; } <h1>添加页面</h1> <html lang="en"> <head> <meta charset="UTF-8"> <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script> <script src="~/layui-v2.5.6/layui/layui.js"></script> <link href="~/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" /> </head> <body> <div id="cun"></div> <script type="text/babel"> //type="text/babel" class CrudComponent extends React.Component{ constructor(props){ super(props) this.state={ list:[] } } addUser(){ const insertUser = "http://localhost:58646/api/Qx/AddLog?username=" + this.username.value fetch(insertUser,{method:"post"}) .then(response=>response.json()) .then(data=>{ console.log(data) if (data>0) { alert("添加成功"); window.location.href = "http://localhost:62817/Ajax/Index"; } }) } render(){ return ( <div> <fieldset className="layui-elem-field"> <legend>Add User</legend> <div className="layui-field-box"> <div className="layui-row layui-col-space2"> <div className="layui-col-md1"> <input type="text" id="username" name="username" required lay-verify="required" placeholder="操作人" className="layui-input" ref={username => this.username = username} /> </div> <hr className="layui-bg-green" /> <div className="layui-col-md1"> <button id="btn2" className="layui-btn" onClick={this.addUser.bind(this)}> <i className="layui-icon"></i>添加 </button> </div> </div> </div> </fieldset> </div> ) } } ReactDOM.render( <CrudComponent />,document.getElementById("cun")) </script> </body> </html>
显示页面:
@{ ViewData["Title"] = "Index"; } <h2>自己敲的ajax</h2> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React 实例</title> <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //type="text/babel" class UserGist extends React.Component { constructor(props) { super(props); //在state设置两个属性，以便后续通过state对象来对其进行修改 this.state = {List:[]}; //绑定挂载事件 this.componentDidMount = this.componentDidMount.bind(this); } componentDidMount() { //接下来操作state时上下文对象发生改变，此处拿到操作句柄 var that = this; //ajax请求 this.serverRequest = $.ajax({ url: this.props.source, type:"GET", dataType:'json', success: function (result) { console.log(result); var lastGist = result; //此处的上下文发生改变，this的指针指向发生了变化，通过上述定义的that来操作 that.setState({ List: result, }) } }) } DelUser(index) { const insertUser = "http://localhost:58646/api/Qx/DelLog?id=" +index fetch(insertUser, { method: "post" } ) .then(response => response.json()) .then(data => { console.log(data) this.setState({ List: this.state.List }) if (data > 0) { alert("删除成功"); window.location.href = "http://localhost:62817/Ajax/Index"; } }) } //卸载React组件时，把多余请求关闭，以免影响其他框架或组件的操作 componentWillUnmount() { this.serverRequest.abort(); } //添加按钮跳转事件 AddReact() { window.location.href = "http://localhost:62817/Ajax/Add"; } //修改按钮点击跳转事件 UptUser(id){ window.location.href = "http://localhost:62817/Ajax/Upt?id="+id; } //查询按钮点击事件 CxReact() { const insertUser = "http://localhost:58646/api/Qx/CxLog?name=" +this.name.value fetch(insertUser, { method: "post" } ) .then(response => response.json()) .then(data => { console.log(data) this.setState({ List: data }) //if (data > 0) { // window.location.href = "http://localhost:62817/Ajax/Index"; //} }) } render() { return ( <div> <button onClick={this.AddReact.bind(this)}> 添加 </button> 操作人名称是: <input type="text" id="name" name="name" ref={name => this.name = name} /> <button onClick={this.CxReact.bind(this)}> 查询 </button> <table className="table table-bordered"> <thead> <tr> <td>主键Id</td> <td>操作人</td> <td>操作状态</td> <td>操作时间</td> <td>操作</td> </tr> </thead> <tbody> { this.state.List.map((item,index) => { return ( <tr key={index}> <td>{item.lId}</td> <td>{item.userName}</td> <td>{item.state}</td> <td>{item.time}</td> <td><button onClick={this.DelUser.bind(this,item.lId)}>删除</button><button onClick={this.UptUser.bind(this,item.lId)}>修改</button></td> </tr> ) } ) } </tbody> </table> @*{this.state.date[0].userName} 用户最新的 Gist 共享地址： <a href={this.state.lastGistUrl} rel="nofollow">{this.state.lastGistUrl}</a>*@ </div> ); } } ReactDOM.render( <UserGist source="http://localhost:58646/api/Qx/LogShow" />, document.getElementById('example') ); </script> </body> </html>
修改页面:
@{ ViewData["Title"] = "Upt"; } <h1>修改页面</h1> <html lang="en"> <head> <meta charset="UTF-8"> <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script> <script src="~/layui-v2.5.6/layui/layui.js"></script> <link href="~/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" /> </head> <body> <div id="cun"></div> <script type="text/babel"> //type="text/babel" class CrudComponent extends React.Component{ constructor(props){ super(props) this.state={ list:[] } } //反填 componentDidMount() { //接下来操作state时上下文对象发生改变，此处拿到操作句柄 var that = this; //ajax请求 this.serverRequest = $.ajax({ url: this.props.source+"?id="+@ViewBag.userid, type:"post", dataType:'json', success: function (result) { console.log(result); var lastGist = result; $("#username").val(result.userName); //此处的上下文发生改变，this的指针指向发生了变化，通过上述定义的that来操作 that.setState({ list: result, }) } }) } UptUser(){ const insertUser = "http://localhost:58646/api/Qx/XgLog?username=" + this.username.value+"&LId="+@ViewBag.userid fetch(insertUser,{method:"post"}) .then(response=>response.json()) .then(data=>{ console.log(data) if (data>0) { alert("修改成功"); window.location.href = "http://localhost:62817/Ajax/Index"; } }) } render(){ return ( <div> <fieldset className="layui-elem-field"> <legend>Add User</legend> <div className="layui-field-box"> <div className="layui-row layui-col-space2"> <div className="layui-col-md1"> <input type="text" id="username" name="username" required lay-verify="required" placeholder="操作人" className="layui-input" ref={username => this.username = username} /> </div> <hr className="layui-bg-green" /> <div className="layui-col-md1"> <button id="btn2" className="layui-btn" onClick={this.UptUser.bind(this)}> <i className="layui-icon"></i>修改 </button> </div> </div> </div> </fieldset> </div> ) } } ReactDOM.render( <CrudComponent source="http://localhost:58646/api/Qx/FtLog" />,document.getElementById("cun")) </script> </body> </html>
后端接口:
//添加 [HttpPost] public int AddLog(Log m) { //LogHelper log = new LogHelper(); //Log model = new Log(); string sql = $"insert into Log values('{m.UserName}',2,1,'{DateTime.Now }')"; return dbhelper.ExecuteNonQuery(sql); } //删除 [HttpPost] public int DelLog(int id) { //LogHelper log = new LogHelper(); //Log model = new Log(); string sql = $"delete from Log where LId={id}"; return dbhelper.ExecuteNonQuery(sql); } //日志显示的方法 [HttpGet] public List<Log> LogShow() { return db.Log.ToList(); } //反填 [HttpPost] public Log FtLog(int id) { string sql = $"select * from Log where LId={id}"; return dbhelper.GetToList<Log>(sql)[0]; } //修改 [HttpPost] public int XgLog(Log model) { string sql = $"Update Log set UserName='{model.UserName}' where LId={model.LId}"; return dbhelper.ExecuteNonQuery(sql); } //查询日志 [HttpPost] public List<Log> CxLog(string name) { string sql = $"select * from Log "; if (name!="") { sql += $"where UserName like '%{name}%'"; } else { sql += "where 1=1"; } return dbhelper.GetToList<Log>(sql); }