我的视图中有两个列表框和提交按钮。列表框之间还有箭头按钮,可以将值从左向右移动,反之亦然。使用Jquery单击功能处理值的移位。我担心从最右边的列表框控件中检索值。以下是代码
列表框代码
@Html.ListBoxFor(m => m.SelectedExchangesIds, new MultiSelectList((IEnumerable<SelectListItem>)Model.SelectedExchanges, "Value", "Text"), new { id = "destinationExchanges", name = "destinationExchanges", @style = "width: 250px;height: 144px;", @CssClass = "MyListBox" })
将值从左向右移动列表框的Jquery代码
$('#ShiftUsersRight').click(function (e) {
$('#sourceUsers option:selected').appendTo('#destinationUsers');
e.preventDefault();
});
我还在视图中声明了一个隐藏字段,如下所示
@Html.HiddenFor(m => m.SelectedExchangesIds, "SelectedExchangesIds");
绑定到视图的视图模型包含属性
public IEnumerable<string> SelectedExchangesIds { get; set; }
因此,当我单击视图上的“提交”按钮时,将调用我的“编辑操作”方法,其中包含viewmodel作为参数。当我检查SelectedExchangesIds的值时,它是空字符串。
相反,如果我点击右箭头按钮,该代码名为ShiftUsersRight,如上所示,将填充SelectedExchangesIds属性。
这是怎么回事?为什么我不使用按钮时不会填充。
我的编辑操作按钮如下
[HttpPost]
public ActionResult Edit(SubscriptionViewModel model)
{
if (ModelState.IsValid) { }
}
有人可以告诉我出了什么问题。
好的我正在复制粘贴我的整个代码
我的观点代码
@model Avanade.Bureau.Subscription.Models.SubscriptionViewModel
@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Edit</h2>
<link href="~/Content/Site.css" rel="stylesheet" />
@*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*@
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.chkclass').click(function () {
var getchkid = $(this).attr('id');
var isChecked = $('#' + getchkid).is(':checked');
if ($('#' + getchkid).is(':checked') == true) {
$('#td' + $(this).val()).css("color", "white");
$('#td' + $(this).val()).css("background-color", "gray");
}
else {
$('#td' + $(this).val()).css("color", "black");
$('#td' + $(this).val()).css("background-color", "white");
}
});
$('#chk10').click(function (event) { //on click
if (this.checked) { // check select status
$('.chkclass').each(function () { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
$('#td' + $(this).val()).css("color", "white");
$('#td' + $(this).val()).css("background-color", "gray");
});
} else {
$('.chkclass').each(function () { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
$('#td' + $(this).val()).css("color", "black");
$('#td' + $(this).val()).css("background-color", "white");
});
}
});
$('#sourceUsers').click(function (e) {
//$("#sourceItems").css("background-color", "gray");
$('option:selected').css('color', 'white');
$('option:selected').css('backgroundColor', 'gray');
//$('#sourceItems option:selected').css("color", "white");
//$('#sourceItems option:selected').css("background-color", "gray");
e.preventDefault();
});
$('#destinationUsers').click(function (e) {
//$("#sourceItems").css("background-color", "gray");
$('option:selected').css('color', 'white');
$('option:selected').css('backgroundColor', 'gray');
//$('#sourceItems option:selected').css("color", "white");
//$('#sourceItems option:selected').css("background-color", "gray");
e.preventDefault();
});
$('#ShiftExchangesRight').click(function (e) {
$('#sourceExchanges option:selected').appendTo('#destinationExchanges');
e.preventDefault();
});
$('#ShiftExchangesLeft').click(function (e) {
$('#destinationExchanges option:selected').appendTo('#sourceExchanges');
e.preventDefault();
});
$('#ShiftExchangesRightAll').click(function (e) {
$('#sourceExchanges option').appendTo('#destinationExchanges');
e.preventDefault();
});
$('#ShiftExchangesLeftAll').click(function (e) {
$('#destinationExchanges option').appendTo('#sourceExchanges');
e.preventDefault();
});
$('#ShiftUsersRight').click(function (e) {
$('#sourceUsers option:selected').appendTo('#destinationUsers');
e.preventDefault();
});
$('#ShiftUserssLeft').click(function (e) {
$('#destinationUsers option:selected').appendTo('#sourceUsers');
e.preventDefault();
});
$('#ShiftUsersRightAll').click(function (e) {
$('#sourceUsers option').appendTo('#destinationUsers');
e.preventDefault();
});
$('#ShiftUserssLeftAll').click(function (e) {
$('#destinationUsers option').appendTo('#sourceUsers');
e.preventDefault();
});
});
</script>
<h2>Subscription Details</h2>
<div>
@using (Html.BeginForm("Edit", "Edit", FormMethod.Post, new { name = "myForm1", id = "myForm1" }))
{
<input type="hidden" id="postedUsers" name="postedUsers" />
<input type="hidden" id="postedExchanges" name="postedExchanges" />
@Html.HiddenFor(m => m.SubscriptionTypeId, "SubscriptionTypeId");
@Html.HiddenFor(m => m.CompanyId, "CompanyId");
<div id="test"></div>
<div class="Table">
<div class="Row">
<div class="borderlessCell" style="vertical-align:top">
<p>@Html.Label("Subscription Type")</p>
</div>
<div class="borderlessCell" style="vertical-align:top">
<p>
@Html.DisplayFor(m => m.SusbcriptionName, new { id = "lblSubscriptionType", name = "lblSubscriptionType" })
</p>
</div>
</div>
<div class="Row">
<div class="borderlessCell">
</div>
<div class="borderlessCell">
<p>@Html.Label("Available Exchanges")</p>
</div>
<div class="borderlessCell">
</div>
<div class="borderlessCell">
<p>@Html.Label("Selected Exchanges")</p>
</div>
</div>
<div class="Row">
<div class="borderlessCell" style="vertical-align:top">
<p>@Html.Label("List of Exchanges")</p>
</div>
<div class="borderlessCell" style="vertical-align:top">
@Html.ListBoxFor(m => m.AvailableExchangesIds, new MultiSelectList((IEnumerable<SelectListItem>)Model.AvailableExchanges, "Value", "Text"), new { id = "sourceExchanges", name = "sourceExchanges", @style = "width:250px;height: 144px;", @CssClass = "MyListBox" })
</div>
<div class="borderlessCell">
<div class="Row">
<input type="submit" id="ShiftExchangesRight" value=">" style="vertical-align:top" />
</div>
<div class="Row">
<input type="submit" id="ShiftExchangesRightAll" value=">>" style="vertical-align:middle" />
</div>
<div class="Row">
<input type="submit" id="ShiftExchangesLeft" value="<" style="vertical-align:middle" />
</div>
<div class="Row">
<input type="submit" id="ShiftExchangesLeftAll" value="<<" style="vertical-align:bottom" />
</div>
</div>
<div id="selector" class="borderlessCell">
@Html.ListBoxFor(m => m.SelectedExchangesIds, new MultiSelectList((IEnumerable<SelectListItem>)Model.SelectedExchanges, "Value", "Text"), new { id = "destinationExchanges", name = "destinationExchanges", @style = "width: 250px;height: 144px;", @CssClass = "MyListBox" })
</div>
</div>
<div class="Row">
<div class="borderlessCell">
</div>
<div class="borderlessCell">
<p>@Html.Label("Available Users")</p>
</div>
<div class="borderlessCell">
</div>
<div class="borderlessCell">
<p>@Html.Label("Suscribed Users")</p>
</div>
</div>
<div class="Row">
<div class="borderlessCell" style="vertical-align:top">
<p>@Html.Label("List of Recipients")</p>
</div>
<div class="borderlessCell" style="vertical-align:top">
@Html.ListBoxFor(m => m.AvailableUsersIds, new MultiSelectList((IEnumerable<SelectListItem>)Model.AvailableUsers, "Value", "Text"), new { id = "sourceUsers", name = "sourceUsers", @style = "width:250px;height: 144px;", @CssClass = "MyListBox" })
</div>
<div class="borderlessCell" style="vertical-align:middle">
<p>
<input type="submit" id="ShiftUsersRight" value=">" />
</p>
<p>
<input type="submit" id="ShiftUsersRightAll" value=">>" />
</p>
<p>
<input type="submit" id="ShiftUsersLeft" value="<" />
</p>
<p>
<input type="submit" id="ShiftUsersLeftAll" value="<<" />
</p>
</div>
<div id="selector" class="borderlessCell">
@Html.ListBoxFor(m => m.SelectedUsersIds, new MultiSelectList((IEnumerable<SelectListItem>)Model.SelectedUsers, "Value", "Text"), new { id = "destinationUsers", name = "destinationUsers", @style = "width: 250px;height: 144px;", @CssClass = "MyListBox" })
</div>
</div>
<div class="Row">
<div class="borderlessCell">
<input type="submit" name="btn_Subscribe" value="Edit" />
</div>
</div>
</div>
}
</div>
我的控制器代码
[HttpPost]
public ActionResult Edit(SubscriptionViewModel model)
{
if (ModelState.IsValid)
{
using (BUREAUEntities bureauEntities = new BUREAUEntities())
{
string[] stringSeparators = new string[] { "," };
if (model.SelectedUsersIds != null)
{
string[] postedUsersArray = model.SelectedUsersIds.ToArray();
string[] postedExchangesArray = model.SelectedExchangesIds.ToArray();
int[] postedUsers = Array.ConvertAll(postedUsersArray, int.Parse);
int[] postedExchanges = Array.ConvertAll(postedExchangesArray, int.Parse);
Avanade.Bureau.DataAccessLayer.DatabaseModel.Subscription a = new DataAccessLayer.DatabaseModel.Subscription
{
SubscriptionTypeId = model.SubscriptionTypeId,
IsScheduledNotification = false,
Active = true,
NotificationFrequencyInMinutes = 12,
Exchanges = GetExchanges(postedExchanges, bureauEntities),
Users = GetUsers(postedUsers, bureauEntities),
CompanyId = model.CompanyId
};
bureauEntities.Subscriptions.Add(a);
bureauEntities.SaveChanges();
}
}
}
return RedirectToAction("Index", "Home");
}
我的视图模型代码
public class SubscriptionViewModel
{
public string PostedUsers { get; set; }
public string PostedExchanges { get; set; }
public int SubscriptionId { get; set; }
public int SubscriptionTypeId { get; set; }
public int CompanyId { get; set; }
public string SusbcriptionName { get; set; }
public string FullName { get; set; }
public string UserSelection { get; set; }
public IEnumerable<SelectListItem> AvailableExchanges { get; set; }
public IEnumerable<SelectListItem> SelectedExchanges { get; set; }
public IEnumerable<SelectListItem> AvailableUsers { get; set; }
public IEnumerable<SelectListItem> SelectedUsers { get; set; }
public IEnumerable<string> AvailableExchangesIds { get; set; }
public IEnumerable<string> AvailableUsersIds { get; set; }
public IEnumerable<string> SelectedExchangesIds { get; set; }
public IEnumerable<string> SelectedUsersIds { get; set; }
}
答案 0 :(得分:-1)
要解决此问题,首先必须了解模型绑定器的工作原理。在下面的帖子中有更好的解释:
由于 Ramakrishna Ganesh
....快乐编码