通过淘汰赛提交给MVC行动的表格有额外的双引号

时间:2012-05-23 21:22:46

标签: jquery asp.net-mvc-3 knockout.js knockout-mapping-plugin

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

虽然我可以手动反序列化数据,但似乎在使用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();
}

帖子后的模特内容:

enter image description here

原始帖子数据:

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

我做错了什么?

2 个答案:

答案 0 :(得分: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);
    }
}

答案 1 :(得分:0)

密钥位于函数名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