將HTML表單數據序列化爲文本文件

我使用bootstrap application wizard創建了表單嚮導。我的問題是我想利用這些數據並執行以下操作：將HTML表單數據序列化爲文本文件

導出到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＃做到這一點。

任何關於如何去做這件事的幫助將會很棒！

來源

2014-02-21 CSharpDev4Evr

你在C＃中做了多少工作？一種途徑是設置一個WCF REST服務，它將以流的形式接收您的POST並正確處理它。 [MSDN post]（http://msdn.microsoft.com/en-us/library/ms751463.aspx） –

@Infinitesimus，我對c＃有很好的理解。我會研究這種方法。謝謝！ – CSharpDev4Evr

太棒了！我已經添加了一些答案，並提供了更多鏈接以幫助您入門。如果您正在處理二進制數據，請謹慎對待您使用該流的閱讀器類型 –

您可以創建一個WCF服務來爲您處理它。 (Tutorial)

你應該使用類似這樣的服務形式：

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

的重要的部分是你期望的流。閱讀更多here。

其基本思想是，您需要一個服務操作，接受流。當你有這個流時，你的代碼有責任根據你想要的編碼將它正確地寫入文件。請注意，如果您在處理excel文件（或一般的二進制數據），使用StreadReader可能無法正確處理數據，因爲它不是爲二進制數據設計的。

來源

2014-02-21 21:44:53

將HTML表單數據序列化爲文本文件

回答

相關問題