將動態生成的字符串從視圖傳遞到控制器

Question

我正在使用復選框動態創建其值的字符串，如果選中該復選框，則僅添加關聯的值。 這些值以逗號分隔。

這是顯示我如何執行此操作的代碼筆：

http://codepen.io/cavanflynn/pen/mJoybE

HTML：

<dl class="dropdown"> 
    <dt>
        <a href="#">
            <span class="hida">▼</span>     
        </a>
    </dt>
    <dd>
        <div class="mutliSelect">
            <ul class="ul">
                <li>
                    <input type="checkbox" value="Test 1" />PO Number
                </li>
                <li>
                    <input type="checkbox" value="ReturnAuthNumber" />RA Number
                </li>
                <li>
                    <input type="checkbox" value="StatusId" />Status
                </li>
                <li>
                    <input type="checkbox" value="ManufacturerId" />Manufacturer
                </li>
            </ul>
        </div>
    </dd>
</dl>
<p class="multiSel"></p>  

Javascript：

$(".dropdown dt a").on('click', function () {
      $(".dropdown dd ul").slideToggle('fast');
  });

  $(".dropdown dd ul li a").on('click', function () {
      $(".dropdown dd ul").hide();
  });

  function getSelectedValue(id) {
       return $("#" + id).find("dt a span.value").html();
  }

  $(document).bind('click', function (e) {
      var $clicked = $(e.target);
      if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
  });


  $('.mutliSelect').on('click', function () {
      $('p.multiSel').html(
           $(this).find('input[type="checkbox"]:checked')
           .map(function(idx, elem) {
               return $(elem).parent().text().trim();
           })
           .get().map(function(text) {
               return "<span>" + text + "</span>";
           }).join(', '));
  });

現在，我嘗試使用@Html.Hidden在視圖中隱藏此字符串，並使用@Html.Hidden將其傳遞給控制器​​操作。

所以我將段落的html更改為：

@Html.Hidden("selectedRows",new { @class="multiSel"})

和JS可以：

  $('.mutliSelect').on('click', function () {
      $('multiSel').html(
          $(this).find('input[type="checkbox"]:checked')
          .map(function(idx, elem) {
              return $(elem).parent().text().trim();
          }).get().map(function(text) {
              return text;
          }).join(', '));
  });

但是我只是在字符串{ class="multiSel"}傳遞給控制器​​。 我知道我在這里丟失了片段，但是調整它以將隱藏的字符串傳遞給控制器​​的最佳方法是什么。

表格提交：

@using (Html.BeginForm("RunQuery","Report"))
{
    <dl class="dropdown"> 
        <dt>
            <a href="#">
                <span class="hida">▼</span>     
            </a>
        </dt>
        <dd>
            <div class="mutliSelect">
                <ul class="ul">
                     <li>
                         <input type="checkbox" value="Test 1" />PO Number
                      </li>
                      <li>
                         <input type="checkbox" value="ReturnAuthNumber" />RA Number
                      </li>
                      <li>
                         <input type="checkbox" value="StatusId" />Status
                      </li>
                      <li>
                         <input type="checkbox" value="ManufacturerId" />Manufacturer
                      </li>
                  </ul>
              </div>
          </dd>
      </dl>

      @Html.Hidden("selectedRows",null,new { @class="multiSel"})
      <button type="submit" class="btn btn-primary" id="btnGo">Go</button>
}

控制器動作：

[HttpPost]
public ActionResult RunQuery(string selectedRows)
{

}

Answer 1

您正在傳遞htmlAttribute作為輸入值，請考慮以下因素：

@Html.Hidden("selectedRows",null,new { @class="multiSel"})

代替

@Html.Hidden("selectedRows",new { @class="multiSel"})

而且您需要將JS代碼更改為：

$('.mutliSelect').on('click', function () {
    $('#selectedRows').val(
        $(this).find('input[type="checkbox"]:checked')
            .map(function(idx, elem) {
                return $(elem).parent().text().trim();
            })
           .get().map(function(text) {
               return text;
           }).join(', ')
       );
   });