<table class="listTbl">
    <thead>
        <tr>
            <td width="100"></td>
            <td>ID</td>
            <td>姓名</td>
            <td>電子郵件</td>
        </tr>
    </thead>
    <tbody data-bind="foreach:UserList">
        <tr>
            <td>
                <a href="javascript:;" data-bind="click:$parent.del">刪除</a>
                <a href="javascript:;" data-bind="click:$parent.edit">編輯</a>
            </td>
            <td data-bind="text:UserInfoID"></td>
            <td data-bind="text:UserName"></td>
            <td data-bind="text:Email"></td>
        </tr>
    </tbody>
</table>
<script type="text/html" id="editUserDiv">
    <form style="width: 500px;" id="editUser" data-bind="with:selectUser">
        <div class="editor-label">
            賬號：
        </div>
        <div class="editor-field">
            <input type="hidden" name="UserInfoID" data-bind='value: UserInfoID' />
            <input name="UserName" data-bind='value: UserName' />
        </div>
        <div class="editor-label">
            Email：
        </div>
        <div class="editor-field">
            <input name="Email" data-bind='value: Email' />
        </div>
        <div class="editor-label">
            手機(ji)：
        </div>
        <div class="editor-field">
            <input name="Phone" data-bind='value: Phone' />
        </div>
        <div class="editor-label">
            密碼：
        </div>
        <div class="editor-field">
            <input name="Password" data-bind='value: Password' />
        </div>
        <div class="editor-label">
            真實姓(xing)名：
        </div>
        <div class="editor-field">
            <input name="RealName" data-bind='value: RealName' />
        </div>

        <div style="clear: both;"></div>

        <p>
            <input type="button" value="Save" data-bind="click:$parent.save" />
        </p>
    </form>
</script>

<script type="text/ecmascript">
    function toVal(obj) {
        if (typeof obj == "function")
            return obj();
        else
            return obj;
    }
    var Model = function () {

        //properies
        var self = this;
        ko.validation.configure({//ko.validation相關配置
            insertMessages: true//不自動插入錯(cuo)誤消(xiao)息
        });

        self.UserList = ko.observableArray(@Html.Raw(Json.Encode(Model)));
        self.selectUser = ko.observable();
        //methods
        self.del = function (o) {

            Boxy.confirm("are you sure?", function () {
                $.post("/ef/DelAjaxPost?userinfoID=" + o.UserInfoID, function (data) {
                    alert(data == true ? "成功" : "失敗");
                    self.UserList.remove(o);
                });
            });
        }

        self.edit = function (o) {
            $(".boxy-wrapper").empty()//關閉之(zhi)前的彈(dan)框
            new Boxy($("#editUserDiv").html(), {
                afterShow: function () {//彈出框這(zhe)前，綁定數據(ju)到彈框元(yuan)素上  
                    //屬性驗證
                    o.Phone = ko.observable(toVal(o.Phone)).extend({ required: true });/*先將要驗(yan)證(zheng)(zheng)的字段變成ko對象，并添(tian)加(jia)擴展驗(yan)證(zheng)(zheng)特性*/
                    o.Email = ko.observable(toVal(o.Email)).extend({ required: true });
                    o.RealName = ko.observable(toVal(o.RealName)).extend({ required: true });
                    o.Password = ko.observable(toVal(o.Password)).extend({ required: true });
                    o.UserName = ko.observable(toVal(o.UserName)).extend({ required: true });
                    //綁定對象到ko
                    self.selectUser(o);

                    //綁定對象到頁面
                    ko.applyBindings(self, document.getElementById("editUser"));
                }, modal: true, title: "提示", closeText: "x"
            });
        }



        self.save = function (o) {
            self.errors = ko.validation.group(o);
            if (o.isValid()) {

                $.post("/EF/EditAjaxPost", $("form").serialize()/*這個方法(fa)必須使input有(you)name屬性(xing)，只有(you)id屬性(xing)不行(xing)*/, function (data) {
                    location.href = "/ef/userlist";
                });
            } else {
                self.errors.showAllMessages();
            }

        }

    }
    var M = new Model();
    ko.applyBindings(M);
</script>