jQuery技术:将动态生成的字符串从View传递给Controller

我正在使用复选框动态创建其值的字符串,仅在选中复选框时才添加关联值。 值以逗号分隔。

这是一个代码显示我如何做到这一点:

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

HTML:

 

使用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 "" + text + ""; }).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")) {  @Html.Hidden("selectedRows",null,new { @class="multiSel"})  } 

控制器动作:

 [HttpPost] public ActionResult RunQuery(string selectedRows) { } 

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

      以上就是jQuery教程分享将动态生成的字符串从View传递给Controller相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/524425.html

      (0)
      上一篇 2020年12月13日
      下一篇 2020年12月13日

      精彩推荐