1、VueController.cs

using Bogus;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace WebApplication1.Controllers

{

    public class VueController : Controller

    {

        // GET: Vue

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult Table()

        {

            return View();

        }

        public ActionResult GetTable()

        {

            var userGenerator = new Faker<User>()

            .RuleFor(x => x.Id, x => x.IndexFaker + )

            .RuleFor(x => x.Gender, x => x.Person.Gender)

            .RuleFor(x => x.FirstName, (x, u) => x.Name.FirstName(u.Gender))

            .RuleFor(x => x.LastName, (x, u) => x.Name.LastName(u.Gender))

            .RuleFor(x => x.Email, (x, u) => x.Internet.Email(u.FirstName, u.LastName))

            .RuleFor(x => x.BirthDate, x => x.Person.DateOfBirth)

            .RuleFor(x => x.Company, x => x.Person.Company.Name)

            .RuleFor(x => x.Phone, x => x.Person.Phone)

            .RuleFor(x => x.Website, x => x.Person.Website);

            return Json(userGenerator.GenerateForever().Take(),JsonRequestBehavior.AllowGet);

        }

    }

    public class User

    {

        public int Id { get; set; }

        public Bogus.DataSets.Name.Gender Gender { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Email { get; set; }

        public DateTime BirthDate { get; set; }

        public string Company { get; set; }

        public string Phone { get; set; }

        public string Website { get; set; }

    }

}

2、_VueLayout.cshtml

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>

    @Styles.Render("~/Content/ElementUI/element-ui.css")

    @Scripts.Render("~/Scripts/vue.js")

    @Scripts.Render("~/Scripts/ElementUI/element-ui.js")

    @Scripts.Render("~/Scripts/jquery-3.3.1.min.js")

</head>

<body>

    <div id="app">

        @RenderBody()

    </div>

    @RenderSection("scripts", required: false)

</body>

</html>

3、Table.cshtml

@{

    Layout = "~/Views/Shared/_VueLayout.cshtml";

}

<el-table :data="tableData"

          style="width: 100%">

    <el-table-column prop="Id"

                     label="编号"

                     width="">

    </el-table-column>

    <el-table-column prop="Gender"

                     label="性别"

                     width="">

    </el-table-column>

    <el-table-column prop="FirstName"

                     label="姓名"

                     width="">

        <template slot-scope="scope">

            {{scope.row.FirstName + " " + scope.row.LastName}}

        </template>

    </el-table-column>

    <el-table-column prop="Email"

                     label="邮箱"

                     width="">

    </el-table-column>

    <el-table-column prop="BirthDate"

                     label="生日"

                     width="">

    </el-table-column>

    <el-table-column prop="Company"

                     label="公司">

    </el-table-column>

    <el-table-column prop="Phone"

                     label="电话">

    </el-table-column>

    <el-table-column prop="Website"

                     label="主页">

    </el-table-column>

</el-table>

@section scripts

{

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        var vue = new Vue({

            el: '#app',

            methods: {

                initData: function () {

                    var that = this;

                    jQuery.ajax({

                        type: 'Get',

                        url: "/vue/gettable",

                        datatype: "json",

                        success: function (data) {

                            for (var i = ; i < data.length; i++) {

                                that.tableData.push(data[i]);

                            }

                            console.log(vum.datas);

                        }

                    });

                }

            },

            data() {

                return {

                    tableData: []

                }

            },

            created: function () {

                this.initData();

            }

        });

    </script>

}

4、效果

vue前后端分离参考：https://www.sohu.com/a/251434422_468635

vue+elementui+netcore混合开发的更多相关文章

  1. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  2. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  3. spring boot + vue + element-ui全栈开发入门

    今天想弄弄element-ui  然后就在网上找了个例子 感觉还是可以用的  第一步是完成了  果断 拿过来  放到我这里这  下面直接是连接  点进去 就可以用啊 本想着不用vue   直接导入连接 ...

  4. vue与原生混合开发

    前段时间,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为中间沟通桥梁,实现了h5与安卓.iOS的混合开发,由于从事iOS开发,h5也是刚接触不久,很多深入原理还不太清楚 ...

  5. spring boot + vue + element-ui全栈开发入门——前端列表页面开发

     一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...

  6. spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框

     需求 1.点击“添加”按钮,弹出录入数据的对话框窗口,并录入数据,如果数据有误则不允许提交.数据填写完毕后,点击“保存”按钮,调用http协议提交数据,提交完毕刷新页面数据.点击“取消”按钮关闭对话 ...

  7. spring boot + vue + element-ui全栈开发入门——集成element-ui

     一.IDE开发工具 常用的开发工具有webstorm和sublime. 我个人喜好用Atom+插件的形式 打开Atom,在file --> settings --> packages中收 ...

  8. spring boot + vue + element-ui全栈开发入门——主页面开发

    目的 开发一个后台管理的前端,顶部是标题,左侧是菜单导航栏,中间是要显示的内容.而内容可以是各种图表,也可以是数据列表. 一.准备工作 1..修改App.vue文件 代码如下: <templat ...

  9. Vue/Element-ui 安装搭建开发环境（一）

    Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...

随机推荐

  1. IT兄弟连 Java语法教程 流程控制语句 控制循环结构2

    使用continue忽略本次循环剩下的语句 continue的功能和break有点类似,区别是continue只是忽略本次循环剩下的语句,接着开始下一次循环,并不会终止循环:而break则是完全终止循 ...

  2. 在.net core程序中使用EntityFrameok（非EF Core）

    最近用NoSQL较多写,用传统的EF到不多,但在一些.net core小程序中也小试牛刀过,不过当时用的是微软为.net core量身定制的Entity Framework Core,只是一些比较常规 ...

  3. abp实战-ContosoUniversity Abp版-1运行项目

    1. 去abp官网下载模板工程,当前最新版本是abp5.0,基于.net core 3.0 https://aspnetboilerplate.com/ 项目名称为ContosoAbp 这里使用的是n ...

  4. JVM内存分配策略，及垃圾回收算法

    本人免费整理了Java高级资料,一共30G,需要自己领取;传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 说起垃圾收集(Garbage Co ...

  5. centos 配置sentry+钉钉+邮件通知

    1.sentry官方推荐docker方式安装.使用docker-compose,最好是centos7 2.卸载旧版本 yum remove docker docker-common docker-se ...

  6. QML::常用属性

    Item 属性: Item 类型比较特殊,因为它是所有其他可视化类型的基类型. Qt Quick中所有可视化类型都基于 Item. Item 对象本身没有一个可视化的外观,但是它定义了可视化项目中所有 ...

  7. 移动OA办公——Smobiler第一个开源应用解决方案，快来get吧

    产品简介 SmoONE是一款移动OA类的开源解决方案,通过Smobiler平台开发,包含了注册.登陆.用户信息等基本功能.集成了OA中使用场景较多的报销.请假.部门管理.成本中心等核心功能. 免费获取 ...

  8. 程序卡在 while(SPI_I2S_GetFlagStatus(W5500_SPI, SPI_I2S_FLAG_TXE) == RESET) 处

    stm32 SPI1,发现程序卡在 while(SPI_I2S_GetFlagStatus(W5500_SPI, SPI_I2S_FLAG_TXE) == RESET); 解决方式: 1.检查RCC时 ...

  9. ABP进阶教程6 - 布局配置

    点这里进入ABP进阶教程目录 解读参数 l - length changing input control (左上,每页显示记录数) f - filtering input (右上,过滤条件) t - ...

  10. 获取oracle的建表DLL语句

    get_ddl('TABLE','表名','实例名') from dual   select dbms_metadata.get_ddl('TABLE','RMS_CITY','RMS') from ...