ASP.NET Zero--10.一個例子(3)商品分類管理-新建

来源:http://www.cnblogs.com/shensigzs/archive/2017/01/16/6288785.html
-Advertisement-
Play Games

1.打開Index視圖 頁面中添加一個按鈕,代碼如下: <div class="row margin-bottom-5"> <div class="col-xs-6"> <div class="page-head"> <div class="page-title"> <h1> <span>分類</s ...


1.打開Index視圖

頁面中添加一個按鈕,代碼如下:
<div class="row margin-bottom-5">
    <div class="col-xs-6">
        <div class="page-head">
            <div class="page-title">
                <h1>
                    <span>分類</span> <small>@L("CategoryManager")</small>
                </h1>
            </div>
        </div>
    </div>
    @*這裡是添加的按鈕代碼*@
    <div class="col-xs-6 text-right">
        <button id="CreateNewCategoryButton" class="btn btn-primary blue"><i class="fa fa-plus"></i>添加分類</button>
    </div>
</div>
效果如下:   點擊按鈕會彈出一個模態框進行分類添加  

2.模態框創建

在Category目錄下新建一個視圖_CreateModal.cshtml,代碼如下:
@using MyCompanyName.AbpZeroTemplate.Web.Areas.Mpa.Models.Common.Modals

@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("添加分類"))
<div class="modal-body">
    <form name="CategoryForm">
        <div class="form-group form-md-line-input form-md-floating-label">
            <input class="form-control" type="text" name="Name">
            <label>名稱</label>
        </div>
    </form>
</div>
@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")

 

同樣再新建一個js文件_CreateModal.js,代碼如下:
(function ($) {

    app.modals.CreateCategoryModal = function () {
        var _categoryService = abp.services.app.category;
        var _$categoryForm = null;

        var _modalManager;
        this.init = function (modalManager) {
            _modalManager = modalManager;
            //取出Form表單
            _$categoryForm = _modalManager.getModal().find('form[name=CategoryForm]');
            };

        this.save = function () {
            //序列化參數
            var category = _$categoryForm.serializeFormToObject();
            _modalManager.setBusy(true);
            _categoryService.createCategory(
                category
            ).done(function () {
                abp.notify.info(app.localize('SavedSuccessfully'));
                _modalManager.close();
                abp.event.trigger('app.createCategoryModalSaved');
            }).always(function () {
                _modalManager.setBusy(false);
            });
        };
    };
})(jQuery);

 

3.添加新建方法

打開ICategoryAppService文件,添加如下代碼:
void CreateCategory(CreateCategoryInput input);

 

對應的實現類CategoryAppService,添加如下代碼:
public void CreateCategory(CreateCategoryInput input)
{
       _categoryRepository.Insert(new Category()
       {
           Name = input.Name
       });
}

 

4.添加Dto

在Dto目錄下新建一個類CreateCategoryInput.cs,代碼如下:
public class CreateCategoryInput:EntityDto,IInputDto
    {
        public string Name { get; set; }
    }

 

5.修改Index.js

最後打開Index.js,添加代碼如下:
...
var _categoryService = abp.services.app.category;

        var _createModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Mpa/Category/CreateModal',//載入視圖
            scriptUrl: abp.appPath + 'Areas/Mpa/Views/Category/_CreateModal.js',//載入對應js
            modalClass: 'CreateCategoryModal'
        });
...
//頁面載入完執行
        getCategories();

        //添加點擊事件
        $('#CreateNewCategoryButton').click(function () {
            _createModal.open();
        });

        //事件註冊
        abp.event.on('app.createCategoryModalSaved', function () {
            getCategories(true);
        });

 

6.控制器

打開CategoryController,添加如下代碼:
public ActionResult CreateModal()
{
      return PartialView("_CreateModal");
}

 

最後,重新生成項目,刷新頁面,點擊添加分類
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 當源類型與目標類型不是基元類型時CLR便不能自己進行編譯轉換。 下例為Rational(有理數類型)與string,int的轉化。 轉換操作符是將對象從一個類型轉化成另一個類型的方法。可以使用特殊語法來定義裝換操作符方法。 CLR要求轉換操作符的重載方法必須是public 和static方法。c#要 ...
  • 轉載自: http://blog.csdn.net/xmxkf/article/details/51454685 本文出自:【openXu的博客】 ...
  • 單元測試的核心就是:只測試眼前的邏輯。這就要求所有的依賴項都要使用仿類來代替,也就是所謂的 Mock Object。在測試 和 的時候,我遇到了需要對 和 進行 Mock 的需求。因為這兩個組件相互依賴,還依賴別的組件,我折騰了好一陣才搞定這個問題。具體的方法分兩種:直接使用 Moq 進行 Mock ...
  • 在頁面想webApi post json數據的時候,發現webapi不能直接以json的方式接受數據(註:我是沒有發現一個很好的方式來post json數據的);但是可以以數據結構的方式傳遞; 如下: 1 public class Diff 2 { 3 public string Id { set; ...
  • 預設MVC的 View頁面 不參與編譯,當更改view對應model後,view編譯也能通過,或者頁面有錯誤的服務端代碼時也不會報錯。 那麼如何在編譯的時候能讓View中的錯誤也不能通過呢。經過查找找到了方法,本機MVC5.0 適用,其他版本未試。 方法: 一、修改 .csproj 工程文件,用tx ...
  • 1.添加編輯按鈕 打開文件Index.js 【..\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\Category\Index.js】 在actions中添加如下代碼: actions: { title: app.localize('Action ...
  • 今天我們來講一下原型模式。老樣子,我們先舉一個案例: 一、案例 我們找工作,需要投簡歷,一份簡歷是不夠的,我們需要多複製幾分簡歷。 好,我們用簡單的控制台程式來完成上述的需求。 二、演繹 1、第一步演繹 客戶端調用: OK,我們實現了上述的功能,搞了三份簡歷出來。我們可以通過複製粘貼,複製更多分簡歷 ...
  • 雖然已經可以添加商品分類,但還需進行優化,比如:用戶是否輸入、輸入字元串是否有格式限制等等。 打開添加分類按鈕,名稱不輸入任何字元,直接保存,會發現列表添加一條空記錄。在實際項目中,這是不允許出現的事情,我必須對分類名稱進行必填限制,但用戶沒填寫時,給予提示信息。 數據驗證就涉及客戶端和服務端,建議 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...