Fong coding resources

20 December 2015

BizTalk consume web service using dynamic address

Create a dynamic port
Set URL of the port using expression

/* set port address */
portDynamicSend(Microsoft.XLANGs.BaseTypes.Address) = msgDynamicAddress.DestinationURL;
/* set port type */
portDynamicSend(Microsoft.XLANGs.BaseTypes.TransportType) = "WCF-BasicHttp";

Modify the message using expression

msgSend2 = msgSend;
/* set web service operation name */
msgSend2(BTS.Operation)="Propose";
msgSend2(WCF.PropagateFaultMessage)= true;

/* if security is required, add the below lines */
msgSend2(WCF.SecurityMode)="Transport";
msgSend2(WCF.TransportClientCredentialType)="None";

How to add legend to Chart.js graph

 @model C2.Models.ChartModel  
 @{  
   ViewBag.Title = "Chart";  
 }  
 <h2>Chart</h2>  
 <div>  
   <h3>Data</h3>  
   @*@Html.Raw(Model.ChartHtmlDisplay)*@  
 </div>  
 <div style="width:50%">  
   <div>  
     <canvas id="canvas" height="450" width="600"></canvas>  
   </div>  
   <div id="divLegend">  
   </div>  
 </div>  
 <script>  
   var lineChartData = {  
   @Html.Raw(Model.ChartHtml)  
   };  
   window.onload = function(){  
     var options = {  
       legendTemplate : '<ul>'  
               +'<% for (var i=0; i<datasets.length; i++) { %>'  
                +'<li>'  
                +'<span style=\"color:<%= datasets[i].pointColor %>;font-family:Arial;font-size:1em\">'  
                +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'  
                +'</span>'  
               +'</li>'  
              +'<% } %>'  
             +'</ul>'  
     }  
     var ctx = document.getElementById("canvas").getContext("2d");  
     //don't forget to pass options in when creating new Chart  
     var lineChart = new Chart(ctx).Line(lineChartData, options);  
     //then you just need to generate the legend  
     var legend = lineChart.generateLegend();  
     //and append it to your page somewhere  
     $('#divLegend').html(legend);  
     var ctx = document.getElementById("canvas").getContext("2d");  
     window.myLine = new Chart(ctx).Line(lineChartData, {  
          responsive: true  
     });  
   }  
 </script>

17 November 2015

An easy way to generating year, month list with SQL

DECLARE @startmonth      int = 1
DECLARE @endmonth        int = 12
DECLARE @startyear       int = 2012
DECLARE @endyear         int = 2015
;
WITH monthlist AS
(
    SELECT @startmonth AS m
    UNION ALL
    SELECT m+1 FROM monthlist WHERE m+1<=@endmonth
)
,yearlist AS
(
    SELECT @startyear AS y
    UNION ALL
    SELECT y+1 FROM yearlist WHERE y+1<=@endyear
)
        SELECT y,
               m
          FROM yearlist
    CROSS JOIN monthlist
      ORDER BY y,
               m
        OPTION (maxrecursion 1000)

12 November 2015

MVC web service in JSON

Here is an example

    public class HomeController : Controller
    {
        public ActionResult ListJobs()
        {
            List jobs;
            GraphEntities db = new GraphEntities();
            jobs = db.Jobs.ToList();
            return Json(jobs, JsonRequestBehavior.AllowGet);
        }

Here is the output

[{"JobID":1,"Job1":"Software Engineer"},{"JobID":2,"Job1":"Junior Programmer"},{"JobID":3,"Job1":"Senior Programmer"},{"JobID":4,"Job1":"Database Administrator"},{"JobID":5,"Job1":"Business Analyst"}]

How to use partial view in MVC, an example

Here is the index page

@model WebApplication1.Models.GridData
<!doctype html>
@{Layout = null;}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
   <h1>Header</h1>
        <input type="button" name="btnGetJob" id="btnGetJob" value="GetJob" class="Button" onclick="GetJob();" />
        <div id="divDataGrid">
            @Html.Partial("_DataGrid", Model)
        </div>
    <script>
        function GetJob()
        {$.ajax({
                        type: "POST",
                        url: "/Home/_DataGrid",
                        success: function (data) {
                            $('#divDataGrid').html(data);
                        },
                        error: function () {
                            alert('error');
                        },
                        complete: function () {}
                   })
        }
    </script>
</body>
</html>

Here is the partial view

@model WebApplication1.Models.GridData
@{Layout = null;}
<table class="table">
    <tr>
        <th>
            @Html.DisplayTextFor(model => model.message)
        </th>
        <th></th>
    </tr>
    @foreach (var item in Model.jobs)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Job1)
            </td>

        </tr>
    }
</table>

Here is the data model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.Models
{
    public class GridData
    {
        public string message { get; set; }
        public List<Job> jobs { get; set; }

        public GridData()
        {
            GraphEntities db = new GraphEntities();
            jobs = db.Jobs.ToList();
        }
    }
}

Here is the controller

    public class HomeController : Controller
    {
        private static int SessionCount = 0;
        public ActionResult Index()
        {
            GridData gd = new GridData();
            gd.message = SessionCount.ToString();
            return View(gd);
        }
        public ActionResult _DataGrid()
        {
            SessionCount++;
            GridData gd = new GridData();
            gd.message = SessionCount.ToString();
            return View(gd);
        }
        ...

Here is the output

15 October 2015

Using Chart.js with MVC

This is how the view might look

 @model wapitest.Models.ChartData  
 <!doctype html>  
 @{  
   ViewBag.Title = "Index";  
   Layout = null;  
 }  
 <html>  
 <head>  
   <title>Line Chart</title>  
   <script src="~/Scripts/Chart.js"></script>  
 </head>  
 <body>  
   @Model.title  
   <div style="width:30%">  
     <div>  
       <canvas id="canvas" height="450" width="600"></canvas>  
     </div>  
   </div>  
   <script>  
           var lineChartData = {  
             labels : @Html.Raw(Model.label) ,  
                datasets : [  
                     {  
                          label: "D1",  
                          fillColor : "rgba(220,220,220,0.2)",  
                          strokeColor : "rgba(220,220,220,1)",  
                          pointColor : "rgba(220,220,220,1)",  
                          pointStrokeColor : "#fff",  
                          pointHighlightFill : "#fff",  
                          pointHighlightStroke : "rgba(220,220,220,1)",  
                          data : @Model.data  
                     },  
                     {  
                          label: "D2",  
                          fillColor : "rgba(151,187,205,0.2)",  
                          strokeColor : "rgba(151,187,205,1)",  
                          pointColor : "rgba(151,187,205,1)",  
                          pointStrokeColor : "#fff",  
                          pointHighlightFill : "#fff",  
                          pointHighlightStroke : "rgba(151,187,205,1)",  
                          data : [7,6,5,4,3,2,1]  
                     }  
                ]  
           }  
      window.onload = function(){  
           var ctx = document.getElementById("canvas").getContext("2d");  
           window.myLine = new Chart(ctx).Line(lineChartData, {  
                responsive: true  
           });  
      }  
   </script>  
 </body>  
 </html>

This is the model

 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 namespace wapitest.Models  
 {  
   public class ChartData  
   {  
     public string label { get; set; }  
     public string data { get; set; }  
     public string title { get; set; }  
   }  
 }

And this is the controller function

     public ActionResult Chart()  
     {  
       ViewBag.Title = "Line chart";  
       ChartData cd = new ChartData();  
       cd.title = "Chart Title";  
       cd.data = "[1,5,10,15,5,4,3]";  
       cd.label = @"[""mon"", ""tue"", ""wed"", ""thu"", ""fri"", ""sat"", ""sun""]";  
       return View(cd);  
     }

12 October 2015

How to do inline css

 <html lang="en">  
 <head>  
   <meta charset="utf-8">  
   <title>Welcome to our survey</title>  
   <link href="~/Scripts/jquery-ui.css" rel="stylesheet">  
   <script src="~/Scripts/jquery-1.10.2.js"></script>  
   <script src="~/Scripts/jquery-ui.js"></script>  
   <STYLE type="text/css">  
     body{  
       font-family:Verdana,Arial,sans-serif;  
       font-size:0.8em;  
     }  
     .QuestionLabel {  
       left:10em;  
       position:relative  
     }  
     .AnswerInput{  
       left:15em;  
       position:relative  
     }  
   </STYLE>  
 </head>  
 <body>  
   <label for="country" class="QuestionLabel">Select your country: </label>  
   <input id="country" class="AnswerInput">  
   <br />