ASP.NET Web窗体FullCalendar eventClick

Question

我在eventClick上回发时遇到了麻烦。在Site.master页面中，我有这个javascript。我用它来设置Session值。

function setSessionValue(key, value) {
                $.post('setSession.aspx?key=' + key + '&value=' + value);
            }

然后在Calendar.aspx上我有这个代码，我用它来显示日历：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
    </Triggers>
    <ContentTemplate>
        <div id="calendar"></div>
    </ContentTemplate>
</asp:UpdatePanel>

在同一个aspx文件中，我有任务详细信息面板，我将用它来显示详细事件数据：

<asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="true">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ReloadThePanel" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <div id="Task_Detail" runat="server" class="">
            <strong>Task info</strong>
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <tbody>
                        <tr>
                            <td>Customer</td>
                            <td>
                                <asp:Label ID="LabelCustomer" Text="" runat="server"></asp:Label></td>
                        </tr>
                        <tr>
                            <td>Task description</td>
                            <td>
                                <asp:Label ID="LabelDescription" Text="" runat="server"></asp:Label></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Calendar.aspx.cs：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {

    }

    setSelectedTaskData(Session["calEvent"].ToString().Trim());
}

private void setSelectedTaskData(string calEvent)
{
    string anQId = "", acCompany = "", adDate = "", acContact = "", acTask = "", acHow = "", acLocation = "", acActive = "", acKey = "";

    anQId = calEvent;

    DataTable dt = new DataTable();
    DB db = new DB();
    dt = db.GetData("select * from _uvJN_SBCRM_Tasks where anQId = '" + anQId + "'");

    if (dt.Rows.Count > 0)
    {
        DataRow row = dt.Rows[0];

        acCompany = row["acCompany"].ToString();
        acContact = row["acContact"].ToString();
        acHow = row["acHow"].ToString();
        acLocation = row["acLocation"].ToString();
        adDate = row["adDate"].ToString();
        acKey = row["acKey"].ToString();
        acTask = row["acTask"].ToString();
    }

    LabelCustomer.Text = acCompany;
    LabelContact.Text = acContact;
    LabelHow.Text = acHow;
    LabelLocation.Text = acLocation;
    LabelWhen.Text = ParseDate(adDate);
    LabelDocument.Text = acKey;
    LabelDescription.Text = acTask.Replace("\n", "<br />");

}

JavaScript的：

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            rendering: 'background',
            droppable: false, // this allows things to be dropped onto the calendar
            eventClick: function (calEvent, jsEvent, view) {
                console.log(calEvent.id);
                setSessionValue('calEvent', calEvent.id);
                __doPostBack('UpdatePanel3', '');

            },
            events: {
                url: 'JSON.aspx',
                error: function () {
                    alert('there was an error while fetching events!');
                }
            }
        });
    });
</script>   

JSON.aspx：

public partial class JSON : BasePage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            CalendarExec();
        }
    }

    private void CalendarExec()
    {
        // Get events from db and add to list.
        DB db = new DB();

        int i = 1;

        string myJsonString = "";
        List<object> myList = new List<object>();

        string rights = "1=1";
        if (Session["s_user_perm_tasksmy"].ToString().Trim() == "0")
        {
            rights = "1=0";
        }

        //DataTable dt = db.GetData("select adDateStart, adDateDue, acTask from _uvJN_SBCRM_Tasks where " + rights + " and acActive = 'T'");
        DataTable dt = db.GetData("select anQId, adDateStart, adDateDue, acTask, acActive, acTime from _uvJN_SBCRM_Tasks where " + rights);


        foreach (DataRow dr in dt.Rows)
        {
            //var id = i;
            var id = int.Parse(dr["anQId"].ToString());
            var title = dr["acTask"].ToString();
            var start = dr["adDateDue"].ToString();
            var end = dr["adDateDue"].ToString();
            var acTime = dr["acTime"].ToString();
            var acActive = dr["acActive"].ToString();

            var allDay = acTime == "" ? true : false;

            double h = 8;
            double m = 0;

            var color = "";


            if (acTime != "")
            {
                double.TryParse(acTime.Substring(0, 2), out h);
                double.TryParse(acTime.Substring(3, 2), out m);

            }

            if (acActive == "F")
            {
                color = "#f8ac59";
            }
            else
            {
                color = "#1ab394";
            }

            //Convert Implicity typed var to Date Time
            DateTime RealStartDate = Convert.ToDateTime(start);
            DateTime RealEndDate = Convert.ToDateTime(end);

            RealStartDate = RealStartDate.AddHours(h);
            RealStartDate = RealStartDate.AddMinutes(m);
            RealEndDate = RealStartDate.AddHours(1);    // default 1 ura


            //Convert Date Time to ISO
            String SendStartDate = RealStartDate.ToString("s");
            String SendEndDate = RealEndDate.ToString("s");


            Events t_table = new Events(id, title, SendStartDate, SendEndDate, allDay, color);


            myList.Add(t_table);
            i++;

        }

        myJsonString = (new JavaScriptSerializer()).Serialize(myList);
        Response.Write(myJsonString);
        Response.End();
    }

}

我无法弄清楚为什么日历会在每个动作上重新加载。它应该只刷新UpdatePanel 3而不是重新加载日历。

Answer 1

fullCalendar重新加载的原因是因为您在Sys.WebForms.PageRequestManager pageLoaded事件中重新启动它。

This event will fire every time there is an update to the page。

您可以将日历对象保存在范围之外，并且不会重新加载。

    <script type="text/javascript">
      var $myCal = $('#calendar').fullCalendar({/* initialize it */});

      Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
           // Here you can do stuff with 
           $myCal
       })
    </script>