顯示：none fields are not posting to controller

Question

我有一個燈箱，其中包含一組輸入元素，我使用HTML助手創建了一個操作。它們是可選的字段，但我確實在jQuery驗證中將數字規則應用於它們。

用戶可以打開這個燈箱，並填寫所需的字段，但他們不是必需的。它與其餘數據的形式相同，但要提交，必須關閉此燈箱。

提交時，不會將燈箱中的值發佈到控制器。如果我從燈箱中刪除輸入，它工作正常。它必須與隱藏的東西有關，但爲什麼會發生？它是jQuery嗎？我將'voavi-ignore'作爲我的忽略類，所以它仍然應該驗證這些。我有點困惑，因爲我已經有一段時間了。我的網頁上的其他所有內容都能正常工作，並且我只是將這些新字段添加到了Lightbox中。

JS：

$(document).ready(function() { 
    InitTab(); 
    $("#caseProductions").hide(); 
    $(".chzn-select").chosen(); 
    $(".filetypes").click(OnNewVOAVIClick); 
    $(".countPerCase").change(OnCaseProdChange); 
    $(".caseCount").change(OnCaseProdChange); 
    $(".drinkWindow").change(OnDrinkWindowChange); 
    $("#lnkCaseProduction").click(OnCaseProdOpen); 

    VintageUpAlert(); 

    $.validator.addMethod("decimalNumber", function (value, element) { 
     return this.optional(element) || (!isNaN(value)); 
    }, "Must be a valid number"); 

    wineValidator = $("form").validate({ 
     errorPlacement: function (error, element) { 
      var x = element.parent(); 
      error.appendTo(element.closest("td")); 
     }, 
     ignore: ".voavignore", 
     rules: { 
      "Wine.VarTypeID": { min: 1 }, 
      "Wine.OriginID": { min: 1 }, 
      "Wine.AppID": { min: 1 }, 
      "Wine.VintageID": { min: 1 }, 
      "VOAVIRequest.VarType": { required: true }, 
      "VOAVIRequest.Origin": { required: true }, 
      "VOAVIRequest.App": { required: true }, 
      "VOAVIRequest.Vintage": { required: true }, 
      "Wine.CaseProduction": { digits: true }, 
      "Wine.AlcoholContent": { number: true, 
       min: 0, max: 100 
      }, 
      "Wine.pH": { number: true, 
       min: 0, max: 7 
      }, 
      "Wine.RS": { decimalNumber: true, 
       min: 0, max: 1000 
      } 
     }, 
     messages: { 
      "Wine.VarTypeID": { min: "Varietal/Type Required" }, 
      "Wine.OriginID": { min: "Origin Required" }, 
      "Wine.AppID": { min: "Appellation Required" }, 
      "Wine.VintageID": { min: "Vintage Required" }, 
      "VOAVIRequest.VarType": { required: "Varietal/Type Required" }, 
      "VOAVIRequest.Origin": { required: "Origin Required" }, 
      "VOAVIRequest.App": { required: "Appellation Required" }, 
      "VOAVIRequest.Vintage": { required: "Vintage Required" }, 
      "Wine.CaseProduction": { digits: "Please enter whole numbers only" } 
     } 
    }); 

    CaseProdValidation(); 
}); 

function CaseProdValidation() { 
    $(".caseCount").rules("add", { digits: true }); 
} 

HTML（這僅僅是lighbox因爲其他相當多的標記）：

<div class="lightbox" id="caseProductions"> 
    <a href="#" class="ui-icon ui-icon-circle-close closer"></a> 
    <table> 
     <thead> 
      <tr> 
       <td> 
        <h4> 
         Format</h4> 
       </td> 
       <td> 
        <h4> 
         Cases</h4> 
       </td> 
       <td> 
        <h4> 
         Bottles/Case</h4> 
       </td> 
       <td> 
        <h4> 
         Total Bottles</h4> 
       </td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc187ml) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc187ml, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc187ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 24), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc375ml) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc375ml, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc375ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc500ml) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc500ml, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc500ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc750ml) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc750ml, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc750ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc1p5L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc1p5L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc1p5L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc3L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc3L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc3L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc5L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc5L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc5L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc6L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc6L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc6L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc9L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc9L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc9L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc12L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc12L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc12L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc15L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc15L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc15L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc18L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc18L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc18L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.cc27L) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cc27L, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.DropDownListFor(m => m.Wine.cpc27L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
      <tr> 
       <td>@Html.LabelFor(m => m.Wine.ccOther) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.ccOther, new { @class = "caseCount" }) 
       </td> 
       <td>@Html.TextBoxFor(m => m.Wine.cpcOther, new { @class = "countPerCase" }) 
       </td> 
       <td class="totalBottleCalc"> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    <div style="display: inline-block"> 
    <input type="button" value="Save" /> 
    </div> 
</div> 

Answer 1

它實際上是瀏覽器決定是display:none字段應該不會發布（除了type="hidden"那些永遠不會顯示的）。

一個被廣泛使用的技巧是隱藏字段使用定位來代替：

CSS：

input.hideThisField { 
    position:absolute; 
    top: -9999px; 
    visibility:hidden; 
} 

但在你的情況下，問題是，你的表單字段是你的收藏夾中，這是（顯然）在提交表單之前關閉的。這不起作用。一旦關閉了燈箱，您將不得不在表單提交時將燈箱保持打開狀態，或者使用JavaScript自行提取表單內容。

我可能會選擇只是保持燈箱打開，直到表格發佈）。