VUE + elementui + netcore複合用途開発

1、VueController.cs

使用した偽;
使用してシステムを。
使用してSystem.Collections.Genericを。
使用してSystem.Linqのを。
使用してのSystem.Webを。
使用してSystem.Web.Mvcを。

名前空間WebApplication1.Controllers 
{ 
    パブリック クラスVueController：コントローラー
    { 
        // GET：Vueの
        公共のActionResultインデックス（）
        { 
            戻ります（ビュー）。
        } 

        公共のActionResult表（）
        { 

            戻り（ビュー）。
        } 

        公共のActionResult GetTable（）
        { 
            VARuserGenerator = 新しい偽物<ユーザー> （）
            .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。性別））
            .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。名前）
            .RuleFor（X=> x.Phone、X => x.Person.Phone）
            .RuleFor（X => x.Website、X => x.Person.Website）。

            リターン JSON（userGenerator.GenerateForever（）（テイク。100 、）JsonRequestBehavior.AllowGetを）。
        } 
    } 



    パブリック クラスユーザー
    { 
        公共 のint Idを{ 取得します。セット; }
         パブリック Bogus.DataSets.Name.Gender性別{ 得ます。セット; }
         パブリック 文字列姓{ 得ます。セット; }
        公共の 文字列とLastName { 取得します。セット; }
         パブリック 文字列メール{ 取得します。セット; }
         公共のDateTime生年月日{ 得ます。セット; }
         パブリック 文字列カンパニー{ 取得します。セット; }
         パブリック 文字列電話{ 取得します。セット; }
         パブリック 文字列のウェブサイト{ 取得します。セット; } 
    } 
}

2、_VueLayout.cshtml

<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <META HTTP-当量= " Content-Typeの"コンテンツ= " text / htmlの;のcharset = UTF-8 " /> 
    <メタのcharset = " UTF-8 " /> 
    <メタ名前= " ビューポート"コンテンツ= " 幅=装置幅、初期の規模= 1.0 " > 
    <タイトル> @ ViewBag.Title -我的ASP.NET应用程序</タイトル> 
    @ Styles.Render（" 〜/コンテンツ/ ElementUI /要素-ui.css " ）
    Scripts.Render @（"〜/スクリプト/ vue.js 」）
    @ Scripts.Render（" 〜/スクリプト/ ElementUI /要素-ui.js " ）
    Scripts.Render（@ " 〜/スクリプト/ jqueryの-3.3.1.min.js " ）
 </ HEAD> 
<BODY> 
    の<divのid = " アプリ" > 
        @RenderBody（）
     </ DIV> 
    @RenderSection（" スクリプト"、必要な：偽）
 </ BODY> 
</ HTML>

3、Table.cshtml

@ { 
    レイアウト = " 〜/ビュー/共有/ _VueLayout.cshtml " ; 
}

 <EL-テーブル：データ= " たtableData " 
          スタイル = " 幅：100％" > 
    <EL-テーブル列プロパ= " イド" 
                     ラベル = " 编号" 
                     幅 = " 50 " > 
    </ EL-テーブル列> 
    <EL-テーブルカラムプロップ= " 性別"
                     幅 = " 50 " > 
    </ EL-テーブル列> 
    <EL-テーブルカラムプロップ= " 姓" 
                     ラベル = " 姓名" 
                     幅 = " 180 " > 
        <テンプレートスロットスコープ= " 範囲" > 
            {{スコープ。 row.FirstName + "  " + scope.row.LastName}}
         </テンプレート> 
    </ EL-テーブル列> 
    <エル・テーブルのカラムの小道具= 「メール」
                     ラベル = " 邮箱" 
                     幅 = " 180 " > 
    </ EL-テーブル列> 
    <EL-テーブルカラムプロップ= " 生年月日" 
                     ラベル = " 生日" 
                     幅 = " 180 " > 
    </ EL-テーブル列> 
    <エル・テーブルのカラムの小道具= 「会社」
                     ラベル = 「公司」 > 
    </テーブル列> 
    <カラム近テーブル=「電話」
                     ラベル = 「电话」 > 
    </エル・テーブルのカラム> 
    <エル・テーブルのカラムの小道具= 「ホームページ」
                     ラベル = 「主页」 > 
    </エル・テーブルのカラム> 
</エル・テーブル> 



@sectionスクリプト
{
     <スクリプトSRC = " https://unpkg.com/axios/dist/axios.min.js " > </ SCRIPT> 
    <SCRIPT> のvar VUE = 新しいヴュー（{ 
            エル：' #app '、
            メソッド：{
        
                initData：関数（）{ 
                    VAR = この; 
                    jQuery.ajax（{ 
                        タイプ：' ゲット' 、
                        URL：" / VUE / gettable " 、
                        データ型：" JSON " 、
                        成功：{機能（データ）
                            について（VAR I = 0 ;私はdata.lengthを<;私は++ ）{ 
                                こと.tableData.push（データ[I]）; 
                            }
                            console.log（vum.datas）。
                        } 
                    }）。
                } 
            }、
            データ（）{ 
                リターン{ 
                    たtableData：[] 
                } 

            }、
            作成：関数（）{ 
                この.initData（）。
            } 
        }）。
    </ SCRIPT> 
}

4、効果

参考VUEは、前端と後端を分離：https://www.sohu.com/a/251434422_468635

VUE + elementui + netcore複合用途開発

おすすめ