Problem with passing data between jacascript and c# – Data format issue


i am new to c# and web development so i will state my problem right away:

The structure is like this:-

Test.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PartTimeFrontendMockup.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"/>
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"/>
  <!-- Theme style -->
  <link id="stileAdminLTE" runat="server" rel="stylesheet" href="dist/css/adminlte.min.css"/>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css"  crossorigin="anonymous" referrerpolicy="no-referrer" />


</head>
<body>
          <div class="card card-warning">
              <div class="card-header">
                <h3 class="card-title">Selezione date Part-time</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form class="form-horizontal">
                <div class="card-body">
                  <div class="form-group row">
                    <div class="col-sm-4">
            <!-- small card -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3><span id="spanPTPerc">0</span><sup style="font-size: 20px">%</sup></h3>
                <p>Percentuale part-time</p>
              </div>
              <div class="icon">
                <i class="fas fa-calculator"></i>
              </div>
            </div>
                    </div>
                      <div class="card bg-blue col-sm-8 form-inline">
                    <label for="inputdalle" class="col-sm-2 col-form-label">Dalle</label>
                    <div class="col-sm-4">
                      <input type="email" class="form-control" id="inputdalle" placeholder="Dalle" value="6:30"/>
                    </div>
                          <label for="inputalle" class="col-sm-2 col-form-label">Alle</label>
                    <div class="col-sm-4">
                      <input type="email" class="form-control" id="inputalle" placeholder="Alle" value="12:30"/>
                    </div>
</div>
                  </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                </div>
                <!-- /.card-footer -->
              </form>
            </div>
<div id="PTCalendar"></div>

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Momentjs -->
<script src="plugins/moment/moment.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha512-hktawXAt9BdIaDoaO9DlLp6LYhbHMi5A36LcXQeHgVKUH6kJMOQsAtIw2kmQ9RERDpnSTlafajo6USh9JUXckw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/locales-all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/PTMockup.js"></script>
</body>
</html>

Test.aspx.cs:

    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    using PartTimeBackend;
    using System;
    using System.Collections.Generic;
    
    namespace PartTimeFrontendMockup
    {
        public partial class Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack) {
                    if (Request["Action"] == "GetPTPercentage") {
    
                        string ss = "";
                        JObject j = new JObject();
                        JArray eventi=(JArray) JsonConvert.DeserializeObject(Request["eventi"]);
                        PTEvent pte = new PTEvent();
                        List<DateTime> LDT = new List<DateTime>();
                        DateTime dtdalle = new DateTime();
                        DateTime dtalle = new DateTime();
                        foreach (JObject evt in eventi) {
                            JProperty dalle = evt.Property("start");
                            JProperty alle = evt.Property("end");
    
                            dtdalle = Convert.ToDateTime(dalle.First.Value<String>());
                            dtalle = Convert.ToDateTime(alle.First.Value<String>());
                            pte.AddDateFromMisto(dtdalle, dtalle);
                        }
    
                        double asd = pte.PTpercentage;
                        string perc = String.Format("{0:0.0}", asd) ;
    
    
                        Response.Clear();
                        string ret = "OK";
                        
                        if (ret == "OK")
                        {
                            j.Add("Stato", "OK");
                            j.Add("perc", perc);
    
    
                        }
                        else
                        {
                            j.Add("Stato", "KO");
                            j.Add("Errore", ret);
                        }
                        Response.Write(JsonConvert.SerializeObject(j));
                        Response.End();
        
                    }
                }
            }
        }
    }

finally, classes file:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using EWSoftware.PDI;
    using System.Data.Common;
    using PartTimeBackend.models;
    using EWSoftware.PDI.Objects;
    using EWSoftware.PDI.Properties;
    using EWSoftware.PDI.Parser;
    using EWSoftware.PDI.Binding;
    using System.Web;
    
    namespace PartTimeBackend
    {
        public class PTEvent
        {
            public DateTime StartDateTimePT { get; set; }
            public DateTime EndDateTimePT { get; set; }
            public TimeSpan totalWorkingTime;
            public double PTpercentage;
            public string PTperc;
            public int totDates;
            public VCalendar vc;
    
            public List<DateDuration> DDL;
            public List<DateTime> datesChecker;
    
            public PTEvent()
            {
                this.vc = new VCalendar();
                DDL = new List<DateDuration>();
                totDates = 0;
                PTpercentage = 0;
                totalWorkingTime = new TimeSpan();
                datesChecker = new List<DateTime>();
                StartDateTimePT = DateTime.Today;
                EndDateTimePT = DateTime.Today;
            }
    
    
            public void AddDateFromMisto(DateTime dtFrom, DateTime dtTo)
            {
                DateDuration dd = new DateDuration();
                RRuleProperty rrp = new RRuleProperty();
                VEvent nve = new VEvent();
                dd.dalle = dtFrom;
                dd.alle = dtTo;
                nve.RecurDates.Add(dtFrom);
                this.DDL.Add(dd);
                GetPTPercentage();
    
            }
    
            private void CalculateTOTs()
            {
                var distinctItems = this.DDL.Distinct();
                this.totDates = this.DDL.Distinct().Count();
            }
    
    
            public string GetPTDates()
            {
                string allDates = "";
                foreach (var x in this.DDL)
                {
                    allDates += "date: " + x.dalle + "t duration: " + x.Duration + "rn";
                }
                return allDates;
    
            }
    
            public void GetPTPercentage()
            {
    
                CalculateTOTs();
                var distinctItems = this.DDL.Distinct();
                TimeSpan ts = new TimeSpan();
                foreach (var xx in distinctItems)
                {
                    ts += xx.Duration;
                }
                this.PTpercentage = ((ts.TotalHours) / 1872) * 100;
                this.totalWorkingTime = ts;
            }
        }
    
        public class DateDuration
        {
            public DateTime dalle;
            public DateTime alle;
    
            public TimeSpan Duration
            {
                get { return alle - dalle; }
            }
        }
    }

The webPage should work like this:
Whenever a user clicks on a date, the date should be marked as an event, the <span id="spanPTPerc">0</span> content should hold percentage of the Part-Time.

my problem can be summed into two major issues:

  1. How can i debug the whole process? that would help trace the change in values in the variables and edit the code accordingly.

  2. is there a problem in the passing of the event data to c#? i think the whole issue relies in the conversion between datetime and the javascript’s moment.js

Thanks in advance and sorry for the bad question format

Nad

Source: JavaSript – Stack Overflow

November 4, 2021
Category : News
Tags: c# | fullcalendar | javascript | jquery | momentjs

Problem with passing data between jacascript and c# – Data format issue


i am new to c# and web development so i will state my problem right away:

The structure is like this:-

Test.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PartTimeFrontendMockup.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"/>
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"/>
  <!-- Theme style -->
  <link id="stileAdminLTE" runat="server" rel="stylesheet" href="dist/css/adminlte.min.css"/>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css"  crossorigin="anonymous" referrerpolicy="no-referrer" />


</head>
<body>
          <div class="card card-warning">
              <div class="card-header">
                <h3 class="card-title">Selezione date Part-time</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form class="form-horizontal">
                <div class="card-body">
                  <div class="form-group row">
                    <div class="col-sm-4">
            <!-- small card -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3><span id="spanPTPerc">0</span><sup style="font-size: 20px">%</sup></h3>
                <p>Percentuale part-time</p>
              </div>
              <div class="icon">
                <i class="fas fa-calculator"></i>
              </div>
            </div>
                    </div>
                      <div class="card bg-blue col-sm-8 form-inline">
                    <label for="inputdalle" class="col-sm-2 col-form-label">Dalle</label>
                    <div class="col-sm-4">
                      <input type="email" class="form-control" id="inputdalle" placeholder="Dalle" value="6:30"/>
                    </div>
                          <label for="inputalle" class="col-sm-2 col-form-label">Alle</label>
                    <div class="col-sm-4">
                      <input type="email" class="form-control" id="inputalle" placeholder="Alle" value="12:30"/>
                    </div>
</div>
                  </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                </div>
                <!-- /.card-footer -->
              </form>
            </div>
<div id="PTCalendar"></div>

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Momentjs -->
<script src="plugins/moment/moment.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha512-hktawXAt9BdIaDoaO9DlLp6LYhbHMi5A36LcXQeHgVKUH6kJMOQsAtIw2kmQ9RERDpnSTlafajo6USh9JUXckw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/locales-all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/PTMockup.js"></script>
</body>
</html>

Test.aspx.cs:

    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    using PartTimeBackend;
    using System;
    using System.Collections.Generic;
    
    namespace PartTimeFrontendMockup
    {
        public partial class Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack) {
                    if (Request["Action"] == "GetPTPercentage") {
    
                        string ss = "";
                        JObject j = new JObject();
                        JArray eventi=(JArray) JsonConvert.DeserializeObject(Request["eventi"]);
                        PTEvent pte = new PTEvent();
                        List<DateTime> LDT = new List<DateTime>();
                        DateTime dtdalle = new DateTime();
                        DateTime dtalle = new DateTime();
                        foreach (JObject evt in eventi) {
                            JProperty dalle = evt.Property("start");
                            JProperty alle = evt.Property("end");
    
                            dtdalle = Convert.ToDateTime(dalle.First.Value<String>());
                            dtalle = Convert.ToDateTime(alle.First.Value<String>());
                            pte.AddDateFromMisto(dtdalle, dtalle);
                        }
    
                        double asd = pte.PTpercentage;
                        string perc = String.Format("{0:0.0}", asd) ;
    
    
                        Response.Clear();
                        string ret = "OK";
                        
                        if (ret == "OK")
                        {
                            j.Add("Stato", "OK");
                            j.Add("perc", perc);
    
    
                        }
                        else
                        {
                            j.Add("Stato", "KO");
                            j.Add("Errore", ret);
                        }
                        Response.Write(JsonConvert.SerializeObject(j));
                        Response.End();
        
                    }
                }
            }
        }
    }

finally, classes file:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using EWSoftware.PDI;
    using System.Data.Common;
    using PartTimeBackend.models;
    using EWSoftware.PDI.Objects;
    using EWSoftware.PDI.Properties;
    using EWSoftware.PDI.Parser;
    using EWSoftware.PDI.Binding;
    using System.Web;
    
    namespace PartTimeBackend
    {
        public class PTEvent
        {
            public DateTime StartDateTimePT { get; set; }
            public DateTime EndDateTimePT { get; set; }
            public TimeSpan totalWorkingTime;
            public double PTpercentage;
            public string PTperc;
            public int totDates;
            public VCalendar vc;
    
            public List<DateDuration> DDL;
            public List<DateTime> datesChecker;
    
            public PTEvent()
            {
                this.vc = new VCalendar();
                DDL = new List<DateDuration>();
                totDates = 0;
                PTpercentage = 0;
                totalWorkingTime = new TimeSpan();
                datesChecker = new List<DateTime>();
                StartDateTimePT = DateTime.Today;
                EndDateTimePT = DateTime.Today;
            }
    
    
            public void AddDateFromMisto(DateTime dtFrom, DateTime dtTo)
            {
                DateDuration dd = new DateDuration();
                RRuleProperty rrp = new RRuleProperty();
                VEvent nve = new VEvent();
                dd.dalle = dtFrom;
                dd.alle = dtTo;
                nve.RecurDates.Add(dtFrom);
                this.DDL.Add(dd);
                GetPTPercentage();
    
            }
    
            private void CalculateTOTs()
            {
                var distinctItems = this.DDL.Distinct();
                this.totDates = this.DDL.Distinct().Count();
            }
    
    
            public string GetPTDates()
            {
                string allDates = "";
                foreach (var x in this.DDL)
                {
                    allDates += "date: " + x.dalle + "t duration: " + x.Duration + "rn";
                }
                return allDates;
    
            }
    
            public void GetPTPercentage()
            {
    
                CalculateTOTs();
                var distinctItems = this.DDL.Distinct();
                TimeSpan ts = new TimeSpan();
                foreach (var xx in distinctItems)
                {
                    ts += xx.Duration;
                }
                this.PTpercentage = ((ts.TotalHours) / 1872) * 100;
                this.totalWorkingTime = ts;
            }
        }
    
        public class DateDuration
        {
            public DateTime dalle;
            public DateTime alle;
    
            public TimeSpan Duration
            {
                get { return alle - dalle; }
            }
        }
    }

The webPage should work like this:
Whenever a user clicks on a date, the date should be marked as an event, the <span id="spanPTPerc">0</span> content should hold percentage of the Part-Time.

my problem can be summed into two major issues:

  1. How can i debug the whole process? that would help trace the change in values in the variables and edit the code accordingly.

  2. is there a problem in the passing of the event data to c#? i think the whole issue relies in the conversion between datetime and the javascript’s moment.js

Thanks in advance and sorry for the bad question format

Nad

Source: JavaSript – Stack Overflow

November 4, 2021
Category : News
Tags: c# | fullcalendar | javascript | jquery | momentjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.