Javascript 根据下拉列表中选择的用户id，获取完整日历中员工的进出时间

我想在完整日历中显示用户的及时和超时。每个用户都有不同的在时间上和在时间上。并且在下拉列表中选择用户id。现在我得到的下拉列表与用户名和用户id绑定，因此我必须将用户的登录时间和注销时间绑定到日历。这是我用数据绑定下拉列表的代码这是我的控制器代码，用于将下拉列表与用户id和用户名绑定

public ActionResult AttendanceScreen()
{
List<SelectListItem> userList = Getuser();
return View(userList);
}
[HttpPost]
public ActionResult AttendanceScreen(string ddlCustomers)
{
List<SelectListItem> userList = Getuser();
if (!string.IsNullOrEmpty(ddlCustomers))
{
SelectListItem selectedItem = userList.Find(p => p.Value == ddlCustomers);
ViewBag.Message = "Calender for Name: " + selectedItem.Text;
ViewBag.Message += "\\nID: " + selectedItem.Value;
}
return View(userList);
}
private static List<SelectListItem> Getuser()
{
RegMVCEntities entities = new RegMVCEntities();
List<SelectListItem> customerList = (from p in entities.tblRegistrations.AsEnumerable()
select new SelectListItem
{
Text = p.FName,
Value = p.UserId.ToString()
}).ToList();


//Add Default Item at First Position.
customerList.Insert(0, new SelectListItem { Text = "--Select Employee--", Value = "" });
return customerList;
}

显示日历时，我的视图代码为

public JsonResult GetEvents()
{
using (RegMVCEntities dc = new RegMVCEntities())
{
var events = dc.User_LogTime.ToList();
dc.Configuration.ProxyCreationEnabled = false;
dc.Configuration.LazyLoadingEnabled = false;
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}

<h2>Calender</h2>
<div id="calender"></div>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<button id="btnDelete" class="btn btn-default btn-sm pull-right">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
<button id="btnEdit" class="btn btn-default btn-sm pull-right" style="margin-right:5px;">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<p id="pDetails"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div id="myModalSave" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Save Event</h4>
</div>
<div class="modal-body">
<form class="col-md-12 form-horizontal">
<input type="hidden" id="hdEventID" value="0" />
@*<div class="form-group">
<label>Subject</label>
<input type="text" id="txtSubject" class="form-control" />
</div>*@
<div class="form-group">
<label>LoginTime</label>
<div class="input-group date" id="dtp1">
<input type="text" id="txtStart" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
@*<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" id="chkIsFullDay" checked="checked" /> Is Full Day event</label>
</div>
</div>*@
<div class="form-group" id="divEndDate" style="display:none">
<label>LogoutTime</label>
<div class="input-group date" id="dtp2">
<input type="text" id="txtEnd" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
@*<div class="form-group">
<label>Description</label>
<textarea id="txtDescription" rows="3" class="form-control"></textarea>
</div>*@
<div class="form-group">
<label>Theme Color</label>
<select id="ddThemeColor" class="form-control">
<option value="">Default</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
<option value="green">Green</option>
</select>
</div>
<button type="button" id="btnSave" class="btn btn-success">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
@section Scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function () {
debugger;

var event_array = [];

var selectedEvent = null;
FetchEventAndRenderCalendar();
function FetchEventAndRenderCalendar() {
events = [];
$.ajax({
url: "/Home/GetEvents",
data: "",
type: "GET",
dataType: "json",
async: false,
cache: false,
success: function (data) {
alert("success");

$.each(data, function (i, v) {
event_array.push({
userid: v.UserId,
start: moment(v.LoginTime),
end: moment(v.LogoutTime),

//start: moment(v.start),
//end: v.end != null ? moment(v.end) : null,
//color: v.themecolor,
//allday: v.isfullday
});

})

GenerateCalender(event_array);
},
error: function (error) {
alert('failed');
}
})
}

function GenerateCalender(event_array) {
debugger;
//$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: event_array,
eventClick: function (calEvent, jsEvent, view) {
selectedEvent = calEvent;
$('#myModal #eventTitle').text(calEvent.userid);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>LoginTime:</b>' + calEvent.logintime.format("DD-MMM-YYYY HH:mm a")));

$description.append($('<p/>').html('<b>LogoutTime:</b>' + calEvent.logouttime.format("DD-MMM-YYYY HH:mm a")));

//$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
//$('#myModal #pDetails').empty().html($description);

$('#myModal').modal();
},
//selectable: true,
//select: function (logintime, logouttime) {
// selectedEvent = {
//// userid: 0,
//// logintime: logintime,
//// logouttime: logouttime


//// };
//// openAddEditForm();
//// $('#calendar').fullCalendar('unselect');
////},
////editable: false,
eventDrop: function (event) {
var data = {
UserId: event.userid,
LoginTime: event.logintime.format('DD/MM/YYYY HH:mm A'),
LogoutTime: event.logouttime.format('DD/MM/YYYY HH:mm A')


};
SaveEvent(data);
}

});
}

压延机
&时代；
去除
编辑

接近
&时代；
保存事件
@*
主题
*@
登录时间
@*
这是一整天的活动
*@
注销时间
@*
描述
*@
主题色
违约
红色
蓝色
黑色
绿色
拯救
接近
@节脚本{
$（文档）.ready（函数（）{
调试器；
var事件_数组=[]；
var selectedEvent=null；
FetchEventAndRenderCalendar（）；
函数FetchEventAndRenderCalendar（）{
事件=[]；
$.ajax({
url:“/Home/GetEvents”，
数据：“，
键入：“获取”，
数据类型：“json”，
async:false，
cache:false，
成功：功能（数据）{
警惕（“成功”）；
$。每个（数据、功能（i、v）{
事件_array.push({
userid:v.userid，
开始：时刻（v.LoginTime），
结束：力矩（v.LogoutTime），
//开始：力矩（v.开始），
//结束：v.end！=null？力矩（v.end）：null，
//颜色：v.themecolor，
//全天
});
})
生成贷方（事件数组）；
},
错误：函数（错误）{
警报（“失败”）；
}
})
}
函数生成器贷方（事件数组）{
调试器；
//$（'日历'）.fullCalendar（'销毁'）；
$（“#日历”）.fullCalendar({
身高：400，
defaultDate:新日期（），
时间格式：“h（：mm）a'，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月、基本周、基本日、日程”
},
eventLimit：对，
eventColor:“#378006”，
事件：事件数组，
eventClick:函数（calEvent、jsEvent、view）{
selectedEvent=calEvent；
$（'#myModal#eventTitle'）.text（calEvent.userid）；
变量$description=$（''）；
$description.append（$（'
'）.html（'LoginTime:'+calEvent.LoginTime.format（“DD-MMM-YYYY HH:mm a”））；
$description.append（$（'
'）.html（'LogoutTime:'+calEvent.LogoutTime.format（“DD-MMM-YYYY HH:mm a”））；
//$description.append（$（'
'）.html（'description:'+calEvent.description））；
//$（'#myModal#pDetails'）.empty（）.html（$description）；
$（'#myModal'）.modal（）；
},
//是的，
//选择：功能（登录时间、登录时间）{
//selectedEvent={
////用户ID:0，
////登录时间：登录时间，
////logouttime:logouttime
//// };
////openAddEditForm（）；
////$（“#日历”）.fullCalendar（'unselect'）；
////},
////可编辑：false，
eventDrop:函数（事件）{
风险值数据={
UserId:event.UserId，
LoginTime:event.LoginTime.format（'DD/MM/YYYY HH:MM A'），
LogoutTime:event.LogoutTime.format（'DD/MM/YYYY HH:MM A'）
};
保存事件（数据）；
}
});
}

这是我当前页面的截图

考勤屏幕

---

是的，我只是在数据库中获取输入时间和输出时间，正如您在屏幕截图中所看到的，但这是针对数据库中的所有用户的。我只需要使用下拉列表中选择的用户id的输入时间和输出时间来更新日历。我已经完成了这项工作。很简单，我只需要使用会话来获取用户id。这是我的一个任务这是我的密码：

 public ActionResult AttendanceScreen(string ddlCustomers)
        {
            Session["userid"] = ddlCustomers;

            List<SelectListItem> userList = Getuser();
            if (!string.IsNullOrEmpty(ddlCustomers))
            {
                SelectListItem selectedItem = userList.Find(p => p.Value == ddlCustomers);
                ViewBag.Message = "Calender for Name: " + selectedItem.Text;
                ViewBag.Message += "\\nID: " + selectedItem.Value;
            }
            return View(userList);
           // return RedirectToAction("Index", "Nome", new { userid: userid });
        }
 public JsonResult GetEvents()
        {
            string username = User.Identity.Name;
            int isessionid = Convert.ToInt32(Session["userid"]);
            List<SelectListItem> userList = Getuser();
            if (isessionid == 0)
            {
                return null;
            }
            else
            {

                //int userid = int.Parse(username);

                RegMVCEntities svc = new RegMVCEntities();
                svc.Configuration.ProxyCreationEnabled = false;
                svc.Configuration.LazyLoadingEnabled = false;
               // var oCampaigns = svc.User_LogTime;
                var oReturn =
                       (from c in svc.User_LogTime.AsEnumerable()
                        where c.UserId == isessionid
                        select new 
                        {
                            LoginTime = c.LoginTime,
                            Logouttime = c.LogoutTime
                        }).ToList();
                //var events = dc.User_LogTime.ToList();
                //dc.Configuration.ProxyCreationEnabled = false;
                //   dc.Configuration.LazyLoadingEnabled = false;
                return new JsonResult { Data = oReturn.ToList(), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }



        }

public ActionResult AttendanceScreen（字符串）
{
会话[“userid”]=DDL客户；
List userList=Getuser（）；
如果（！string.IsNullOrEmpty（DDLCusters））
{
SelectListItem selectedItem=userList.Find（p=>p.Value==ddlcusters）；
ViewBag.Message=“名称日历：”+选择editem.Text；
ViewBag.Message+=“\\nID:”+selectedItem.Value；
}
返回视图（用户列表）；
//返回RedirectToAction（“Index”，“Nome”，new{userid:userid}）；
}
public JsonResult GetEvents（）
{
字符串username=User.Identity.Name；
int isessionid=Convert.ToInt32（会话[“userid]”）；
List userList=Getuser（）；
如果（isessionid==0）
{
返回null；
}
其他的
{
//int userid=int.Parse（用户名）；
RegMVCEntities svc=新的RegMVCEntities（）；
svc.Configuration.ProxyCreationEnabled=false；
svc.Configuration.LazyLoadingEnabled=false；
//var oCampaigns=svc.User\u LogTime；
风险回报=
（来自svc.User_LogTime.AsEnumerable（）中的c）
其中c.UserId==isessionid
选择新的
{
LoginTime=c.LoginTime，
Logouttime=c.Logouttime
}).ToList（）；
//var events=dc.User_LogTime.ToList（）；
//dc.Configuration.ProxyCreationEnabled=false；
//dc.Configuration.LazyLoadingEnabled=false；
返回新的JsonResult{Data=oReturn.ToList（），JsonRequestBehavior=JsonRequestBehavior.AllowGet}；
}
}

首先，您需要处理“更改”事件，并获取所选值。然后，您需要对GetEvents函数进行ajax调用并发送用户ID。修改GetEvents函数，使其可以选择接受ID，然后根据ID限制查询结果（如果提供了ID）。然后获取结果，从日历中删除现有事件并添加新的。这一过程的哪一部分给了你麻烦，确切地说？你似乎还没有尝试过这么做…对不起，我在ajax方面不是很好。我如何获得用户id，即

 public ActionResult AttendanceScreen(string ddlCustomers)
        {
            Session["userid"] = ddlCustomers;

            List<SelectListItem> userList = Getuser();
            if (!string.IsNullOrEmpty(ddlCustomers))
            {
                SelectListItem selectedItem = userList.Find(p => p.Value == ddlCustomers);
                ViewBag.Message = "Calender for Name: " + selectedItem.Text;
                ViewBag.Message += "\\nID: " + selectedItem.Value;
            }
            return View(userList);
           // return RedirectToAction("Index", "Nome", new { userid: userid });
        }
 public JsonResult GetEvents()
        {
            string username = User.Identity.Name;
            int isessionid = Convert.ToInt32(Session["userid"]);
            List<SelectListItem> userList = Getuser();
            if (isessionid == 0)
            {
                return null;
            }
            else
            {

                //int userid = int.Parse(username);

                RegMVCEntities svc = new RegMVCEntities();
                svc.Configuration.ProxyCreationEnabled = false;
                svc.Configuration.LazyLoadingEnabled = false;
               // var oCampaigns = svc.User_LogTime;
                var oReturn =
                       (from c in svc.User_LogTime.AsEnumerable()
                        where c.UserId == isessionid
                        select new 
                        {
                            LoginTime = c.LoginTime,
                            Logouttime = c.LogoutTime
                        }).ToList();
                //var events = dc.User_LogTime.ToList();
                //dc.Configuration.ProxyCreationEnabled = false;
                //   dc.Configuration.LazyLoadingEnabled = false;
                return new JsonResult { Data = oReturn.ToList(), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }



        }