locked
What are the Key differences between MVC and MVVM and uses of MVVM? RRS feed

  • Question

  • User-118859203 posted

    Hi guys,

    I am new in MVC. Now, I can see there is use of MVVM in MVC as well. 

    Question:

    What are the differences between  standard "Model View Controller" pattern and Microsoft's MVVM pattern?

    I also want to know the uses of MVVM in MVC.  Thanks for your help!

    Wednesday, December 5, 2018 12:50 AM

Answers

  • User-552477072 posted

    Hi Kamalhussain,

    MVVM is used to two-way bind data within views. It uses ViewModel. This is usually a client-side implementation. Other hand,  MVC is a way of separating concerns on the server-side.

    To use MVVM in MVC you can use Knockout.js or Angular js etc. You can have a look to Knockout functionality then will understand uses of MVVC in MVC.

    Thanks.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 5, 2018 12:59 AM
  • User-552477072 posted

    ViewModels hold a certain shape of data and commands, they do not know where the data, or code comes from or how it is displayed.
    Controllers provide the logic that controls what data is seen and where.
    Controllers provide the command code to the ViewModel so that the ViewModel is actually reusable.  So, ViewModel does not necessarily replace the need for separate Controllers.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 5, 2018 2:36 AM
  • User-552477072 posted

    You can get here:

    https://www.codeproject.com/Articles/657981/%2FArticles%2F657981%2FASP-NET-MVC-4-with-Knockout-Js

    some a bit script will be like this: 

    var Person = {
     
        PrepareKo: function () {
            ko.bindingHandlers.date = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    element.onchange = function () {
                        var observable = valueAccessor();
                        observable(new Date(element.value));
                    }
                },
                update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var observable = valueAccessor();
                    var valueUnwrapped = ko.utils.unwrapObservable(observable);
                    if ((typeof valueUnwrapped == 'string' || valueUnwrapped instanceof String) &&
                                 valueUnwrapped.indexOf('/Date') === 0) {
                        var parsedDate = Person.ParseJsonDate(valueUnwrapped);
                        element.value = parsedDate.getMonth() + 1 + "/" +
                          parsedDate.getDate() + "/" + parsedDate.getFullYear();
                        observable(parsedDate);
                    }
                }
            };
        },
     
        ParseJsonDate: function (jsonDate) {
            return new Date(parseInt(jsonDate.substr(6)));
        },
     
        BindUIwithViewModel: function (viewModel) {
            ko.applyBindings(viewModel);
        },
     
        EvaluateJqueryUI: function () {
            $('.dateInput').datepicker();
        },
     
        RegisterUIEventHandlers: function () {
     
            $('#Save').click(function (e) {
     
                // Check whether the form is valid. Note: Remove this check, if you are not using HTML5
                if (document.forms[0].checkValidity()) {
     
                    e.preventDefault();
     
                    $.ajax({
                        type: "POST",
                        url: Person.SaveUrl,
                        data: ko.toJSON(Person.ViewModel),
                        contentType: 'application/json',
                        async: true,
                        beforeSend: function () {
                            // Display loading image
                        },
                        success: function (result) {
                            // Handle the response here.
                        },
                        complete: function () {
                            // Hide loading image.
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            // Handle error.
                        }
                    });
     
                }
     
            });
     
        },
     
    };
     
    $(document).ready(function () {
        Person.PrepareKo();
        Person.BindUIwithViewModel(Person.ViewModel);
        Person.EvaluateJqueryUI();
        Person.RegisterUIEventHandlers();
    });

    if it helps you don't forget to mark as answer. Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 5, 2018 4:06 AM

All replies

  • User-552477072 posted

    Hi Kamalhussain,

    MVVM is used to two-way bind data within views. It uses ViewModel. This is usually a client-side implementation. Other hand,  MVC is a way of separating concerns on the server-side.

    To use MVVM in MVC you can use Knockout.js or Angular js etc. You can have a look to Knockout functionality then will understand uses of MVVC in MVC.

    Thanks.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 5, 2018 12:59 AM
  • User-118859203 posted

    Thanks rubaiyat2009,

    Is the ViewModel necessary to replace the need for separating Controllers?

    Wednesday, December 5, 2018 2:32 AM
  • User-552477072 posted

    ViewModels hold a certain shape of data and commands, they do not know where the data, or code comes from or how it is displayed.
    Controllers provide the logic that controls what data is seen and where.
    Controllers provide the command code to the ViewModel so that the ViewModel is actually reusable.  So, ViewModel does not necessarily replace the need for separate Controllers.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 5, 2018 2:36 AM
  • User-118859203 posted

    Hi. Any sample of using Knockout in MVC?

    Wednesday, December 5, 2018 4:01 AM
  • User-552477072 posted

    You can get here:

    https://www.codeproject.com/Articles/657981/%2FArticles%2F657981%2FASP-NET-MVC-4-with-Knockout-Js

    some a bit script will be like this: 

    var Person = {
     
        PrepareKo: function () {
            ko.bindingHandlers.date = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    element.onchange = function () {
                        var observable = valueAccessor();
                        observable(new Date(element.value));
                    }
                },
                update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var observable = valueAccessor();
                    var valueUnwrapped = ko.utils.unwrapObservable(observable);
                    if ((typeof valueUnwrapped == 'string' || valueUnwrapped instanceof String) &&
                                 valueUnwrapped.indexOf('/Date') === 0) {
                        var parsedDate = Person.ParseJsonDate(valueUnwrapped);
                        element.value = parsedDate.getMonth() + 1 + "/" +
                          parsedDate.getDate() + "/" + parsedDate.getFullYear();
                        observable(parsedDate);
                    }
                }
            };
        },
     
        ParseJsonDate: function (jsonDate) {
            return new Date(parseInt(jsonDate.substr(6)));
        },
     
        BindUIwithViewModel: function (viewModel) {
            ko.applyBindings(viewModel);
        },
     
        EvaluateJqueryUI: function () {
            $('.dateInput').datepicker();
        },
     
        RegisterUIEventHandlers: function () {
     
            $('#Save').click(function (e) {
     
                // Check whether the form is valid. Note: Remove this check, if you are not using HTML5
                if (document.forms[0].checkValidity()) {
     
                    e.preventDefault();
     
                    $.ajax({
                        type: "POST",
                        url: Person.SaveUrl,
                        data: ko.toJSON(Person.ViewModel),
                        contentType: 'application/json',
                        async: true,
                        beforeSend: function () {
                            // Display loading image
                        },
                        success: function (result) {
                            // Handle the response here.
                        },
                        complete: function () {
                            // Hide loading image.
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            // Handle error.
                        }
                    });
     
                }
     
            });
     
        },
     
    };
     
    $(document).ready(function () {
        Person.PrepareKo();
        Person.BindUIwithViewModel(Person.ViewModel);
        Person.EvaluateJqueryUI();
        Person.RegisterUIEventHandlers();
    });

    if it helps you don't forget to mark as answer. Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 5, 2018 4:06 AM