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. python--基础知识点梳理（一）数据类型、迭代生成装饰器、函数

    可变数据类型和不可变数据类型有哪些? # 可变数据类型:列表.字典.集合 # 不可变数据类型:数字.元祖.字符串 常见数据结构 # 栈(stack)--先进后出. 队列(queue)-先进先出.链表( ...

  2. Jenkins操作学习 --邮箱配置及测试结果构建

    前言 使用jenkins做持续集成工具,构建的整个过程中,肯定要对结果进行记录和跟踪,这里我们以qq邮箱为例,来讲解如何配置jenkins的邮箱及发送构建结果 一.明确邮箱服务器相关信息 这里我们,要 ...

  3. VS2019 MSB364 未找到框架“NETFramework,Version=v4.7”

    环境: WIN 10 VS2019 已安装框架v4.7.2 问题: 在打开一些早期项目时,编译报 MSB364 错误,未找到框架“NETFramework,Version=v4.7”或未找到框架“NE ...

  4. Annotation-specified bean name 'userDaoImpl' for bean class [***] conflicts with existing, non-compatible bean definition of same name and class [***]

    使用Spring开发的时候报错如下: Caused by: org.springframework.context.annotation.ConflictingBeanDefinitionExcept ...

  5. SmtpClient发送邮件时附件名称乱码

    在用户环境发现一个现象,使用System.Net.Mail.SmtpClient发送邮件,当附件名包含中文且长度较长时,最终的邮件里附件名会乱掉,写个简单的测试程序: var mail = new M ...

  6. querySelectorAll和getElementsByClassName获取元素的区别

    querySelectorAll()方法是HTML5新增的方法,通过传入一个css选择符,返回所有匹配的元素而不仅仅是一个元素.这个方法返回的是一个NodeList的实例.那么它和通过getEleme ...

  7. v8js-在PHP中运行javascript代码

    起因之前写自动登录操作一个网站的PHP脚本,但是发现该网站用js代码做了cookie的计算和验证,所以使用了v8js. 安装安装v8.(Mac:brew install v8)使用pecl insta ...

  8. Android 工程的创建

    还望支持个人博客站:http://www.enjoytoday.cn 本章节主要介绍如何开始Android工程的创建和android开发过程中需要的一些简单的技巧和知识.首篇文章主要介绍如何开始And ...

  9. 029.[转] SSO单点登录的通用架构实现

    单点登录的通用架构实现 pphh发布于2018年4月26日 http://www.hyhblog.cn/2018/04/26/single_sign_on_arch/ 目录 1. 什么是单点登录 2. ...

  10. BayaiM__ oracle函数_01

    BayaiM__ oracle函数_01   Oracle函数--------------------------------------------------------------------- ...