vue+elementui+netcore混合开发

vue

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 + 1)

.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(100),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="50">

</el-table-column>

<el-table-column prop="Gender"

label="性别"

width="50">

</el-table-column>

<el-table-column prop="FirstName"

label="姓名"

width="180">

<template slot-scope="scope">

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

</template>

</el-table-column>

<el-table-column prop="Email"

label="邮箱"

width="180">

</el-table-column>

<el-table-column prop="BirthDate"

label="生日"

width="180">

</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 = 0; 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混合开发 的全部内容, 来源链接: utcz.com/z/376964.html

回到顶部