将动态生成的字符串从View传递给Controller [英] Passing a dynamically generated string from a View to a Controller

问题描述

我正在使用复选框来动态创建其值的字符串，只有在复选框被选中时才添加相关的值。这些值用逗号分隔。

这是一个codepen，显示我是如何做到这一点的：

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 =checkboxvalue =Test 1/>采购订单编号
< / li> 
< li> 
< input type =checkboxvalue =ReturnAuthNumber/> RA编号
< / li> 
< li> 
< input type =checkboxvalue =StatusId/>状态
< / li> 
< li> 
< input type =checkboxvalue =ManufacturerId/>制造商
< / li> 
< / ul> 
< / div> 
< / dd> 
< / dl> 
< p class =multiSel>< / p> 
  

Javascript：

 < （'。'）; 
（'。dropdown dd a）。 }）; （'。click'，function（）{
 $（。dropdown dd ul）。hide（）; $ b（。dropdown dd ul li a）。 $ b}）; 
 
函数getSelectedValue（id）{
 return $（＃+ id）.find（dt a span.value）。html（）; 
 
 $ b $（document）.bind（'click'，function（e）{
 var $ clicked = $（e.target）; 
 if（ ！$ clicked.parents（）。hasClass（dropdown））$（。dropdown dd ul）。hide（）; 
}）; （'click'，function（）{
 $（'p.multiSel'）。html（
 $（'。mutliSelect'）。 （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更改为：

  @ Html.Hidden（selectedRows，new {@ class =multiSel}）
  

和JS到：

  $（'。 （'click'，function（）{
 $（'multiSel'）。html（
 $（this）.find（'input [type =checkbox]：checked' ）
 .map（function（idx，elem）{
 return $（elem）.parent（）。text（）。trim（）; 
}）。get（）。map（函数（文本）{
返回文本; 
}）。join（'，'））; 
}）; 
  

但我只是收到 {class =multiSel} 传递给字符串中的控制器。我知道我在这里缺少件，但是调整这个以将隐藏的字符串传递给控制器​​的最好方法是什么。

表单提交：

  @using（Html.BeginForm（RunQuery，Report））
 {
 
< dt> 
< a href =＃> 
< span class =hida>▼< / span> 
< / a> 
< / dt> 
< dd> 
< div class =mutliSelect> 
< ul class =ul> 
< li> 
< input type =checkboxvalue =Test 1/>采购订单编号
< / li> 
< li> 
< input type =checkboxvalue =ReturnAuthNumber/> RA编号
< / li> 
< li> 
< input type =checkboxvalue =StatusId/>状态
< / li> 
< li> 
< input type =checkboxvalue =ManufacturerId/>制造商
< / li> 
< / ul> 
< / div> 
< / dd> 
< / dl> 
 
 @ Html.Hidden（selectedRows，null，new {@ class =multiSel}）
< button type =submitclass =btn btn-primaryid = btnGo > GO< /按钮> 
 
 $ / code $ / pre 
 
 
控制器动作：
 
 < pre $ 
 
 $ public $ {
 $ public $ {
 
 
 $ public $ {
 $ 




解决方案

传递 htmlAttribute 作为输入值， ：

  @ Html.Hidden（selectedRows，null，new {@ class =multiSel}）
  

而不是

  @ Html.Hidden（selectedRows，new {@ class =multiSel}）
  

您需要将您的JS代码更改为：

$（b）

  $（'。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）{
返回文本; 
}） .join（'，'）
）; 
}）; 
  

I am using checkboxes to dynamically create a string of their values, only adding the associated value if the checkbox is selected. The values are comma separated.

Here is a codepen showing how I am doing this:

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(', '));
  });

Now, I am trying to hide this string in a view using @Html.Hidden and pass it to a controller action using a form.

So I changed the html of the paragraph to:

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

and the JS to:

  $('.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(', '));
  });

But I am just getting { class="multiSel"} passed to the controller in the string. I know I am missing pieces here, but what would be the best way to adjust this to pass the hidden string to the controller.

Form Submit:

@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>
}

Controller Action:

[HttpPost]
public ActionResult RunQuery(string selectedRows)
{

}

解决方案

You are passing htmlAttribute as input value consider this:

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

instead of

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

And you need to change your JS code to:

$('.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(', ')
       );
   });

这篇关于将动态生成的字符串从View传递给Controller的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！