Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Friends,
i am developing project with MVC and knockout js.
here i have view "Customerlist".and view model "CustomerViewModel".

i dont know to write the function and call the function in view to edit and delete
CustomerList View

XML
<div id="binding" data-bind="foreach: customersListViewModel.customers">

    <div class="row">
        <div class="col-md-1"><span data-bind="text: CustomerId"></span></div>
        <div class="col-md-4"><span data-bind="text: Name"></span></div>
        <div class="col-md-2">View Addresses</div>
        <div class="col-md-1"><a href="#">Edit</a></div>
        <div class="col-md-1"><a href="#">Delete</a></div>

    </div>
</div>
<div class="control-group">
    <label class="control-label" for="singlebutton">&nbsp;</label>
    <div class="controls">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary" data-bind="click: function () { customersListViewModel.changeVisibility(true); }">Add Customer</button>

    </div>
</div>



Customer.js
C#
var customerViewModel;

ko.validation.rules.pattern.message = 'Invalid.';

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

function CustomersList() {

    var self = this;

    // observable arrays are update binding elements upon array changes
    self.customers = ko.observableArray([]);
    self.Visibility = ko.observable(false);

    self.getCustomers = function () {
        self.customers.removeAll();

        // retrieve students list from server side and push each object to model's customers list
        $.getJSON('/api/Customer', function (data) {
            $.each(data, function (key, value) {
                self.customers.push(new Customer(value.CustomerId, value.FirstName, value.LastName, value.EmailAddress, value.PhoneNumber));
            });
        });
    };

    self.changeVisibility = function (visible) {
        self.Visibility(visible);
    };

    self.addCustomer = function () {
        var observableFormData = this.addCustomerViewModel;
        var customersListViewModel = this.customersListViewModel;
        var dataObject = ko.toJSON(this.addCustomerViewModel);

        if (observableFormData.errors().length == 0) {
            $.ajax({
                url: '/api/Customer',
                type: 'post',
                data: dataObject,
                contentType: 'application/json',
                success: function (data) {
                    self.getCustomers();
                    observableFormData.CustomerId(null);
                    observableFormData.FirstName('');
                    observableFormData.LastName('');
                    observableFormData.EmailAddress('');
                    observableFormData.PhoneNumber('');
                    customersListViewModel.changeVisibility(false);
                },
                error: function (request, status, error) {
                    if (request.responseText != "") {
                        var response = jQuery.parseJSON(request.responseText);
                        var messages = JSON.stringify(response.Message).split(",");
                        if (messages.length > 0)
                        {
                            $.each(messages, function (index, value) {
                                observableFormData.businessRuleErrors.push(value);
                            });
                            customersListViewModel.changeVisibility(true);
                        }
                    }
                }
            });
        } else {
            observableFormData.errors.showAllMessages();
        }
    };



}

customerViewModel = {
    customersListViewModel: new CustomersList(),
    addCustomerViewModel: new Customer(),
};


$(document).ready(function () {
    ko.applyBindings(customerViewModel);
    customerViewModel.customersListViewModel.getCustomers();
});


function Customer(customerId, firstName, lastName, emailAddress, phoneNumber) {
    var self = this;

    self.CustomerId = ko.observable(customerId);
    self.FirstName = ko.observable(firstName).extend({
        required: {
            params: true,
            message: "First name is required"
        }
    });
    self.LastName = ko.observable(lastName).extend({
        required: {
            params: true,
            message: "Last name is required"
        }
    });
    self.EmailAddress = ko.observable(emailAddress).extend({
        required: {
            params: true,
            message: "Email is required"
        }, email: true
    });
    self.PhoneNumber = ko.observable(phoneNumber).extend({
        required: {
            params: true,
            message: "Phone Number is required"
        }
    });
    self.errors = ko.validation.group(self);
    self.businessRuleErrors = ko.observableArray([]);
    self.Name = ko.computed(function () {
        return self.FirstName() + " " + self.LastName();
    }, self);


}


Could any one please help me to write the function for edit and delete the data?

Many Thanks,
Regards
Lalitha
Posted
Updated 23-Jul-18 23:55pm
Comments
DiponRoy 23-Jul-14 3:41am    
where do you want to put your edit and delete function? inside CustomerViewModel or CustomersList ?

hi you can do some thing like this. http://jsfiddle.net/dv8jV/[^]
 
Share this answer
 
Hi Lalitha,
For edit you can call in html like:
<button data-bind="click: editMA, visible: userLogin()==true && $root.selectedCompany().key =='-1' && selectedItemEditable()==true" class=" btn btn-primary" style="float:left; margin-left:5px;">Edit TA</button>


JS:
self.editMA = function () {

           if (taId > 0) {

               $.ajax({
                   url: '/PMTechnicalAccount/GetMAValueByID?pob=' + taId,
                   type: "GET",
                   dataType: "JSON",
                   success: function (result) {
                       var value = result.pobSubs;
                       if (result.funcClassList != "") {
                           self.checkedRig(result.funcClassList);
                       }
                       if (value != "") {
                           self.PMFunction().Id(value[0].ID);
                           self.PMFunction().Function_Id(value[0].Function_Id);
                           //self.PMFunction().FuncClass_id(value[0].FuncClass_id);
                           self.PMFunction().Function_Length(value[0].Function_Length);

                           self.PMFunction().Function_Parent(value[0].Function_Parent);
                           self.PMFunction().Function_OnLower(value[0].Function_OnLower);
                           self.PMFunction().Function_Name(value[0].Function_Name);
                           self.PMFunction().Function_ThisLevelID(value[0].Function_ThisLevelID);
                           self.PMFunction().IsActive(value[0].IsActive);
                           $("#dialog-MAEdit").dialog("open");
                       }

                   }
               });

               //if (companyCode == "Common")
               //    ViewModelWICreate.openDialogWIDetail(companyCode);
               //else
               //    $("#dialog-WIDetail").dialog("open");
           }
           else {
               alert("Select Technical Account First");
           }
       }


Dialog declaration in JS:

$("#dialog-MAEdit").dialog({
               open: function (event, ui) {
                   $(this).parent().addClass('ui-dialog-3000');
               },
               autoOpen: false,
               height: 350,
               width: 700,
               modal: true,
               dialogClass: "no-titlebar-round"
           }).css({ "font-family": "'open sans', 'Helvetica Neue', 'Helvetica', Arial, sans-serif", "font-size": "12px" });


Partial View for Edit:
<div id="dialog-MAEdit" title="Maintenable Area" style="overflow-x: hidden;">
    <div data-bind="with: ViewModelMaintenableArea">

        <div class="col-md-12">
            <div class="ibox-title">
                <h5>Edit Technical Account</h5>
            </div>
            <div class="ibox-content" style="padding-top:0px;  position:relative;">

                <div class="row">
                    <div class="wellpob" style="min-height:208px; background-color:#f3f3f4; padding:0px; padding-bottom:10px !important; margin-bottom:3px;">
                        <div class="col-lg-9" style="background-color: #f3f3f4; min-height:200px; padding:14px; float:left;">

                            <div class="form-group">
                                @Html.Label("Account ID", new { @class = "control-label col-md-3" })
                                <div class="col-md-9 m-b-xs" style="min-height:1px; padding-left:3px;  padding-right:3px;  position:relative;">
                                    <input class="form-control" readonly="readonly" type="text" data-bind="value:PMFunction().Function_Id" />
                                </div>
                            </div>
                            <div class="form-group">
                                @Html.Label("Account Name", new { @class = "control-label col-md-3", @style = "align:right;" })
                                <div class="col-md-9  m-b-xs" style="min-height:1px; padding-left:3px;  padding-right:3px;  position:relative;">
                                    <input class="form-control" type="text" data-bind="value:PMFunction().Function_Name" />
                                </div>
                            </div>
                            <div class="form-group">
                                @Html.Label("Componenet Sub ID", new { @class = "control-label col-md-3" })
                                <div class="col-md-9  m-b-xs" style="min-height:1px; padding-left:3px;  padding-right:3px;  position:relative;">
                                    <input class="form-control" type="text" readonly="readonly" data-bind="value:PMFunction().Function_Parent" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3"></div>
                                <div class="col-md-9">
                                    <input type="checkbox" data-bind="checked: PMFunction().IsActive" />
                                    @Html.Label("IsActive", new { @class = "control-label" })
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3" style="background-color: #f3f3f4; border-left: thick solid white; min-height:200px; padding:14px; float:right;">
                            <div class="col-md-10">
                                @Html.Label("Select Rig", new { @class = "control-label" })
                                <ul data-bind="foreach: Rig">
                                    <li>
                                        <input type="checkbox" data-bind="checked: $parent.checkedRig, value: key">
                                        <span data-bind="text: value"> </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                    
                @*<div class="row">
                    <div class="wellpob" style="min-height:200px; background-color:#f3f3f4; padding:0px; padding-bottom:10px !important; margin-bottom:3px;">
                        <div class="col-lg-12" style="background-color: #f3f3f4; min-height:180px; padding:14px; float:left;">

                            <div class="form-group">
                                @Html.Label("Account ID", new { @class = "control-label col-md-3" })
                                <div class="col-md-7 m-b-xs" style="min-height:1px; padding-left:3px;  padding-right:3px;  position:relative;">
                                    <input class="form-control" type="text" data-bind="value:PMFunction().Function_Id" />
                                </div>
                            </div>
                                <div class="form-group">
                                    @Html.Label("Account Name", new { @class = "control-label col-md-3", @style = "align:right;" })
                                    <div class="col-md-7  m-b-xs" style="min-height:1px; padding-left:3px;  padding-right:3px;  position:relative;">
                                        <input class="form-control" type="text" data-bind="value:PMFunction().Function_Name" />
                                    </div>
                                </div>
                            <div class="form-group">
                                @Html.Label("Parent ID", new { @class = "control-label col-md-3" })
                                <div class="col-md-7  m-b-xs" style="min-height:1px; padding-left:3px;  padding-right:3px;  position:relative;">
                                    <input class="form-control" type="text" readonly="readonly" data-bind="value:PMFunction().Function_Parent" />
                                </div>
                            </div>
                            <div class="form-group">
                                @Html.Label("Location", new { @class = "control-label col-md-3" })
                                <div class="col-md-7  m-b-xs" style="min-height:1px; padding-left:3px;  padding-right:3px;  position:relative;">
                                    <input class="form-control" type="text" readonly="readonly" data-bind="value:PMFunction().FuncClass_id" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3"></div>
                                    <div class="col-md-7">
                                        <input type="checkbox" data-bind="checked: PMFunction().IsActive" />
                                        @Html.Label("IsActive", new { @class = "control-label" })
                                    </div>
                                </div>
                        </div>
                                                    
                        </div>
                </div>*@

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-8" align="center">
                        <button class="btn btn-primary" data-bind="click: submitMAEdit" onclick="return false;">Update</button>
                        <button class="btn btn-white" data-bind="click: cancelMAEdit" onclick="return false;">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


Just modify according to your requirement. If you need help for delete also let me know
 
Share this answer
 
Comments
CHill60 24-Jul-18 6:08am    
I rather hope that 4 years down the line Lalitha has learned to do this for themselves. Stick to answering new posts where the OP still needs help

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900