Vue表格绑定数据、添加数据

数据库字段

Id （主键 自增）
Name （nvchar 200）
Remark（nvchar 200）

视图

<div id="upp">
        <div>
            <label>编号</label>
            <input type="text" id="id" v-model="role.Id" />
        </div>

        <div>
            <label>名称</label>
            <input type="text" id="name" v-model="role.Name" />
        </div>
        
        <div>
            <label>备注</label>
            <input type="text" id="remark" v-model="role.Remark" />
        </div>

        <div>
            <input type="button" onclick="Get()" value="获取一个数据" />       

            <input type="button" onclick="Select()" value="查询" />
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in items">
                    <td>{{ item.Id }}</td>           /*绑定数据*/
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Remark }}</td>
                </tr>
            </tbody>
        </table>
    </div>

@section scripts{
    <script type="text/javascript">
        var v = new Vue({        //创建一个vue示例
            el: "#upp",          //表示该vue实例挂载到 <div id="upp">...</div>
            data: {
                "role": { "Id": 1, "Name": "管理员", "Remark": "权利很大"},
                "items": [
                    { "Id": 1, "Name": "管理员", "Remark":"权利很大"}
                ]
            }
        })

        //添加
        function Add() {
            $.ajax({                                //定义一个AJax
                url: "/Role/Add",                   //链接地址
                type: "get",                        //传值方式
                dataType: "json",                   //值的格式
                data: v.role,                       //把值传递到控制器去
                success: function (r) {             //接收控制器传过来的值（r）
                    if (r.c == 0) {
                        $("#name").val("");
                        $("#remark").val("");
                    }
                }

            })

        }

        //获取一数据
        function Get() {

            var id = $("#id").val();
            $.ajax({
                url: "/Role/Get",
                type: "get",
                dataType: "json",
                data: { "id": id },
                success: function (r) {
                    v.role = r;             //把获去到的值 给model
                }

            })          
        }

        //查询
        function Select() {
            $.ajax({
                url: "/Role/Select",
                type: "get",
                dataType: "json",
                success: function (r) {
                    v.items = r;            //把获去到的值 给model
                }
            })           
        }

    </script>
    }

视图

RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index()
        {
            return View();
        }

        //查询
        public ActionResult Select()
        {
            var role = db.Roles .ToList();
            return Json(role, JsonRequestBehavior.AllowGet);
        }
        //获取一条数据
        public ActionResult Get(int? id)
        {
            var role = db.Roles.Find(id);
            return Json(role, JsonRequestBehavior.AllowGet);
        }

        //添加
        public ActionResult Add(Role role)
        {
            var mes = "新增错误";
            var code = 1;
            db.Roles.Add(role);
            if (db.SaveChanges() > 0)
            {
                mes = "成功";
                    code = 0;
            }
            var res = new
            {
                m = mes,
                c = code

            };

            return Json(res, JsonRequestBehavior.AllowGet);

        }