存储隐藏字段值并在 mvc 的下一页上显示它们

Question

在 JavaScript 中存储隐藏字段值。

但是当点击下一页隐藏字段为空时，它没有上一页的值。

为什么它不在下一页加载以前的值？

如何在隐藏字段中加载之前的值？？

function AddRemoveCustomer(id) {
  //$(".checkBoxClass").click(function (e) {
  alert('in main function');
  alert(id);

  var CustomerIDArray = [];
  var hidCID = document.getElementById("hfCustomerID");
  if (hidCID != null && hidCID != 'undefined') {
    var CustID = hidCID.value;
    CustomerIDArray = CustID.split("|");
    var currentCheckboxValue = id;
    var index = CustomerIDArray.indexOf(currentCheckboxValue);
    alert('index value:' + index);
    debugger;
    if (index == 0) {
      alert('if');
      CustomerIDArray.push(currentCheckboxValue);
      alert('pushed value:' + CustomerIDArray);
    } else {
      alert('else');
      var a = CustomerIDArray.splice(index, 1);
      alert("a" + a);

    }
    hidCID.value = CustomerIDArray.join("|");
    alert('Final' + hidCID.value);

  } else {
    alert('undefined');
  }
  //});
}

<table id="tblEmailScheduler" class="table-bordered col-offset-12">
  <thead>
    <tr class="label-primary">
      <th style="padding:5px 15px;">
        First Name
      </th>
      <th style="padding:5px 15px;">
        Last Name
      </th>
      <th style="padding:5px 15px;">
        Email ID
      </th>
      <th style="padding:5px 15px;">
        Customer Type
      </th>
      <th style="padding:5px 15px;">
        Customer Designation @Html.DropDownList("CustomerDesignation", new SelectList(ViewBag.SelectAllCustomerDesignationDDL, "Value", "Text"), new { id = "CustomerDesignationDDL" , name = "CustomerDesignationDDL" })
      </th>
      <th style="padding:5px 15px;">
        Select All
        <div class="checkbox control-group">
          <label><input type="checkbox" id="cbSelectAll" /></label>
        </div>
      </th>

    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2">
        EmailTemplate : @Html.DropDownList("EmailSubject", new SelectList(ViewBag.SelectAllEmailTemplateDDL, "Value", "Text"), new { id = "SelectAllEmailTemplateDDL" })
      </th>
      <th colspan="2">
        Set Date And Time:
        <input type="text" class="from-date-picker" readonly="readonly" />
      </th>
      <th colspan="2">
        <input type="submit" value="Schedule" id="btnSubmit" class="btn btn-default" />
      </th>
      <td>

      </td>
    </tr>
  </tfoot>
  @foreach (var item in Model) {
  <tr style="text-align:center">
    <td id="tblFirstName">
      @item.FirstName
    </td>
    <td id="tblLastName">
      @item.LastName
    </td>
    <td id="tblEmailID">
      @item.EmailID
    </td>
    <td id="tblCustomerType">
      @item.CustomerType
    </td>
    <td id="tblCustomerDesignation">
      @item.CustomerDesignation
    </td>
    <td>
      <div class="checkbox control-group">
        <label><input type="checkbox" id="@item.CustomerID" value="@item.CustomerID" 
        onclick="AddRemoveCustomer(@item.CustomerID)" class="checkBoxClass"/>
        @*@Html.CheckBox("Select", new { id = "cbCustomer", item.CustomerID})*@</label>
      </div>
    </td>
  </tr>
  }
</table>
<input type="hidden" id="hfCustomerID" />

Answer 1

在查看您的代码时，我注意到一个问题可能会导致您所指出的问题：

var index = CustomerIDArray.indexOf(currentCheckboxValue);

然后，您可以使用索引来确定 Id 是否在数组中，方法是：

if (index == 0) {

应该是

if (index == -1) {

-1 表示未找到。就目前的情况而言，它会达到这一点：

var a = CustomerIDArray.splice(index, 1);

并尝试拼接一个负索引，该索引从字符串的末尾向后移动，这会产生意想不到的结果。

Answer 2

您隐藏的 hfCustomerID 字段始终作为空字段呈现给浏览器，因为您没有将其绑定到您的 Model 中的任何内容。

我假设这个表格在一个表格中，该表格正在发布到您的控制器？如果是这样，那么您可以向您的模型添加一个新字段，然后使用@Html.HiddenFor 呈现一个隐藏的输入字段，该字段绑定到您模型中的该项目。

或者，看起来这个字段完全是根据勾选的复选框计算的？在这种情况下，请更新您的视图以设置隐藏字段的值（尽管这会复制 JavaScript 中的一些逻辑）。