[英]Passing a dynamically generated string from a View to a Controller
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 http://codepen.io/cavanflynn/pen/mJoybE
HTML: 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: 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. 现在,我尝试使用
@Html.Hidden
在视图中隐藏此字符串,并使用@Html.Hidden
将其传递给控制器操作。
So I changed the html of the paragraph to: 所以我将段落的html更改为:
@Html.Hidden("selectedRows",new { @class="multiSel"})
and the JS to: 和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(', '));
});
But I am just getting { class="multiSel"}
passed to the controller in the string. 但是我只是在字符串
{ class="multiSel"}
传递给控制器。 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: 您正在传递
htmlAttribute
作为输入值,请考虑以下因素:
@Html.Hidden("selectedRows",null,new { @class="multiSel"})
instead of 代替
@Html.Hidden("selectedRows",new { @class="multiSel"})
And you need to change your JS code to: 而且您需要将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(', ')
);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.