ABP教程-對Person資訊進行操作

角落的白板報發表於2016-08-18

這一章的功能比較簡單。下面開始

修改檢視

對person的檢視檔案進行修改

<div class="row">
        <div class="col-md-12">
            <button data-toggle="modal" data-target="#PersonCreateModal" class="btn btn-primary pull-right">
                <i class="fa fa-plus"></i> @L("CreatePerson")</button>
            <table class="table">
                <thead>
                <tr>
                    <th>操作</th>
                    <th>@L("Name")</th>
                    <th>@L("EmailAddress")</th>
                    <th>@L("CreationTime")</th>
                </tr>
                </thead>
                <tbody>
                @foreach (var person in Model.Items)
                {
                    <tr>
                        <td><a href="javascript:void()" data-toggle="modal" data-target="#PersonCreateModal"  onclick="editPerson(@person.Id);" >編輯</a>| <a  href="javascript:void()" onclick="deletePerson(@person.Id);"> 刪除</a></td>
                        <td>@person.Name </td>
                        <td>@person.EmailAddress</td>
                        <td>@person.CreationTime</td>
                    </tr>
                }
                </tbody>
            </table>


        </div>


    </div>

然後在頁面下方彈出層的位置新增一個隱藏域

<input   type="hidden"   name="Id" >

然後檢視頁面就已經完善了。

改造新增功能

如果你是vs2013的使用者，無法使用程式碼生成器。可以到這裡來下載：程式碼地址

原來的新增功能：

var person = _$form.serializeFormToObject();
            abp.ui.setBusy(_$modal);
            console.log(person);
            _personService.createPersonAsync(person).done(function () {
                _$modal.modal("hide");
                location.reload(true); //reload page to see new person!
            }).always(function() {
                abp.ui.clearBusy(_$modal);
            });
            });

修改後的：

var personEditDto = _$form.serializeFormToObject();
            abp.ui.setBusy(_$modal);
        
            _personService.createOrUpdatePersonAsync({ personEditDto }).done(function() {
                _$modal.modal("hide");

                location.reload(true); //reload page to see new person!
            }).always(function() {
                abp.ui.clearBusy(_$modal);
            });
        });

這樣修改後，可以為我們的編輯功能也不用再去貼上複製js程式碼了。

新增修改方法

function editPerson(id) {

    _personService.getPersonForEditAsync({ id: id }).done(function(data) {

        $("input[name=Name]").val(data.person.name);
        $("input[name=EmailAddress]").val(data.person.emailAddress);
        $("input[name=Id]").val(data.person.id);

    });


}

就這麼簡單。

著重說明（敲黑板）：這裡特別要注意，因為作者給的demo的js使用的是。()();寫法，這樣是避免了汙染了全域性變數。我這裡使用的是最快捷的方式來實現編輯功能，也就是說。我們的editPerson方法要寫在外面，否則我們也沒的onclick()方法是無法觸發的。

好了。這樣的話，修改和新增呼叫的都是同一個方法也能保證正常的修改和新增了。

刪除功能

 

function deletePerson(id) {
    _personService.deletePersonAsync({ id: id }).done(function () {
        location.reload(true);
    });


}

刪除功能，也很簡單。整體我們對Person的單表操作就算是已經完成了。

 

完善刪除功能

我這裡說的完善的意思是，我們目前的刪除就是點選刪除按鈕，就開始重新整理頁面，然後就刪除了該行資料。

這樣一點都不人性化，我們把他改 的人性化一點。

function deletePerson(id) {
    abp.message.confirm(
        "是否刪除Id為"+id+"的聯絡人資訊", function() {
            _personService.deletePersonAsync({ id: id }).done(function() {
                location.reload(true);
            });
        }
    );

}

看他們的區別。

image

然後就是這樣。

我們對Person的增刪改查算是徹底了完成了。

 

-返回目錄-  ABP打造一個《電話簿專案》

相關文章