vue+elementui+netcore混合开发

2024-04-09 14:28:05

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、效果

码农公寓

相关文章