通过淘汰赛提交给 MVC 操作的表单有额外的双引号

Question

我在通过淘汰模型提交给我的控制器操作的数据方面遇到问题。每个字符串字段都有额外的双引号包围它，这是一个问题。

虽然我可以手动反序列化数据，但似乎在使用 MVC3 时根本不会发生此问题。请记住，我需要提交表单而不是 ajax 帖子。

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 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>

控制器动作：

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

    return View();
}

模型发布后的内容：

原始帖子数据：

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

我做错了什么？

Answer 1

我可能在这里离基地很远......但是可能这是一个错误......以下是来自未成年人淘汰赛的源代码改变

   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);
    }
}

Answer 2

关键在于函数的名称postJson。它并不意味着做你想做的事情，它接受你给它的对象上的任何属性，并将它们的值作为 JSON 发布。例如，您可以将您的帖子更改为：

ko.utils.postJson(action, { json: this });

你对此采取的行动：

[HttpPost]
public ActionResult InstallApplication(string json)
{
    JavascriptSerializer ser = new JavascriptSerializer();
    FbWizardCreateTabModel model = ser.Deserialize<FbWizardCreateTabModel>(json);

    return View();
}

如果您想使用 Keith 建议的函数，我会将 JSON 排除在名称之外，因为您似乎并不想实际发布 JSON，可以将其称为 postAsFormData