Jquery 更新下拉列表更改事件的数据

在下拉列表中的更改事件中，我需要更新部分ViewModel和fullcalendar jquery插件上的事件。正在更新我正在使用的插件上的事件。但是我不明白更新ViewModel.Team视图的最佳方法。这是我的第一个MVC应用程序。它是MVC4。 这是我的标记。我对控件使用多个模型

<div id="manual_select_div" style="margin-top: 5px; border: 1px solid black; width: 100%; height: 50%">             
    <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>     
</div>
<div id='edit_calendar' style="float:right; width: 60%; height: 70%"></div> 

为了完整性…这是在document ready函数中初始化日历插件的方式：

$(document).ready(function () {     
// page is now ready, initialize the calendar...
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

//Get the group from the dropdown to populate calendar    
var groupSelected = $('#group_name_select').val();
var groupData = { iGroupID: groupSelected };

$('#edit_calendar').fullCalendar({
    header:
    {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    titleFormat: { month: 'MMMM' },
    defaultView: 'month',
    selectable: true,
    selectHelper: true,
    droppable: true,
    editable: true,
    eventSources: [
       {
           events: function (start, end, timezone, callback) {
               $.ajax({
                   type: "POST",
                   url: '@Url.Action("GetEventsForGroup", "Home")',
                   data: JSON.stringify(groupData),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (doc) {
                       var events = [];
                       $(doc).each(function () {
                           events.push({
                               title: $(this).attr('title'),
                               start: $(this).attr('start'),
                               end: $(this).attr('end'),
                               id: $(this).attr('eventID'),
                               objectID: $(this).attr('objectID'),
                               color: $(this).attr('color'),
                               textColor: 'black',
                               editable: true
                           });

                       });
                       callback(events);
                   },
                   error: function () {
                       alert("There was an error fetching events!")
                   }
               });
           }
       }
    ],
    eventResizeStart: function (event, jsEvent, ui, view) {
        console.log('RESIZE START ' + event.title);

    },
    eventResizeStop: function (event, jsEvent, ui, view) {
        console.log('RESIZE STOP ' + event.title);
    },

    eventResize: function (event, dayDelta, minuteDelta, revertFunc) {

        if (dayDelta >= 1 && !event.allDay) {
            revertFunc();

            for (var i = 0 ; i < dayDelta ; i++) {
                var newEvent = {
                    id: event.id,
                    objectID: event.objectID,
                    title: event.title,
                    color: event.color,
                    textColor: 'black',
                    start: new Date(event.start),
                    end: new Date(event.end),
                    allDay: event.allDay
                };

                newEvent.start.setDate(newEvent.start.getDate() + (i + 1));
                newEvent.end.setDate(newEvent.end.getDate() + (i + 1));
                $('#edit_calendar').fullCalendar('renderEvent', newEvent, 'stick');
            }
        }
    }
}); //end calendar initialization

//...other initialization stuff not relevant

}); //End document ready function

警报中将显示正确的名称。 控制器方法如下所示：

 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;
        }           
    }

public ActionResult更新成员（int-iGroupID）
{
DatabaseAccess onCallDA=新建DatabaseAccess（）；
DataTable tdtTeamInfo=新DataTable（）；
尝试
{
tdtTeamInfo=onCallDA.GetGroupMembersByGroupID（iGroupID）；
List team=tdtTeamInfo.AsEnumerable（）。选择（x=>new Member
{
组id=（字符串）（x[“GroupID”].ToString（）），
member_id=（字符串）（x[“MemberID”].ToString（）），
成员名称=（字符串）（x[“成员名称]），
成员颜色=（字符串）（x[“成员颜色”]）
}).ToList（）；
返回Json（team，JsonRequestBehavior.AllowGet）；
}
捕获（例外）
{
投
}           
}

我不知道如何在html中设置值。最初，我使用团队模型设置值：

<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>     

小组成员：
@foreach（Model.Team中的var成员）
{
@member.member\u名称
}

但是如何在jquerychange函数中设置上面的值呢

更新

我能够在变更事件中更新“div”，如下所示：

 $("#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!")
        }
});

$（“#组名_选择”）.change（函数（）{
var groupSelected=$（this.val（）；
var groupData={iGroupID:groupSelected}；
$.ajax({
类型：“POST”，
url:'@url.Action（“updateAmmembers”，“Home”），
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
数据：JSON.stringify（groupData），
成功：职能（团队）{
$（'div'）.remove（'draggable'）；
$（团队）。每个（功能）{
$（'#selectList'）.prepend（'+$（this.attr（'member#u name'））+''）；
});
},
错误：函数（）{
警报（“获取事件时出错！”）
}
});

div是可选择的，颜色和文本是正确的，但它们不可拖动。我检查了class属性是否设置正确，但无法拖动日历上的项目。

---

有人知道为什么它们不可拖动吗？当最初显示它们时，它们是可拖动的。

是的，您需要再次绑定此库，因为jQuery只绑定到存在的元素。我在这里回答-

您需要使用相同的代码，但我认为您不应该使用：

 $('div').remove('.draggable');

您应该将其更改为选择特定容器，因为现在您删除了页面中所有div的draggable

 $('#selectList > div').remove('.draggable');

 $("#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').remove('.draggable');

 $('#selectList > div').remove('.draggable');