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. 记录libreoffice实现office转pdf（适用于windows、linux）

    由于目前的工作跟office打交道比较多,所以才有了此篇blog,需求是实现word转换pdf方便页面展示.之前lz采用的是jacob(仅支持windows)进行转换的,但是现在服务器改成linux显 ...

  2. php date获取前一天的时间

    结果: 结论: 第二种方式只使用了一个函数,所以更快一些,速度大约是第一种的两倍

  3. 正确使用Spring Data JPA规范

    在优锐课的学习分享中探讨了关于,Spring Data JPA的创建主要是为了通过按方法名称生成查询来轻松创建查询. 但是,有时我们需要创建复杂的查询,而无法利用查询生成器.码了很多知识笔记分享给大家 ...

  4. 【shell脚本语法】判断、流程控制语句

    目录 判断用户参数 流程控制语句 一.判断用户参数 1.1 文件判断参数 PS:$?代表上一个命令的返回值,为0表示正确执行,非0表示错误执行.详情可参考我另一篇博客:https://www.cnbl ...

  5. Linux war包部署jenkins

    一.介绍Jenkins 1.Jenkins概念 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Je ...

  6. 利用zabbix监控ogg进程(Windows平台下)

    本文给大家介绍如何监控windows平台下的ogg程序.(注:所有操作都在administrator用户下面进行操作) 监控linux平台下的ogg程序请看:https://www.cnblogs.c ...

  7. MySQL（6）---变量

    MySQL(6)-变量 这里学习变量主要是为后面学习存储过程和函数做铺垫. 变量的分类 系统变量: 全局变量 会话变量 自定义变量: 用户变量 局部变量 一.系统变量 1.概述 说明:变量由系统定义, ...

  8. webpack基本使用

    webpack安装时的坑 高版本的webpack除了全局安装webpack外,还需安装webpack-cli,在本地使用时也一样需要这样,不然会出错 webpack使用是的坑 在原始启动webpack ...

  9. Windows Store可以下载安装Windows Terminal (Preview)

    Windows Terminal (Preview)已经可以在Windows Store下载安装. Windows Terminal (Preview)运行要求为: Windows 10 版本 183 ...

  10. vue-cli3和element做一个简单的登陆页面

    1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...