我要在不重新加载整个页面的情况下将选定的列表框项目移动到另一个列表框。
在我的方案中,我使用整数值,并希望将选定的值发送到另一个列表框,反之亦然。
任何人都可以指导我如何做到这一点。
类代码
public class NumberClass
{
public IEnumerable<SelectListItem> leftnumbers { get; set; }
public IEnumerable<int> leftSelectednumbers { get; set; }
public IEnumerable<SelectListItem> rightnumbers { get; set; }
public IEnumerable<int> rightSelectednumbers { get; set; }
}
控制器代码
[HttpGet]
public ActionResult Index()
{
List<SelectListItem> items = new List<SelectListItem>();
for (int i = 1; i <= 20; i++)
{
SelectListItem selectList = new SelectListItem()
{
Text = i.ToString(),
Value = i.ToString()
};
items.Add(selectList);
}
NumberClass num = new NumberClass()
{
leftnumbers = items,
rightnumbers = null
};
return View(num);
}
[HttpPost]
public string Index(IEnumerable<int> selectedvalue)
{
if (selectedvalue == null)
{
return "you have not selected";
}
else
{
//
return;
}
}
Index.cshtml
@using (Html.BeginForm())
{
<div class="col-md-6" style="font-family:Arial">
@Html.ListBoxFor(m => m.leftSelectednumbers, Model.leftnumbers, new { size = 20, @class = "listBox" })
<br />
<input type="submit" value="move left" />
</div>
<div class="col-md-6" style="font-family:Arial">
@Html.ListBoxFor(m => m.leftSelectednumbers, new List<SelectListItem>(), new { size = 20, @class = "listBox" })
<br />
<input type="submit" value="move right" />
</div>
}
答案 0 :(得分:1)
我尝试将jQuery
用于您的需求句柄单击事件,并将所选内容附加到右侧。
为此,您应该使用javascript
而不是后端代码作为ADyson建议。
@model TestMVC.Controllers.NumberClass
@using (Html.BeginForm())
{
<div class="col-md-6" style="font-family:Arial">
@Html.ListBoxFor(m => m.leftSelectednumbers, Model.leftnumbers, new { size = 20, @class = "listBox" })
<br />
<input type="button" id="moveLeft" value="move left" />
</div>
<div class="col-md-6" style="font-family:Arial">
@Html.ListBoxFor(m => m.rightSelectednumbers, new List<SelectListItem>(), new { size = 20, @class = "listBox" })
<br />
<input type="button" value="move right" />
</div>
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$('#moveLeft').click(function () {
var leftselected = $('#leftSelectednumbers').val();
$.each(leftselected, function (key, value) {
$('#rightSelectednumbers').append($("<option></option>").attr("value", value).text(value));
});
})
</script>