Split string (from C# functions) in breaks Javascript

Question

Hi I have a code in my asp to request some hours from a mysql database

C# code

        string cmd = "SELECT DepartureTime FROM dbtest";
        MySqlCommand mycmd = new MySqlCommand(cmd, conn);
        MySqlDataReader dataReader = mycmd.ExecuteReader();

        while (dataReader.Read())
        {
            times += dataReader.GetString(0) + "\n";
        }
        dataReader.Close();

Javascript

 function SendForm() {
       PageMethods.ConnectDatabase(OnSucceeded, OnFailed);
        function OnSucceeded(msg) {
            var vierkant = document.getElementById("Vierkant");
            var context = vierkant.getContext('2d');

            context.font = '15pt Calibri';
            context.fillStyle = 'blue';
            context.fillText('Departure Times bus X19:' + msg, 150, 100);
        }

When I call this function in my javascript it gives all the hours in one line

I like to have a break after each result I thought it was enough to pout a "\n" in my c# code

How can I fix this?

Thanks

I tried do following but still didn t work

Is there something wrong with my canvas or with the variable 'msg'?

Javascript:

 var msg;
    function Connect() {
        PageMethods.ConnectDatabase(OnSucceeded, OnFailed);

        function OnSucceeded(msg)
        {

            //Set context + Formatting
            var context = document.getElementById("canvas").getContext('2d');
            context.font = '15pt Calibri';
            context.textAlign = "center";
            context.textBaseline = "top";
            context.fillStyle = 'blue';

            //Prepare textarea value to be drawn as multiline text
            var textval = msg.value;
            var textvalArr = toMultiLine(textval);
            var linespacing = 25;
            var startX = 0;
            var startY = 0;

            //Draw each line on canvas.
            for (var i = 0; i < textvalArr.length; i++) {
                context.fillText(textvalArr[i], x, y);
                y += linespacing;
            }
        }

        //Create an array where the <br/> tag splits the values.
        function toMultiLine(text) {
            var textArr = new Array();
            text = text.replace(/\n\r?/g, '<br/>');
            textArr = text.split("<br/>");
            return textArr;


            /*var vierkant = document.getElementById("canvas");
            var context = vierkant.getContext('2d');
            //formatting
            context.font = '15pt Calibri';
            context.fillStyle = 'blue';

            context.fillText('Departure Times bus X19:' + msg, 150, 100);*/
        }

        function OnFailed(error) {
            alert("failed");
        }

    }

HTML:

  <form id="Form1" runat="server">

    <input type="button" onclick="return Connect()" value="Bushours:" />

<canvas id="canvas" width="1900" height="200">Test<code>&lt;canvas&gt;</code> element.  
</canvas>

Maybe instead of '\n' in your code, you could try Environment.Newline? — Thijs, Mar 13 '13 at 15:17
@Thijs - as its html
will work insteadd of \n check my answer — Pranay Rana, Mar 13 '13 at 15:18

score 2 · Answer 1 · edited May 23 '17 at 12:11

2

If you want break than use <br/> instead of \n

So your C# code will be like this:

times += dataReader.GetString(0) + "<br/>";

Because \n is not get interpreted in break, but <br/>

There's a sample of how to do this in this answer: HTML5 canvas ctx.fillText won't do line breaks?

edited May 23 '17 at 12:11

Community

1
1

answered Mar 13 '13 at 15:16

Pranay Rana

175,020
35
237
263

@Eclectica_ - check the updates.. as you drawing text on canvas(might be this helps) – Pranay Rana Mar 13 '13 at 15:32

Split string (from C# functions) in breaks Javascript

1 Answers1