动态绑定数据dhtmlx calendar mvc

时间:2015-10-28 10:13:52

标签: asp.net-mvc calendar dhtmlx

我目前在使用MVC的应用程序中使用DHTMLX日历。 现在我默认加载所有事件,如下所示:

 public ActionResult Index()
            {

                var scheduler = new DHXScheduler(this);

                scheduler.LoadData = true;
                scheduler.EnableDataprocessor = true;
                ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");

                return View(scheduler);
            }

        /* public ContentResult Data()
                {  
              var data = new SchedulerAjaxData(new TimesheetEventDataContext().Events);
               ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");              
              return (ContentResult)data;
            }*/
     public ContentResult Data(int UserId)
            {

                ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");


                if (UserId != null)
                {
                    var data = new SchedulerAjaxData(new TimesheetEventDataContext().Events.Where(a => a.CreatedBy == UserId.ToString()));
                    ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");
                    return (ContentResult)data;
                }
                else
                {
                    var data = new SchedulerAjaxData(new TimesheetEventDataContext().Events.Where(a => a.CreatedBy == Session["EmpId"].ToString()));
                    ViewBag.EmpId = new SelectList(_userRegisterViewModel.GetEmpPrimary(), "EmpId", "First_Name");
                    return (ContentResult)data;              
                }
            }

现在我想通过下拉列表中的选择用户加载数据。因此,我将userid传递给控制器​​以获取该特定用户创建的事件。 我的观点页面如下:

<!DOCTYPE html>
<html>
<head>
    <title>Timesheet Events</title>
    <style>
        body
        {
            background-color:#eee;
        }
    </style>
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>    
    <script type="text/javascript">    
     $(document).ready(function () {
            $('#ddlUsers').change(function () {
                emId = $(this).val();
                window.location.href = "/Calendar/Data?UserId=" + emId;              
            });
      });
    </script>   
</head>
<body>
    <div style="height:700px;width:900px;margin:0 auto;padding-top:10%;">
        <table>
            <tr>
                <td>
                    Select User :
                </td>
                <td style="width:30%;">
                    @Html.DropDownList("EmpId", null, "-- Choose --", new { @class = "form-control", id = "ddlUsers" })
                </td>
                <td colspan="10">
                    <div id="calendar"></div>
                </td>
            </tr>
        </table>
        @Html.Raw(Model.Render())
    </div>
</body>
</html>

现在,当我选择用户时,它会将ID传递给控制器​​,但不会基于此加载日历视图。 任何人都可以帮我这样做.. 提前谢谢..

1 个答案:

答案 0 :(得分:1)

我认为你的#ddlUsers处理程序所做的是将浏览器导航到数据操作,这不是你需要的。 尝试使用dhtmlxScheduler

的客户端API重新加载数据
$('#ddlUsers').change(function () {
    var emId = $(this).val();

    scheduler.clearAll();
    scheduler.load("/Calendar/Data?UserId=" + emId;, "json");
});

相关文档:

http://docs.dhtmlx.com/scheduler/api__scheduler_clearall.html http://docs.dhtmlx.com/scheduler/api__scheduler_load.html