How to display data from server in textarea

Question

I have below code in C# which adds data in Dictionary

public static Dictionary<int, string> ReadFile()
{
        Dictionary<int, string> datalist = new Dictionary<int,string>();
        var lines = File.ReadAllLines(@"C:\\temp\\Sample.txt");
        int i = 1;
        foreach (var line in lines)
        {
            datalist.Add(i, line);
            i++;
        }
        return datalist;
}

Now, I want to display Dictionary data separated by key line by line in textarea. Below is my UI code

<button type="button" id ="GetFlatFile">Click Me!</button>

<div id ="DisplayFlatFile">

</div>

function GetFlatFileAndSetupColumn() {
        $("#GetFlatFile").click(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/ReadFile",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                cache: false,
                success: function (jsondata) {
                    mydata = jsondata.d;
                    $('#DisplayFlatFile').empty();
                    $('#DisplayFlatFile').append(mydata);
                }, error: function (x, e) {
                    alert("The call to the server side failed. " + x.responseText);
                }
            });
        });
    }

How to do it?

Answer 1

First, GetFlatFile is not a <textarea> element, it's <div> element. Assumed that jsondata.d contains dictionary values returned from code-behind method, you can use jQuery.each() to iterate values:

function GetFlatFileAndSetupColumn() {
    $("#GetFlatFile").click(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/ReadFile",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            cache: false,
            success: function (jsondata) {
                mydata = jsondata.d;
                $('#DisplayFlatFile').empty();

                // iterate keys and values here
                $(mydata).each(function (key, value) {

                    // data display example
                    $('#DisplayFlatFile').append(key + ' - ' + value);

                    // line break per iteration
                    $('#DisplayFlatFile').append('<br />');

                });
            }, error: function (x, e) {
                alert("The call to the server side failed. " + x.responseText);
            }
        });
    });
}

Additionally, your code-behind method should be marked with [WebMethod] attribute :

[WebMethod]
public static Dictionary<int, string> ReadFile()
{
    Dictionary<int, string> datalist = new Dictionary<int, string>();
    var lines = File.ReadAllLines(@"C:\\temp\\Sample.txt");
    int i = 1;
    foreach (var line in lines)
    {
        datalist.Add(i, line);
        i++;
    }
    return datalist;
}

Related issue:

How to get data from C# WebMethod as Dictionary<> and display response using jquery ajax?