jQuery UI Widgets Forums ASP .NET MVC ASP.NET Core 2.1 MVC application

This topic contains 2 replies, has 2 voices, and was last updated by  LightspeedNZ 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • ASP.NET Core 2.1 MVC application #101638

    LightspeedNZ
    Participant

    Hi guys,

    I’m new here and have an ASP.NET Core 2.1 MVC application that I am trying to get working with JQWidgets. I have followed all the instructions from this link (https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp-net-core/mvc-tag-helpers.htm) but when I access this page …

    @model IEnumerable<SkyNet.Models.ExchangeRates>
    
    @{
        ViewData["Title"] = "Index";
    }
    
    @{
        List<string> ranges = new List<string>()
        {
        "{ startValue: 0, endValue: 200, color: \"#000000\", opacity: 0.5 }",
        "{ startValue: 200, endValue: 250, color: \"#000000\", opacity: 0.3 }",
        "{ startValue: 250, endValue: 300, color: \"#000000\", opacity: 0.1 }"
        };
            List<double> barGaugeValues = new List<double>()
        {
        102, 115, 130, 137
        };
    }
    
    <label>ASP .NET MVC Core BarGauge Tag Helper Example</label><br />
    <jqx-bargauge colorScheme="scheme02" ranges="ranges" values="barGaugeValues" width="600" height="600" max="150"></jqx-bargauge>
    
    <h2>Exchange Rates</h2>
    
    <p>
        <a class="btn btn-default btn-sm" asp-action="Create">Create New</a>
    </p>

    All I get is this result.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Index - SkyNet</title>
            <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap-cyborg.css" />
    
            <!-- add the jQWidgets base styles and one of the theme stylesheets -->
            <link rel="stylesheet" href="/lib/jqwidgets/styles/jqx.base.css" />
            <link rel="stylesheet" href="/lib/jqwidgets/styles/jqx.darkblue.css" />
    
            <link rel="stylesheet" href="/css/site.css" />
    </head>
    <body>
        <div class="container body-content">
            <label>ASP .NET MVC Core BarGauge Tag Helper Example</label><br />
            <jqx-bargauge colorScheme="scheme02" ranges="ranges" values="barGaugeValues" width="600" height="600" max="150"></jqx-bargauge>
    
            <h2>Exchange Rates</h2>
    
            <p>
                <a class="btn btn-default btn-sm" href="/ExchangeRates/Create">Create New</a>
            </p>
    
        </div>
            <script src="/lib/jquery/dist/jquery.js"></script>
            <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
            
            <!-- add the jQWidgets framework -->
            <script type="text/javascript" src="/lib/jqwidgets/jqxcore.js"></script>
            <!-- add one or more jQWidgets widgets -->
            <script type="text/javascript" src="/lib/jqwidgets/jqx-all.js"></script>
    
            <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
    </body>
    </html>

    Any idea what I am doing wrong?

    Many thanks, Stuart

    ASP.NET Core 2.1 MVC application #101695

    Hristo
    Participant

    Hello Stuart,

    I tested this example and it seems to work fine.
    https://www.jqwidgets.com/asp.net-core-mvc-tag-helpers/asp.net-core-mvc-bargauge-tag-helper/index.htm#https://aspcore.jqwidgets.com/mvc/TagHelpers/BarGauge
    Could you clarify it? Is there any error message?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    ASP.NET Core 2.1 MVC application #102343

    LightspeedNZ
    Participant

    Hi guys,

    For those interested in the fix for this, it is important that you have the JavaScript files in the head of the application not the footer as usual.

    I had to add the following to the <head> section of the _Layout.cshtml file to make this work.

            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
    
            <script src="~/lib/jqwidgets/jqxcore.js"></script>
            <script src="~/lib/jqwidgets/jqxdata.js"></script>
            <script src="~/lib/jqwidgets/jqxdraw.js"></script>

    Then this is the code I used on the Index.cshtml page for accessing the chart.

    <script src="~/lib/jqwidgets/jqxchart.js"></script>
    
    @model IEnumerable<SkyNet.Models.ExchangeRateHistories>
    
    @{
        ViewData["Title"] = "Index";
    
        DateTime minDate = DateTime.Now.AddDays(-80);
        DateTime maxDate = DateTime.Now;
    
        List<SkyNet.Models.ExchangeRateHistories> myList = Model
            .Where(e => e.ExchangeRate.Name == "AUD" && e.Date > minDate)
            .Select(e=> new ExchangeRateHistories { Date = e.Date, ActualRate = e.ActualRate, Dvtrate = e.Dvtrate })
            .ToList();
    }
    
    <h2>Exchange Rate History</h2>
    
    <jqx-chart style="width: 850px; height: 500px;" title="AUD" description="Exchange Rate" source="myList">
        <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
        </jqx-chart-x-axis>
        <jqx-chart-value-axis text="Exchagne Rate Value" axis-size="auto">
            <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
        </jqx-chart-value-axis>
        <jqx-chart-series-groups>
            <jqx-chart-serie-group type=SerieType.Line>
                <jqx-chart-series>
                    <jqx-chart-serie datafield='ActualRate' display-text='Exchange Rate' line-width="1" line-width-selected="1"></jqx-chart-serie>
                    <jqx-chart-serie datafield='Dvtrate' display-text='DVT Rate' line-width="1" line-width-selected="1"></jqx-chart-serie>
                </jqx-chart-series>
            </jqx-chart-serie-group>
        </jqx-chart-series-groups>
    </jqx-chart>

    Hope this helps anyone else that gets caught with this problem.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.