DEV Community: Chris Cooper

Full input box with Dynamic Placeholder appear on the side

Chris Cooper — Fri, 12 Jun 2020 10:55:31 +0000

This is a simple but effective way of making your input box's look good and have the place holder appear as a label, when the input box has data within

I have created a simple example, using .NetCore Razor pages.

The input box should look like below
When the input box is empty

When data inputted

Code Example
Full example of code can be found within the below GIT repo
https://github.com/chriscooper01/InputBoxLabel

The code

Below is the code broken down into its raw elements.

The Input box.

As you can see you have a simple label and Text box. The label is set the "InputEnterLabel" css class as default.

The input box is set "InputBox" css class as default with the onkeyUp JS function call inputBoxPlaceHolder, which will pass the controller into the function. There is as well a data attribute added for the place holder to hold the label content.

<div class="row col-sm-12 col-md-12 col-lg-12 InputBoxRow ">
     @Html.LabelFor(Model => Model.INPUTRecord, new { @class = "InputEnterLabel" })
     @Html.TextBoxFor(Model => Model.INPUTRecord, new { @class = "InputBox", @placeholder = "Place holder inside input",  onkeyup = "inputBoxPlaceHolder(this)", data_placholder = "Outside PC:" })

</div>

Java script side

Now here I have two main call, one to be called on the document load, so it knows to set the label in the correct location and the call that is done on the Key up of the input box.

function checkInputBoxPlacholderNeeded() 
{
    console.log("Looking for input box");
    var inputs = $(".InputBox");
    console.log("Input box's found: " + inputs.length);
    for (var i = 0; i < inputs.length; i++) {
        inputBoxPlaceHolder(inputs[i]);
    }

}

function inputBoxPlaceHolder(inputBox) 
{
    var labelText = "";
    var a = $(inputBox).val().trim().length;

    if ($(inputBox).hasClass("InputEntered") === false && a > 0) {
        $(inputBox).addClass("InputEntered");

        labelText = $('label[for=' + inputBox.id + ']');
        labelText.addClass("InputEnterLabelViewable");
        $(labelText).text($(inputBox).data("placholder"));
    } else if (a === 0) {
        $(inputBox).removeClass("InputEntered");
        labelText = $('label[for=' + inputBox.id + ']');
        labelText.removeClass("InputEnterLabelViewable");
    }
}

If you want the input box's to set dynamically on page load add the below script to the page JS file. This will call the checkInputBoxPlacholderNeeded function to look for the input box's and check if they have data or not.

$(document).ready(function () {//same as: $(function() { 

    checkInputBoxPlacholderNeeded();
    //$('#MergeStart').hide();
});

CSS

Below is simple CSS which, make my Input box's and label look like they do.

.InputBoxRow {
    padding-top: 5px;
    padding-bottom: 5px;
    max-height: 55px;
    left:0px;
}


.InputEntered {
    padding-left: 30px !important;
    max-width: calc(100% - 100px) !important;
    min-width: calc(100% - 100px) !important;
    margin-left: 100px !important;
}
.InputBox {
    min-height: 40px;
    max-height: 40px;
    line-height: 40px;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 100%;
    background-color: #e6e1e1;
    border: none;
    font-weight: 600;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
}

.InputEnterLabel {
    position: absolute;
    visibility: hidden;
    z-index: 0;
    min-height: 40px;
    max-height: 40px;
    line-height: 40px;
    color: #aea9a9;
    font-weight: 500;
    padding-left: 10px;
    font-size: x-small;
}

.InputEnterLabelViewable {
    visibility: visible;
    background-color: #e6e1e1;
    max-width: 100px !important;
    min-width: 100px !important;
}

Breadcrumbs within Razor page .Net Core

Chris Cooper — Sat, 18 Apr 2020 19:37:37 +0000

I'm still quite new to Razor pages (not mvc) and wanted a Breadcrumb navigation bar on my pages, which was created dynamically. I looked around but in the end I created my own and this is how I did it. There is a full example of my solution on a .net core razor page solution on git.

The Breadcrumb creation

This is created within a class that will be inherited on the pagemodel class. This is broken down into many smaller part to make it easier.

Validating the Request

Firs you need to make sure the Request has a path and a query string, before you start looking at making the bread crumbs

    public void Validate()
    {
        currentQuery = String.Empty;
        currentPath = String.Empty;
        referers = this.Request.Headers["Referer"].ToList(); ;
        if (this.Request.Path.HasValue)
            currentPath = this.Request.Path.Value.Replace("/", String.Empty);
        if (this.Request.QueryString.HasValue)
            currentQuery = this.Request.QueryString.Value;

    }

Get current bread crumbs

This logic uses a session with a JSON object, containing all needed data for my breadcrumbs

    private  void getCurrentBreadCrumbs()
    {
        var sessionString = HttpContext.Session.GetString("BreadCrumbs");
        breadCrumbs = new List<DataClassesLibrary.BreadCrumbDataClass>();
        if (String.IsNullOrWhiteSpace(sessionString) || sessionString.Equals("[]"))
            return;

        breadCrumbs = (List<DataClassesLibrary.BreadCrumbDataClass>)HelperLibrary.JsonStringHelper.GetObject(sessionString, breadCrumbs.GetType());

    }

Setting new bread crumb

Now I have my current and a valid request object, I can see if I need to set a new bread crumb for the current page.

    private  void setBreadCrumbs()
    {
        if (referers.Count > 0)
        {
            var urlValue = referers[0].ToString();
            var urlElements = urlValue.Split("/").ToList();
            var hostLocation = urlElements.IndexOf(this.Request.Host.Value);
            if (urlElements.Count() > hostLocation)
            {
                var razorPageURL = urlElements[hostLocation + 1];
                var razorPage = razorPageURL.Split("?");
                if (razorPage.Count() > 0)
                {
                    var data = new DataClassesLibrary.BreadCrumbDataClass();
                    data.Key = razorPage[0].ToString();
                    //Make sure I'm not adding the page back in I have removed
                    if (crumbRemoved.FirstOrDefault(x => x.Equals(data.Key)) != null)
                        return;

                    if (setCurrentAsDisabled(data.Key))                        
                        return;//Do not set if already exists


                    if (razorPage.Count().Equals(2))
                    {                            
                        data.Parameters = setParameters(razorPage[1]);
                    }
                    breadCrumbs.Add(data);
                }

            }                
        }
    }

Set the session

Because I use a session with a JSON object, to hold my current breadcrumbs, I will set the session with the new data.

    private void setSession()
    {
        HttpContext.Session.Set("BreadCrumbs", System.Text.Encoding.UTF8.GetBytes(HelperLibrary.JsonStringHelper.GetString(breadCrumbs)));
    }

Creating the HTML breadscrumb

This goes through my Bread crumbs List object and creates the required simple HTML.

Navigation bar

This is the main method that creates the navigation bar

    public string SetNavString(List<DataClassesLibrary.BreadCrumbDataClass> crumbs)
    {
        if (crumbs == null || crumbs.Count.Equals(0))
            return String.Empty;

        var nav = new StringBuilder();
        nav.AppendLine("<nav aria-label=\"breadcrumb\">");
        nav.AppendLine("<ol class=\"breadcrumb\">");

        foreach (var crumb in crumbs)
            nav.AppendLine(setLinkItem(crumb));

        nav.AppendLine("</ol>");
        nav.AppendLine("</nav>");
        return nav.ToString();
    }

Creating the linked item

This is how I have created the linked item, within the Navigation bar

    private static string setLinkItem(DataClassesLibrary.BreadCrumbDataClass crumb)
    {
        var item = new StringBuilder();
        if (!crumb.Current)
        {
           item.AppendLine("<li class=\"breadcrumb-item \">");
           item.AppendLine(String.Format("<a href=\"{0}{1}\" >{0}</a>", crumb.Key, setLinkItemParemeters(crumb)));
        }
        else
        {
            item.AppendLine("<li class=\"breadcrumb-item active\" aria-current=\"page\">");
            item.AppendLine(crumb.Key);
        }

        item.AppendLine("</li>");
        return item.ToString();
    }

Setting parameters

Setting the parameters for a linked item

    private static string setLinkItemParemeters(DataClassesLibrary.BreadCrumbDataClass crumb)
    {
        if (crumb.Parameters == null || crumb.Parameters.Count.Equals(0))
            return String.Empty;

        var parameter = new List<string>();
        foreach (var p in crumb.Parameters)
        {
            parameter.Add(String.Format("{0}={1}", p.Key, p.Value));
        }

        return "?" + String.Join("&", parameter.ToArray());
    }

Invoke the build

Once you have inherited the build class you call the build or reset method on the OnGet method.

public class FlagListModel : Pages.Extended.BreadCrumbsExtended
{

    public void OnGet()
    {
        SetBreadCrumbs();          

    }
}

Bread crumbs extended class

The SetBreadCrumbs method sits within the extended class and looks like below

    public  void SetBreadCrumbs()
    {   
        currentQuery = String.Empty;
        currentPath = String.Empty;
        referers = this.Request.Headers["Referer"].ToList(); ;
        if (this.Request.Path.HasValue)
            currentPath = this.Request.Path.Value.Replace("/", String.Empty);
        if (this.Request.QueryString.HasValue)
            currentQuery = this.Request.QueryString.Value;

        getCurrentBreadCrumbs();

        checkGoingBack();
        setBreadCrumbs();

        setCurrent();
        setSession();

        BreadCrumb = BreadCrumbsNavigationExtended.SetNavString(breadCrumbs);
        //Dispos
        currentQuery = String.Empty;
        currentPath = String.Empty;
        referers = null;
        breadCrumbs = null;
    }

Show the navigation bar
Now you have inherited and invoked the build, you want to show the navigation bar. This is done simply by placing the single line.

@Html.Raw(Model.BreadCrumb)

Now you have inherited and invoked the build, you want to show the navigation bar. This is done simply by placing the single line.

Full solution
The full solution can be found within my public GitHub repo.
The SetBreadCrumbs logic is done on the Privacy page. The WipeBreadCrumbs logic is done on the index (home) page

GitHub

WebAPI Post with Body parameters

Chris Cooper — Mon, 21 Jan 2019 13:09:16 +0000

The other day I needed to create a POST API (WebApi) for a third part to consume and return data, simple! Well it was not as simple as I first thought, as they were not able to hit my API and was getting the "No HTTP resource was found that matches the request URI". This was down to the way I had created my API and the way they were sending the POST data.

Normally I create PPOST WebAPI with the parameters in the method and you send the parameters in the URL. (Get parameters) They were sending the parameters in the POST body not within the URL, so they were getting the error. So I needed to remove the parameters and get the parameters from the RequestContext.

HTTP POST method

This is the POST method with out any parameters and gets the request context out of the HTTP Post Request.


    [HttpPost]  
    public bool DeliveryReceipts()  
    {                        
        var value = this.Request.GetRequestContext();  

        getPostContent(Request.Content);  

        return true;  
    }

Reading the context

Now that the context has been collected from the request. This method gets a string key\value for the parameters, sent in the request.


    
 private async void getPostContent(HttpContent content)
 {
           DataClassesRequestParameterDataClass request = newDataClassesRequestParameterDataClass();
            var contentString = await content.ReadAsStringAsync();
            var contentElements = contentString.Split('&');  
        foreach(var element in contentElements)  
        {  
            var parameter = element.Split('=');  
            if(parameter.Count()>0)  
            {  
                setDataClass(parameter[0], parameter[1], ref request); 

            }//END if(parameter.Count()>0)  

        }//END foreach(var element in contentElements)  
}

Collecting the value

This is a simple method that sets a veritable from the key found within the key\value string.


    
private void setDataClass(string parameter, string value, ref 
 DataClassesRequestParameterDataClass request)
{
            switch(parameter.ToLower().Trim())
            {
                case "number":
                    request.Number = value;
                    break;
                case "userid":
                    request.UserId = value;
                    break;
                case "datetime":
                    request.DateTime = value;
                    break;
                case "status":
                    request.Status= value;
                    break;
            }
 }

Summary

I've never used this technique of making post methods, but in away this seems a bit more secure than setting the parameters in the method, just simple because no one will know which parameter are needed to work the method.

I'm sure this wont be the last time, I use the logic for a POST method.

Select query using an outer apply

Chris Cooper — Wed, 16 Jan 2019 09:54:11 +0000

This is a simple example of using an SQL Outer apply to create a select query that can create queryable custom sub fields.

Before being shown outer apply logic, I was using a temp tables and sub query. The sub table added the data required on the temp table and then I queried the temp table as needed. Now I can do it all in one simpler and quicker select query.

The simple query

This example is done on a user_extended table that is a Key and value pair logic, that acts as a dumping group for records that maybe used later. When a record is inserted and it contains the same key as a record in the DB table, the DB table record is disabled and this new record is made active.

The purpose of this it to check if the created date record is the active and is not disabled.


SELECT   Parent.Username, ActiveDate,DisableDate FROM User AS Parent  OUTER APPLY
    (
        SELECT TOP 1
            MAX (CASE WHEN Child.Active= 1 AND Child.key = 'LastLoggedIn' THEN Child.DateOfCreation END) AS ActiveDate,
            MAX (CASE WHEN Child.Active = 0 AND Child.key = 'LastLoggedIn' THEN Child.DateOfCreation END) AS DisableDate
        FROM [Users_Extended] AS Child
        WHERE Child.UserId = Parent.Id
group by DateOfCreation
        ORDER BY Child.DateOfCreation DESC
    ) Child
WHERE Parent.key = 'LastLoggedIn' AND Parent.Active = 0 AND ActiveDate < DisableDate;
ORDER BY Parent.Id DESC

Sending Data Objects to WebAPI in C#

Chris Cooper — Tue, 15 Jan 2019 14:59:43 +0000

This is a easy and reusable code that can be used to send data object to WebAPIs in C#. This code is an improvement to the code already posted on my blog.

This now will work with Get and parameter webAPI action methods and you want to use data class on your side. The object will need parameters with the same name as the parameters of the API

Invoking
This is the main method that would invoke the API logic. This needs the API full URL, API HTTP action type (GET/POST), return object type

public class JSONAPI 
{

    public static object Invoke(string url, string requestMethod, object dataObject, Type returnType)
    {
        object returnObject = null;

        callAPI(url, requestMethod, dataObject, returnType, updateStatus,  ref returnObject);

        return returnObject;
    }

}

Calling the API
This is the main method that takes the parameter and return object

    private static void callAPI(string url, string requestMethod, object dataObject,Type returnType, ref object returnObject)
    {

        try
        {

            HttpWebRequest request = null;
            FoundServices = true;

            createRequest(url, requestMethod, dataObject, ref request);

            if (request != null)
            {

                WebResponse webResponse = null;

                if (getReponse(request,updateStatus,  ref webResponse))
                {
                    updateStatus(SyncServiceTextResource.JSONDataDownloading, 0, ENUMS.MainProgressENUM.UpdateSecondary);

                    Stream webStream = webResponse.GetResponseStream();
                    using (StreamReader reader = new StreamReader(webStream))
                    {
                        using (var json = new Newtonsoft.Json.JsonTextReader(reader))
                        {
                            Newtonsoft.Json.JsonSerializer serializerJ = new Newtonsoft.Json.JsonSerializer();
                            updateStatus(SyncServiceTextResource.JSONDataConverting, 0, ENUMS.MainProgressENUM.UpdateSecondary);
                            returnObject = serializerJ.Deserialize(json, returnType);
                            updateStatus(SyncServiceTextResource.JSONDataConvertingCompleted, 0, ENUMS.MainProgressENUM.UpdateSecondary);
                            System.GC.Collect();
                        }//END using (var json = new Newtonsoft.Json.JsonTextReader(reader))
                    }//END using (StreamReader reader = new StreamReader(webStream))
                }//END if (getReponse(request,updateStatus,  ref webResponse))
            }//END if (request != null)

        }
        catch (Exception e)
        {

        }

    }

Create the request
This is the method is used to take the parameter object and the GET OR POST type, with the URL to create the the required string to call the API.

     private static bool createRequest(string url, string requestMethod, object dataObject, ref HttpWebRequest request)
    {
        request = null;


        request = (HttpWebRequest)WebRequest.Create(url);

        request.Method = requestMethod;// "POST";
        request.ContentType = "application/json";
        string jsonDataString = setJSONString(dataObject);

        if (dataObject != null && requestMethod.Equals("POST"))
        {

            request.ContentLength = jsonDataString.Length;
            request.Method = requestMethod;// "POST";
            request.ContentType = "application/json";
            //request.SendChunked = true;



            StreamWriter requestWriter = new StreamWriter(request.GetRequestStream(), System.Text.Encoding.ASCII);

            requestWriter.Write(jsonDataString);
            requestWriter.Close();
        }
        else
        {
            var jObj = (JObject)Newtonsoft.Json.JsonConvert.DeserializeObject(jsonDataString);
            var query = String.Join("&",
                            jObj.Children().Cast()
                            .Select(jp => jp.Name + "=" + HttpUtility.UrlEncode(jp.Value.ToString())));


            bool parameters = true;

            if (!parameters)
                url += "?" + jsonDataString;
            else
                url += "?" + query;


            request = (HttpWebRequest)WebRequest.Create(url);// +"?"+ query);


            request.Method = requestMethod;// "POST";
            request.ContentType = "application/json";


        }


        return request.HaveResponse;


    }

Json string creation
This method takes the object and creates a JString for the object

    private static string setJSONString(object dataObject)
    {
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        serializer.MaxJsonLength = MAXJSONLENGTH;
        string jsonDataString = serializer.Serialize(dataObject);
        return jsonDataString;
    }

Get response
This method will wait an x amount of time to make sure it has given the API enough time to response.

     private  static bool getReponse(HttpWebRequest request, ref WebResponse response)
    {
        bool responseCompleted = false;                       
        System.Timers.Timer tim = new System.Timers.Timer();
        tim.Interval = 2000;       
        timerElapsed = false;
        tim.Start();

        int milSeconWait = 500;//Start with 0.5 seconds wait
        int maxMilSeconWait = 120000;//MAX of 2 Mins
        int timesWaiting = 0;
        bool stillWaiting = false;
        while (!responseCompleted)
        {

            if (timerElapsed)
            {
               responseCompleted = false;
                break;
            }
            responseCompleted = webResponse.IsCompleted;
            if (responseCompleted)
            {
                break;
            }    
           timesWaiting++;

            Console.WriteLine("JSON GET REPSONE SLEEP AND WAIT: " + milSeconWait.ToString() + " Wait loop " + timesWaiting.ToString());
            System.Threading.Thread.Sleep(milSeconWait);
            milSeconWait = INITIALWAIT * timesWaiting;
        }

        if (responseCompleted && webResponse.Result != null)
        {
            response = webResponse.Result;

        }
        tim.Stop();
        tim.Dispose();
        timerElapsed = false;          

        return responseCompleted;
    }

Constant used
Below are the constants used through the full logic code

    private const int MAXJSONLENGTH = int.MaxValue;
    protected static bool FoundServices;
    private static bool timerElapsed = false;
    private static bool secondAttempt;
    private const int INITIALWAIT = 500;//MIN 0.5 second wait

WebAPI Get Action side
To make sure the API will work with the above code will need the [FromUri] in the method call.

public class SIMPLEController : ApiController
{

    [HttpGet]        
    public DataClasses.Returns.OBJECTCLASS GET([FromUri]DataClasses.Parameters.OBJECTCLASS parameter)
    {
        var watch = System.Diagnostics.Stopwatch.StartNew();

        DataClasses.Returns.OBJECTCLASS  returnObject new DataClasses.Returns.OBJECTCLASS ();

        //DO LOGIC

        return returnObject;
    }
}

User roaming profile ClickOnce application restore

Chris Cooper — Thu, 17 May 2018 15:45:16 +0000

I know Officially Click Once does not support User roaming profiles, but not support does not mean that you can create a work around and this is my work around.

My solution is an application that sits outside the Click once application in a safe modifiable area. I’m using the C:\ProgramData folder. This application then get invoked by the Click once application to make a backup copy of its binaries and the linked registration elements within the user’s registration data. Once completed it then takes a copy of the original short cut and add its own short cut to the user desktop. Now the user will use this application to invoke the original Click Once application.

When the solution is invoked, it will check if a recovery is needed and then invoked the original Click Once application.

Full example in the example application on my GitHub repo. Use it, improve it or just use it as an starting point

The application

This application is split into two main elements; backup and recovery. You’re initial Click once application will initialise the required data and then invoke the application in backup mode.

Within the backup mode is split into two elements; binaries and registration data. When it backup the binaries it finds the original short cut link for the user on the desktop and replaces it with a link to itself.

The user will use the new link to open the original click once application, but as the link has been changed to invoke the recovery application. The recovery application will check if the AppData and registration data is already present, if not it will restore these and then invoke the original application as a click once application.

Full example in the example application on my GitHub repo. Use it, improve it or just use it as an starting point

Application data

First thing you need to initialise the recovery application from your original click once application. Below is an example code that shows what is needed.

This data can be set from your initial click once application, using the simple code snippet below.

Backup binaries

When the backup mode is invoked it will find the required application folders using ClickOnceLocation and FolderStartsWith value to find the required folders. These files are then copied to the RecoveryLocation location. It will copy the folders in the same structure.

Once the binaries have been collected it will get the manifest files from the manifest folder, copying all the files starting with FolderStartsWith. (This is used as it will be the same in both cases)

Now you need to get the Click once shortcut (file) and place it in the restore location. The application will look at the user desktop for a file that start with the ShortCurtStartsWith. This is needed as this is the key to make sure it uses the Click once logic. (This short cut is not a normal short cut, its a “.appref-ms” file)

The final part of this is to make sure there is a short cut to itself and it will use the ShortCurtDisplay value to set the display name.

Backup registration

The click once application will not work, making a binary backup and then restoring only. Click once requires user’s registration data as well.

You do need to get all the data from the below registration location, linked to your application.

Software\Classes\Software\Microsoft\Windows\CurrentVersion\Deployment\SideBySide\2.0

Invoke

The original shortcut for your application has now has been replace with a short cut to this application. So once invoked it find out if it needs to restore or just invoke the application as normal.

Restore

As the user now uses this application to invoke their application, due to the new short cut. It will check if the Current folder is within the Click once location. If not present it will restore the registration and physical folders.

Registration

This will restore the users registration keys and values required for your click once application to run again.

The restore application will use the data collected from the backup and restore the registration to match, what it was at the below registration location.

Full example in the example application on my GitHub repo

\HKEY_CURRENT_USER\Software\Classes\Software\Microsoft\Windows\CurrentVersion\Deployment\SideBySide\2.0

Binaries

The backup folder and files are copied form the backup location to the below location.

Full example in the example application on my GitHub repo

C:\Users\Chris.HEALTHDIAGNOSTI\AppData\Local\Apps\2.0 location