数据库字段

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({                                //定义一个AJaxurl: "/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: Rolepublic 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);}

Vue表格绑定数据、添加数据相关推荐

Vue表格中，对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
vue 数组指定位置添加数据_VUE 响应式原理源码：带你一步精通 VUE | 原力计划...
作者 | 爱编程的小和尚责编 | 王晓曼出品 | CSDN博客学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...
vue向list中添加数据_vue点击添加数据 - osc_sjg81se7的个人空间 - OSCHINA - 中文开源技术交流社区...
通过v-model来实现数据的添加,以后会有更好的办法. 首先,写三个input 文本域,然后通过v-model 双向绑定data 里面的prop 对象里面对应的字段,里面的字段都给空字符串,因为一开 ...
SQL Server 2014 更新数据(添加数据、修改数据、删除数据、like)
文章目录 1.理解 2.添加数据 2.修改数据 3.删除数据 5.like 1.理解 1.1 展开"数据库",打开对应的数据库,然后再展开"表",右击需要操作的 ...
vue父子组件搭配(添加数据和删除)
<template><div><Shijian :addTodo="addTodo" /> ...
excel表格末尾添加一行_Excel表格制作在添加数据之后可以自动更新的汇总表
在Excel表格中数据的汇总是我们经常遇到的问题:如果只是汇总已有的数据可以通过简单的数据透视表快速的汇总数据,但是数据实时更新和增加继续用数据透视表来做就需要更新一次数据刷新一次数据透视表.今天就为 ...
vue双向绑定时添加.sync不起作用的原因
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my- ...
【EXCEL】给数据添加图表（数据条、柱状图、折线图等），快速分析功能图文详解
目录 0.环境 1.背景+简介 2.具体实现 2.1 给数据添加数据条实现效果: 具体操作: 2.2 给数据添加柱状图图表实现效果: 具体操作: 2.3 给数据添加迷你图(在表格中的折线图) 实现 ...
mysql删除新添加数据,MySQL添加、更新与删除数据
添加.更新与删除数据添加数据为表中所有字段添加数据 INSERT INTO 表名(字段名1,字段名2,--) VALUES(值1,值2,--); insert into 表名 values(值1, ...

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

数据库字段

视图

视图

Vue表格绑定数据、添加数据相关推荐

最新文章

热门文章