在变更事件上更新模型的一部分 [英] Update part of a model on change event
问题描述
我在视图中有多个模型.其中一个模型是此div列表.这是标记:
I have a multiple models in a view. One of the models is a this list of divs. This is the markup:
<div id="selectList">
<label id="team_lbl">Team Members: </label>
@foreach (var member in Model.Team)
{
<div id="@member.member_id.ToString()" style="font-weight:bold; background-color:@member.member_color" class="draggable"
data-event='{"title":"@member.member_name", "color":"@member.member_color"}'>@member.member_name</div>
}
</div>
我在控制器中初始化团队"模型:
I initialize the 'Team' model in the controller:
public ActionResult EditSchedule()
{
string tstrUserID = string.Empty;
EditScheduleViewModel editScheduleModel = new EditScheduleViewModel();
try
{
//Get the UserID value
tstrUserID = ParseUserID(this.User.Identity.Name);
DataTable tdtTeamInfo = new DataTable();
List<string> tlstGroupIDs = new List<string>();
//Database calls to get all of the data
//Get the group information that user has the admin rights to edit schedule
tdtGroupInfo = onCallDA.GetGroupByUserID(tstrUserID);
//Get Team information using first groupID
int tiGroupID = tdtGroupInfo.Select().First().Field<int>("ID");
tdtTeamInfo = onCallDA.GetGroupMembersByGroupID(tiGroupID);
//Populate the ViewModel
List<Group> groups = tdtGroupInfo.AsEnumerable().Select(x => new Group
{
id = (string)(x["ID"].ToString()),
name = (string)(x["Name"]),
color = (string)(x["GroupColor"])
}).ToList();
editScheduleModel.Groups = groups;
List<Member> team = tdtTeamInfo.AsEnumerable().Select(x => new Member
{
group_id = (string)(x["GroupID"].ToString()),
member_id = (string)(x["MemberID"].ToString()),
member_name = (string)(x["MemberName"]),
member_color = (string)(x["MemberColor"])
}).ToList();
editScheduleModel.Team = team;
return View(editScheduleModel);
}
catch(Exception ex)
{
return View("Error");
}
}
我有一个下拉列表，更改后，我需要更新团队成员.如何使用AJAX调用更新ViewModel? 这是我的变更事件:
I have a dropdown list and when that is changed I need to update the team members. How do you update the ViewModel using an AJAX call? This is my change event:
$("#group_name_select").change(function(){
var groupSelected = $(this).val();
var groupData = { iGroupID: groupSelected };
$.ajax({
type: "POST",
url: '@Url.Action("UpdateTeamMembers", "Home")',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(groupData),
success: function (team) {
$(team).each(function () {
$('#selectList > div').attr('id', $(this).attr('member_id'));
$('#selectList > div').text($(this).attr('member_name'));
//alert('Team member: ' + $(this).attr('member_name'));
});
},
error: function() {
alert("There was an error fetching events!")
}
});
这是UpdateTeamMembers方法:
This is the UpdateTeamMembers method:
public ActionResult UpdateTeamMembers(int iGroupID)
{
DatabaseAccess onCallDA = new DatabaseAccess();
DataTable tdtTeamInfo = new DataTable();
try
{
tdtTeamInfo = onCallDA.GetGroupMembersByGroupID(iGroupID);
List<Member> team = tdtTeamInfo.AsEnumerable().Select(x => new Member
{
group_id = (string)(x["GroupID"].ToString()),
member_id = (string)(x["MemberID"].ToString()),
member_name = (string)(x["MemberName"]),
member_color = (string)(x["MemberColor"])
}).ToList();
return Json(team, JsonRequestBehavior.AllowGet);
}
catch(Exception)
{
throw;
}
}
我需要更新Model.Team值.有没有一种方法可以更新Model.Team值，这些值将自动应用于标记?
I need to update the Model.Team values. Is there a way to update the Model.Team values and those will automatically be applied to the markup?
我可以在change事件中更新"div"，如下所示:
I am able to update the 'divs' within the change event as shown below:
$("#group_name_select").change(function(){
var groupSelected = $(this).val();
var groupData = { iGroupID: groupSelected };
$.ajax({
type: "POST",
url: '@Url.Action("UpdateTeamMembers", "Home")',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(groupData),
success: function(team) {
$('div').remove('.draggable');
$(team).each(function () {
$('#selectList').prepend('<div id="' + $(this).attr('member_id') + '" style="font-weight:bold; background-color:' + $(this).attr('member_color') + '" class="draggable" data-event=\'{"title":"' + $(this).attr('member_name') + '", "color":"' + $(this).attr('member_color') + '"}\'>' + $(this).attr('member_name') + '</div>');
});
},
error: function() {
alert("There was an error fetching events!")
}
});
div是可选的，颜色和文本正确，但不可拖动.我检查了class属性的设置是否正确，但是无法拖动日历上的项目. 有谁知道为什么他们不能拖动?最初显示时，它们是可拖动的.
The divs are selectable and the color and text is correct but they are not draggable. I checked that the class attribute is set correctly but I cannot drag the items on the calendar. Does anyone have any idea why they are not draggable? When initially displayed they are draggable.
推荐答案
您无法通过JavaScript更新C#模型.您可以从JS更改视图(您可以在最后的代码中完成此操作-这是一种好方法).
You can't updated your C# Model from JavaScript. You can change your view from JS (you do that in last your code - this is good way).
Draggable不起作用，因为您需要将可拖动库绑定或重新绑定到新元素.
Draggable isn't working because you need bind or rebind draggable library to new elements.
success: function(team) {
$('div').remove('.draggable');
$(team).each(function () {
$('#selectList').prepend('<div id="' + $(this).attr('member_id') + '" style="font-weight:bold; background-color:' + $(this).attr('member_color') + '" class="draggable" data-event=\'{"title":"' + $(this).attr('member_name') + '", "color":"' + $(this).attr('member_color') + '"}\'>' + $(this).attr('member_name') + '</div>');
});
$("#selectList #draggable").draggable();
},
这篇关于在变更事件上更新模型的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
