你如何MVC移动项目悫两个ListBox - JQuery的不工作 [英] How do you move items betwen two listboxes on MVC - JQuery not working
本文介绍了你如何MVC移动项目悫两个ListBox - JQuery的不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经看过其他关于这个主题的SO，他们最终会被无论是真的老了，或者使用的WebForms。我有，我有两个列表框的MVC视图。我想移动项目来回两个列表框之间。该观点是：
@using（Html.BeginForm（））
{
@ Html.ListBoxFor（M = GT; m.SelectedAttributes，Model.Attributes，新{ID =listBoxAvail，SIZE = 5}） ＆LT;输入类型=提交名称=加上
ID =添加VALUE =MoveRight的/＆GT; ＆LT;输入类型=提交名称=删除
ID =删除VALUE =MoveLeft/＆GT; @ Html.ListBoxFor（M = GT; m.SelectedAttributes2，Model.SelectedItems，新{ID =listBoxSel，SIZE = 5}）
}
该视图模型是：
公共类OptInViewModel
{
公共IEnumerable的＆LT;串GT; SelectedAttributes {搞定;组; }
公共IEnumerable的＆LT;串GT; SelectedAttributes2 {搞定;组; }
公共IEnumerable的＆LT; SelectListItem＆GT;属性{搞定;组; }
公共IEnumerable的＆LT; SelectListItem＆GT; SelectedItems {搞定;组; }
}和控制器code是： 公众的ActionResult指数（）
{
AttributeEntities DB =新AttributeEntities（）;
清单＆LT; SelectListItem＆GT; listSelectListItems =新的List＆LT; SelectListItem＆GT;（）;
清单＆LT; SelectListItem＆GT; listSelItems =新的List＆LT; SelectListItem＆GT;（）; 的foreach（VAR在db.HarmonyAttributes属性）
{
SelectListItem选择列表=新SelectListItem
{
文= attributes.AttributeName，
值= attributes.AtrributeLabel，
选择= FALSE
};
listSelectListItems.Add（选择列表）;
} 的foreach（在db.SelectedHarmonyAttributes VAR SEL）
{
SelectListItem selList =新SelectListItem
{
文= sel.CustomLabel，
值= sel.HarmonyAttribute_ID.ToString（），
选择= FALSE
};
listSelectListItems.Add（selList）;
} OptInViewModel视图模型=新OptInViewModel
{
属性= listSelectListItems，
SelectedItems = listSelItems
};
返回视图（视图模型）;
}
我用jQuery来尝试这样做，但它不工作（没有被转移到第二个列表框）。任何人都kinow有什么不对？
＆LT;脚本SRC =〜/脚本/ jQuery的-2.1.1.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
$（函数（）{
$（加）。点击（函数（）{
$（＃listBoxAvail＆GT;选项：选择）。每个（函数（）{
$（这）一个.remove（）appendTo（＃listBoxSel）;
}）;
}）; $（删除）。点击（函数（）{
$（＃listBoxSel＆GT;选项：选择）。每个（函数（）{
$（这）一个.remove（）appendTo（＃listBoxAvail）;
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
解决方案
您可以使用的jQuery的 jQuery的-双列表框插件。它需要一些设置，但随后的作品不够好于MVC环境。一个需要注意的是，为了在被回发到服务器进行处理的第二个列表框中选定的值，你需要确保在列表框中的所有项目都是选前表单被提交。
例如。为您的标记：
＆LT;脚本SRC =jQuery.dualListBox-1.3.js类型=文/ JavaScript的/＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
$ .configureBoxes（{
box1View：listBoxAvail'，
box2View：listBoxSel'，
TO1：删除，
TO2：添加，
allTo1：去掉，所有的'，//你必须创建这个按钮
allTo2：附加所有'，//你必须创建这个按钮
useFilters：假的
}）;
}）;
$（＃listBoxSel）。最接近（形式）。在（提交，
功能（）{
//在列表框中唯一入选的高级选项调回！
$（＃listBoxSel＆GT;选项）丙（选中，真）。
返回true;
}
}
＆LT; / SCRIPT＆GT;
I have looked at other SO topics on this and they end up being either really old or using WebForms. I have an MVC view in which I have two listboxes. I want to move items back and forth between the two listboxes. The View is:
@using (Html.BeginForm())
{
@Html.ListBoxFor(m => m.SelectedAttributes, Model.Attributes, new {id="listBoxAvail", SIZE = 5} )
<input type="submit" name="add"
id="add" value="MoveRight" />
<input type="submit" name="remove"
id="remove" value="MoveLeft" />
@Html.ListBoxFor(m => m.SelectedAttributes2, Model.SelectedItems, new { id = "listBoxSel", SIZE = 5})
}
The ViewModel is:
public class OptInViewModel
{
public IEnumerable<string> SelectedAttributes { get; set; }
public IEnumerable<string> SelectedAttributes2 { get; set; }
public IEnumerable<SelectListItem> Attributes { get; set; }
public IEnumerable<SelectListItem> SelectedItems { get; set; }
}
And the Controller code is:
public ActionResult Index()
{
AttributeEntities db = new AttributeEntities();
List<SelectListItem> listSelectListItems = new List<SelectListItem>();
List<SelectListItem> listSelItems = new List<SelectListItem>();
foreach (var attributes in db.HarmonyAttributes)
{
SelectListItem selectList = new SelectListItem
{
Text = attributes.AttributeName,
Value = attributes.AtrributeLabel,
Selected = false
};
listSelectListItems.Add(selectList);
}
foreach (var sel in db.SelectedHarmonyAttributes)
{
SelectListItem selList = new SelectListItem
{
Text = sel.CustomLabel,
Value = sel.HarmonyAttribute_ID.ToString(),
Selected = false
};
listSelectListItems.Add(selList);
}
OptInViewModel viewModel = new OptInViewModel
{
Attributes = listSelectListItems,
SelectedItems = listSelItems
};
return View(viewModel);
}
I used JQuery to try to do this but it's not working (nothing gets transferred to 2nd listbox). Anyone kinow what's wrong?
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script>
$(function () {
$("add").click(function () {
$("#listBoxAvail > option:selected").each(function () {
$(this).remove().appendTo("#listBoxSel");
});
});
$("remove").click(function () {
$("#listBoxSel > option:selected").each(function () {
$(this).remove().appendTo("#listBoxAvail");
});
});
});
</script>
解决方案
You can use the jQuery-Dual-Listbox plugin for jQuery. It requires a bit of setup but then works well enough in the MVC environment. One caveat is that in order for your selected values in the 2nd listbox to be posted back to the server for processing, you need to ensure that all items in that listbox are selected before the form gets submitted.
e.g. for your markup:
<script src="jQuery.dualListBox-1.3.js" type="text/javascript"/>
<script type="text/javascript">
$(function () {
$.configureBoxes({
box1View: 'listBoxAvail',
box2View: 'listBoxSel',
to1: 'remove',
to2: 'add',
allTo1: 'remove-all', //you must create this button
allTo2: 'add-all', //you must create this button
useFilters: false
});
});
$("#listBoxSel").closest("form").on("submit",
function() {
//only selected options in listbox get POSTed back!
$("#listBoxSel > option").prop("selected", true);
return true;
}
}
</script>
这篇关于你如何MVC移动项目悫两个ListBox - JQuery的不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
