Question

我使用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＃来完成此任务。

如何解决这个问题的任何帮助都会很棒！

Answer 1

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

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

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

重要的是你期待一条小溪。再读一些here。

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

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

1 个答案: