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. java（二）变量

    基础数据类型: 数值型:整型(byte.short.int.long).浮点型(float.double)java各整数类型有固定的表数范围和字段长度,不受具体os的影响,以保持java的可移植性:j ...

  2. ubuntu 16.04 + eigen3 安装（解决 fatal error: Eigen/Core: No such file or directory）

    1．安装 sudo apt-get install libeigen3-dev 2. 解决 fatal error: Eigen/Core: No such file or directory 当调用 ...

  3. 前端 用http-server启动本地服务器

    附:http-server详细介绍,包括参数等:  https://www.npmjs.com/package/http-server 开始: 准备node.js环境: 在我的博文“  Vue.js学 ...

  4. 使用openpyxl模块进行封装，高效处理excel测试数据

    from openpyxl import load_workbook from scripts.handle_config import conf from scripts.constants imp ...

  5. VS中常用C#代码段快速输入总结

    转自:https://blog.csdn.net/a980433875/article/details/12231673 Visual Studio 中有很多代码段都可以直接简写然后按TAB快速输入编 ...

  6. C# Newtonsoft.Json 读取文件，返回json字符串

    第一种方法: public object getData2() { string content; using (StreamReader sr = new StreamReader(Server.M ...

  7. LinuxShell脚本——选择结构

    LinuxShell脚本——选择结构 摘要:本文主要学习了Shell脚本中的选择结构. if-else语句 基本语法 最简单的用法就是只使用if语句,它的语法格式为: if 条件 then 命令 fi ...

  8. 利用InsertStatusValueRequest消息为新增的statuscode设定指定值(Value)

    我是微软Dynamcis 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  9. Microsoft Office自制安装指南 —Nusen_Liu

    Microsoft Word 2010 正版下载安装步骤 版权来自:Nusen_Liu 1.   解压文件(推荐解压到当前文件夹,大神也可以自定义的)下载地址在第16步 (*^__^*) 2.   解 ...

  10. swif(六)swift闭包

    // // main.swift // LessonSwiftSix // // Created by keyan on 15/9/13. // Copyright (c) 2015年 keyan. ...