vue+elementui+netcore混合开发
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