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()
            .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

    "Content-Type" content="text/html; charset=utf-8" />
    "utf-8" />
    "viewport" content="width=device-width, initial-scale=1.0">
    
    @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")


    
"app">
        @RenderBody()
    

    @RenderSection("scripts", required: false)

3、Table.cshtml

@{
    Layout = "~/Views/Shared/_VueLayout.cshtml";
}

"tableData"
          style="width: 100%">
    "Id"
                     label="编号"
                     width="50">
    
    "Gender"
                     label="性别"
                     width="50">
    
    "FirstName"
                     label="姓名"
                     width="180">
        
    
    "Email"
                     label="邮箱"
                     width="180">
    
    "BirthDate"
                     label="生日"
                     width="180">
    
    "Company"
                     label="公司">
    
    "Phone"
                     label="电话">
    
    "Website"
                     label="主页">
    




@section scripts
{
    
    
}

4、效果

 vue前后端分离参考：https://www.sohu.com/a/251434422_468635

转载于:https://www.cnblogs.com/huangzelin/p/11518581.html