Question

我在视图中有多个模型。其中一个模型就是这个div列表。这是标记：

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

我在控制器中初始化'Team'模型：

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？这是我的改变事件：

$("#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方法：

 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值，这些值会自动应用于标记吗？

我可以更新change事件中的'divs'，如下所示：

$("#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属性设置是否正确但我无法拖动日历上的项目。有谁知道为什么他们不可拖动？最初显示时，它们是可拖动的。

Answer 1

您无法从JavaScript更新C＃模型。您可以从JS更改您的视图（您在最后的代码中执行此操作 - 这是一种好方法）。

Draggable无法正常工作，因为您需要将可拖动库绑定或重新绑定到新元素。

my/directory/here/content

更新变更事件

1 个答案: