Question

I am having issues with the data submitted to my controller action via a knockout model. Each string field has extra double quotes surrounding it which is an issue.

While I can deserialize the data manually, it seems that this issue should not be occurring at all when using MVC3. Keep in mind that I need to do a form submit not an ajax post.

Html:

@inherits System.Web.Mvc.WebViewPage<FbWizardCreateTabModel>

@using (Html.BeginForm("InstallApplication", "FbWizard", FormMethod.Post, new { id = "createtab", @data_bind = "submit:onSubmit" }))
{
    <p>Page Id: <span data-bind="text: PageId"></span></p>
    <p>Page Name: <span data-bind="text: PageName"></span></p>
    <p>Tab Name: @Html.TextBoxFor(m => m.TabName, new { data_bind = "value: TabName" })</p>
}

<button class="btn btn-primary next">Submit</button>

Script code:

 <script type="text/javascript">

        var initialData = @Html.Raw(Model.JsonData);
        var viewModel = ko.mapping.fromJS(initialData);

        viewModel.onSubmit = function() {

            var action = $('#createtab').attr('action');

            ko.utils.postJson(action, this);

            return false;
        };

        ko.applyBindings(viewModel);

    </script>

Controller action:

[HttpPost]
public ActionResult InstallApplication(FbWizardCreateTabModel model)
{
    // The model is mangled at this point, see image below

    return View();
}

Contents of model after post:

Raw post data:

POST http://mysite.localhost:7785/Admin/FbWizard/InstallApplication HTTP/1.1
Host: mysite.localhost:7785
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://mysite.localhost:7785/Admin/FbWizard/CreateTab
Cookie: fbsr_....
Content-Type: application/x-www-form-urlencoded
Content-Length: 333

PageId=%22231271443653720%22&PageName=%22Car5%22&TabName=%22Auctions2%22&JsonData=null&__ko_mapping__=%7B%22include%22%3A%5B%22_destroy%22%5D%2C%22ignore%22%3A%5B%5D%2C%22copy%22%3A%5B%5D%2C%22mappedProperties

What am I doing wrong?

Answer 1

I might be WAY off base here….. but POSSIBLY this is a bug…. what follows is the source code from knockout with a minor change

   postJsonNoQuotes = function (urlOrForm, data, options) {
        options = options || {};
        var params = options['params'] || {};
        var includeFields = options['includeFields'] || this.fieldsIncludedWithJsonPost;
        var url = urlOrForm;

        // If we were given a form, use its 'action' URL and pick out any requested field values
        if((typeof urlOrForm == 'object') && (ko.utils.tagNameLower(urlOrForm) === "form")) {
            var originalForm = urlOrForm;
            url = originalForm.action;
            for (var i = includeFields.length - 1; i >= 0; i--) {
                var fields = ko.utils.getFormFields(originalForm, includeFields[i]);
                for (var j = fields.length - 1; j >= 0; j--)
                    params[fields[j].name] = fields[j].value;
            }
        }

        data = ko.utils.unwrapObservable(data);
        var form = document.createElement("form");
        form.style.display = "none";
        form.action = url;
        form.method = "post";
        for (var key in data) {
            var input = document.createElement("input");
            input.name = key;
           // I think this is the offending line....
           // input.value = ko.utils.stringifyJson(ko.utils.unwrapObservable(data[key]));
            input.value = ko.utils.unwrapObservable(data[key]);
            form.appendChild(input);
        }
        for (var key in params) {
            var input = document.createElement("input");
            input.name = key;
            input.value = params[key];
            form.appendChild(input);
        }
        document.body.appendChild(form);
        options['submitter'] ? options['submitter'](form) : form.submit();
        setTimeout(function () { form.parentNode.removeChild(form); }, 0);
    }
}