将 HTML 表单数据序列化为文本文件答案

【问题标题】：Serialize HTML form data to text file将 HTML 表单数据序列化为文本文件
【发布时间】：2014-02-21 21:31:33
【问题描述】：

我使用bootstrap application wizard 创建了一个表单向导。我的问题是我想获取这些数据并执行以下操作：

导出为 excel 文件以立即查看
导出到文本文件

这是我的表单的精简版：

 <div class="wizard" id="CR-wizard" style="color: #030845" data-title="CRITSIT Wizard">

                <!--Step 1-->
                <div class="wizard-card" data-cardname="name">
                    <h3>Contact Information</h3>
                    <div class="wizard-input-section">
                        <p>Full Name</p>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" name="Name" placeholder="Full Name" class="form-control" id="Name" style="width: 220px"/>
                            </div>
                        </div>
                    </div>

  <div class="wizard-input-section">
                        <p>Application Manager</p>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="AppManager" name="AppManager" placeholder="CATIA, ENOVIA, DELMIA..." style="width: 220px" />
                            </div>
                        </div>
                    </div>

                    <div class="wizard-input-section">
                        <p>Focal or Project Manager</p>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="AppFocal" name="AppFocal" placeholder="Application Focal" style="width: 220px" />
                            </div>
                        </div>
                    </div>

                    <div class="wizard-input-section">
                        <p>Supplier</p>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="SuppFocal" name="SuppFocal" placeholder="Supplier Focal" style="width: 220px" />
                            </div>
                        </div>
                    </div>

  <div class="wizard-input-section">
                        <p>Version:</p>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="Version" placeholder="Version #" name="Version" style="width: 220px" />
                            </div>
                        </div>
                    </div>

                    <div class="wizard-input-section">
                        <p>Requested Software Level:</p>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="Level" name="Level" placeholder="Software Level" style="width: 220px" />
                            </div>
                        </div>
                    </div>

                    <div class="wizard-input-section">
                        <p>Requested Release Designator:</p>
                        <div class="form-group">
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="ReleaseDesignator" name="ReleaseDesignator" placeholder="Designator" style="width: 220px" />
                            </div>
                        </div>

这里是控制打开、提交和关闭向导的 javascript：

  wizard.on('closed', function () {
                wizard.reset();
            });

            wizard.on("reset", function () {
                wizard.modal.find(':input').val('').removeAttr('disabled');
                wizard.modal.find('.form-group').removeClass('has-error').removeClass('has-succes');
                wizard.modal.find('#fqdn').data('is-valid', 0).data('lookup', 0);
            });

            wizard.on("submit", function (wizard) {
                var submit = {
                    "hostname": $("#new-server-fqdn").val()
                };

                this.log('seralize()');
                this.log(this.serialize());
                this.log('serializeArray()');
                this.log(this.serializeArray());
                setTimeout(function () {
                    wizard.trigger("success");
                    wizard.hideButtons();
                    wizard._submitting = false;
                    wizard.showSubmitCard("success");
                    wizard.updateProgressBar(0);
                }, 2000);
            });

            wizard.el.find(".wizard-success .im-done").click(function () {
                wizard.hide();
                setTimeout(function () {
                    wizard.reset();
                }, 250);

            });

            wizard.el.find(".wizard-success .create-another-server").click(function () {
                wizard.reset();
            });

            $(".wizard-group-list").click(function () {
                alert("Disabled for demo.");
            });

            $(document).ready('#open-wizard()');
            {
                wizard.show();
            }

            $('#open-wizard').click(function (e) {
                e.preventDefault();
                wizard.show();
            });

对于使用 javascript 和 html 表单真的很陌生，当我进行研究时，我发现大部分答案都使用 PHP，在我的情况下，我使用 asp.net 和 c# 来完成此任务。

任何有关如何解决此问题的帮助都会很棒！

【问题讨论】：

你在 C# 中做了多少工作？一种方法是设置一个 WCF REST 服务，它将接收您的 POST 作为流并适当地处理它。 MSDN post
@Infinitesimus，我对c#有很好的理解。我会研究这种方法。谢谢！
太棒了！我添加了一个带有更多链接的答案，以帮助您入门。如果您正在处理二进制数据，请注意用于流的阅读器类型

标签： c# javascript jquery html twitter-bootstrap

【解决方案1】：

您可以创建一个WCF 服务来为您处理它。 (Tutorial)

您应该使用类似于此的服务格式：

namespace MyServive
{
    public class FileConverter : IFIleConverter
    {
       public double Add(stream rawdata)
         {
           //write to files
         }
    }
}

重要的是你期待一个流。阅读更多here。

基本思想是您需要一个接受流的服务操作。当您拥有此流时，您的代码有责任根据您所需的编码将其正确写入文件。请注意，如果您正在处理 excel 文件（或一般的二进制数据），则使用 StreadReader 可能无法正确处理数据，因为它不是为二进制数据设计的。

【讨论】：