Mosaico With ASP.Net web form: getting Uncaught TypeError: Cannot read property 'hasOwnProperty' of null

Dear Bago,

I am trying to integrate Mosaico with ASP.Net web forms. but getting "Uncaught TypeError: Cannot read property 'hasOwnProperty' of null" error while loading editor. I tried to investigate issue on my own and found that model is coming null in CheckModel method.

but when I run same JS file with Matt Gordon's MVC example it works perfectly. So can please let me know what I am missing while initializing the mosaico.

I have added console log. also find code which I am using for initializing Mosaico

Mosaico.zip

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Editor.aspx.cs" Inherits="ASPNet_Mosaico.Editor" %>

<!DOCTYPE html>
<html>
<head>
<title><%= Model.Title %> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="canonical" href="http://mosaico.io" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />

<meta name="viewport" content="width=1024, initial-scale=1">

<link rel="stylesheet" href="/Content/mosaico/mosaico-material.min.css" />
<link rel="stylesheet" href="/Content/mosaico/vendor/notoregular/stylesheet.css" />

<link rel="stylesheet" href="/Content/bootstrap.min.css" />

<script src="/Content/mosaico/vendor/jquery.min.js"></script>
<%--<script src="~/Scripts/bootstrap.min.js"></script>--%>
<script src="Scripts/bootstrap.min.js"></script>
<script src="/Content/mosaico/vendor/knockout.js"></script>
<script src="/Content/mosaico/vendor/jquery-ui.min.js"></script>
<script src="/Content/mosaico/vendor/jquery.ui.touch-punch.min.js"></script>
<script src="/Content/mosaico/vendor/load-image.all.min.js"></script>
<script src="/Content/mosaico/vendor/canvas-to-blob.min.js"></script>
<script src="/Content/mosaico/vendor/jquery.iframe-transport.js"></script>
<script src="/Content/mosaico/vendor/jquery.fileupload.js"></script>
<script src="/Content/mosaico/vendor/jquery.fileupload-process.js"></script>
<script src="/Content/mosaico/vendor/jquery.fileupload-image.js"></script>
<script src="/Content/mosaico/vendor/jquery.fileupload-validate.js"></script>
<script src="/Content/mosaico/vendor/knockout-jqueryui.min.js"></script>
<script src="/Content/mosaico/vendor/tinymce.min.js"></script>
<script src="/Content/mosaico/mosaico.min.js"></script>
<%--<link href="/Content/mosaico/mosaico-libs-and-tinymce.min.css" rel="stylesheet" />--%>
<script>
     $(function () {
        debugger;
        if (!Mosaico.isCompatible()) {
            alert('Update your browser!');
            return;
        }

        //Set path for Mosaico service
        //var url = document.getElementById("serverURL");
        //var basePath = url + '/MosaicoAPI.aspx';

        var basePath = window.location.href;

        var templatePath = '';
        var metadata = '';
        var content = '';
        var templateID = <%=Model.MosaicoEmail.TemplateID %>;

        //Set template path
        if (templateID === 0)
            templatePath = "/Content/templates/versafix-1/template-versafix-1.html";
        else if (templateID === 1)
            templatePath = "/Content/templates/tedc15/template-tedc15.html";
        else if (templateID === 2)
            templatePath = "/Content/templates/tutorial/template-tutorial.html";

        //Set metadata and content
        if (<%= Model.MosaicoEmail.MosaicoEmailID%>>0) {
            <% if (!string.IsNullOrWhiteSpace(Model.MosaicoEmail.Metadata))
    {
            %>
            metadata =<%=Model.MosaicoEmail.Metadata %>;
            metadata = ko.utils.parseJson(metadata.replace("\\", "\\\\"));
            <%
    }
            %>
            <% if (!string.IsNullOrWhiteSpace(Model.MosaicoEmail.Content))
    {
            %>
            content =<%=Model.MosaicoEmail.Content %>;
            content = ko.utils.parseJson(content.replace("\\", "\\\\"));
            <%
    }
            %>
        }
        var plugins;
        //Define tinymce pluging
        plugins = [
            function (viewModel) {
                var saveCmd = {
                    name: 'Save',
                    enabled: ko.observable(true)
                };

                //Define handler
                saveCmd.execute = function () {
                    saveCmd.enabled(false);
                    viewModel.metadata.changed = Date.now();
                    if (typeof viewModel.metadata.key == 'undefined') {
                        var rnd = Math.random().toString(36).substr(2, 7);
                        viewModel.metadata.key = rnd;
                    }

                    //Create save API call
                    var postData = {
                        id: <%=Model.MosaicoEmail.MosaicoEmailID%>,
                        name: <%=!string.IsNullOrWhiteSpace(Model.MosaicoEmail.Name)? Model.MosaicoEmail.Name:string.Empty%>, 
                        template: <%=Model.MosaicoEmail.TemplateID%>,
                        metadata: viewModel.exportMetadata(),
                        content: viewModel.exportJSON(),
                        html: viewModel.exportHTML()
                    };

                    $.post('/MosaicoAPI.aspx/Save', postData)
                        .done(function () {
                            viewModel.notifier.success(viewModel.t('Successfully saved.'));
                        })
                        .fail(function (jqXHR, textStatus, error) {
                            console.log(textStatus);
                            console.log(error);
                            console.log(jqXHR);
                            viewModel.notifier.error(viewModel.t('Saving failed. Please try again in a few moments or contact us.'));
                        })
                        .always(function () {
                            saveCmd.enabled(true);
                        });
                };

                viewModel.save = saveCmd;
            },
        ],
            //Initialise  Mosaico
            Mosaico.start({
                imgProcessorBackend: basePath + '/Image/',
                emailProcessorBackend: basePath + '/Download/',
                titleToken: "MOSAICO Responsive Email Designer",

                fileuploadConfig: {
                    url: basePath + '/upload/'
                }
            }, templatePath, metadata, content, plugins);

        //var ok = Mosaico.init({
        //    imgProcessorBackend: basePath + '/img/',
        //    emailProcessorBackend: basePath + '/dl/',
        //    titleToken: "MOSAICO Responsive Email Designer",
        //    fileuploadConfig: {
        //        url: basePath + '/upload/',
        //        // messages??
        //    }
        //}, plugins);
    });
</script>

voidlabs / mosaico

Mosaico With ASP.Net web form: getting Uncaught TypeError: Cannot read property 'hasOwnProperty' of null #519