回发后ViewModel没有正确填充
本文关键字：填充 ViewModel | 更新日期: 2023-09-27 18:08:56
我有两个列表框和提交按钮在我的视图。列表框之间也有箭头按钮，用于将值从左移到右，反之亦然。使用Jquery的click函数来处理值的移动。我关心的是从最右边的列表框控件检索值。下面是代码
列表框代码@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; }
因此，当我单击视图上的提交按钮时，我的Edit Action方法被调用，其中包含viewmodel作为参数。当我检查SelectedExchangesIds的值时，它是空字符串。
相反，如果我单击代码为ShiftUsersRight的右箭头按钮，就会填充SelectedExchangesIds属性。
这是怎么发生的，为什么它不填充当我不使用按钮。
我的编辑动作按钮如下
[HttpPost]
public ActionResult Edit(SubscriptionViewModel model)
{
if (ModelState.IsValid) { }
}
复制粘贴整个代码到
下面my view的代码
@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; }
}
要解决这个问题，首先必须了解模型绑定器是如何工作的。下面的文章解释得更好:
http://weblog.west-wind.com/posts/2012/Apr/20/ASPNET-MVC-Postbacks-and-HtmlHelper-Controls-ignoring-Model-Changes谢谢室利罗摩克里希纳Ganesh
…快乐编码