How do I update my html table using an object

Question

0.00/5 (No votes)

See more:

In Server, I have a DeviceData class which has DeviceName and IPAddress properties. These values are sent to my webClient(Html) using SignalR

C#

public class DeviceData
  {
      public string DeviceName { get; set; }
      public string IPAddress { get; set; }

  }

On my Client when I click a button (GetDeviceData), I get the details from Server, but I am able to upload the details in the object on to my html table.

Here is my html code:

XML

<body>
    <h1>Device List</h1>

    <div id="DeviceTable">
        <table border="1">
            <thead>
                <tr><td>DeviceName</td><td>IPAddress</td></tr>
            </thead>
            <tbody>
                <tr class="loading"><td colspan="5">loading...</td></tr>
            </tbody>
        </table>

        <input type="button" id="GetDeviceData" value="GetDeviceData" />
    </div>

  <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="Scripts/jquery-1.6.4.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            //Set the hubs URL for the connection
            var url = 'http://localhost:8080/signalr';

            var connection = $.hubConnection(url);

            // Declare a proxy to reference the hub.
            var hubProxy = connection.createHubProxy('HubClass');

            //var DeviceTextBox = $('#message');
            var $DeviceTable = $('#DeviceTable');
            var $DeviceTableBody = $DeviceTable.find('tbody');
              var rowTemplate = '<tr><td>DeviceName</td><td>IPAddress</td></tr>';

            hubProxy.on('DeviceDataResults', processDeviceDataResults);

            connection.start().done(function () {
                $('#GetDeviceData').click(function () {

                    hubProxy.invoke('GetDeviceData');
                });


            });



            function processDeviceDataResults(DeviceName) {

                $DeviceTableBody.empty();

               //Here I need to upload my table data



            };
        });



        </script>

Posted 1-Oct-14 16:24pm

CSharpNewbie 2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 2-Oct-14 0:26am

"I am unable..." is not informative. It needs comprehensive information on the problem. Any exceptions?
—SA

[no name] 7-Oct-14 6:19am

do you wanna render the html table dynamically according to your server datas? is that your requirement ?

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)