Help on designing Connected device dash board
Question
Answers
All replies
-
User-1838255255 posted
Hi sergeC,
According to your description and image, I design a board is similar with image, you can use Ajax to call webservice, then return need data. In my sample, I suppose have get data.
I use percent to set width and height of elements, also you can set it use bootstrap, it is a responsive jQuery framework, you can learn it in this website:
Sample Code:
<head runat="server"> <title></title> <style> .box { width: 30%; height: 90%; margin-left: 2%; margin-top: 1.5%; border: 1px solid green; float: left; } .btn { margin-top: 10%; margin-left: 30%; border-radius: 5px; background: white; color: black; width: 40%; height: 20%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <div style="width: 50%; height: 170px; border: 1px solid red"> <div id="box1" class="box"> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn" /> </div> <div id="box2" class="box"> <asp:Button ID="Button2" runat="server" Text="Button" CssClass="btn" /> </div> <div id="box3" class="box"> <asp:Button ID="Button3" runat="server" Text="Button" CssClass="btn" /> </div> </div> </div> <script> var lab = ['Device name : ', 'IP Address : ', 'Mac Adress : ', 'Device Type : ']; var box1 = ['mobile phone', '10.168.172.190', ' 01-23-45-67-89-ab-cd-ef', 'mobile client']; var box2 = ['pad', '10.168.172.190', ' 01-23-45-67-89-ab-cd-ef', 'Table client']; var box3 = ['computer', '10.168.172.190', ' 01-23-45-67-89-ab-cd-ef', 'PC client']; $(function () { debugger; var labjson = lab; for (var i = 0; i < box1.length; i++) { $("#Button1").before( "<text>" + "<label style='color:orange'>" + lab[i] + "</label>" + box1[i] + "</text>" + "</br>" ); } for (var i = 0; i < box2.length; i++) { $("#Button2").before( "<text>" + "<label style='color:orange'>" + lab[i] + "</label>" + box2[i] + "</text>" + "</br>" ); } for (var i = 0; i < box3.length; i++) { $("#Button3").before( "<text>" + "<label style='color:orange'>" + lab[i] + "</label>" + box3[i] + "</text>" + "</br>" ); } }) </script> </form>Result:
If this reply can not solve your problem or something not satisfied, please let me know!
Best Regards,
Eric Du
-
User-271186128 posted
Hi sergeC,
You could refer to the following code:
Code behind (web method):
//query database and get all device and convert it to object list. [System.Web.Services.WebMethod] public static List<DeviceModel> GetDevice() { List<DeviceModel> itemlist = new List<DeviceModel>() { new DeviceModel() { ID=1001, Name = "Device1", IPAddress="10.128.172.1", Image="Images/Image1.jpg" }, new DeviceModel() { ID=1002, Name = "Device2", IPAddress="10.128.172.2", Image="Images/Image2.jpg" }, new DeviceModel() { ID=1003, Name = "Device3", IPAddress="10.128.172.3", Image="Images/Image3.jpg" }, new DeviceModel() { ID=1004, Name = "Device4", IPAddress="10.128.172.4", Image="Images/Image4.jpg" }, new DeviceModel() { ID=1005, Name = "Device5", IPAddress="10.128.172.5", Image="Images/Image5.jpg" } }; return itemlist; }Code in page (.aspx):
<%-- JQuery and Bootstrap reference --%> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { $("#btnGetDevice").click(function () { //Using Ajax function all web method to get all devices $.ajax({ type: "POST", url: "JQ_WebService.aspx/GetDevice", contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { //dynamically create html elements and attach bootstrap css style. var html = "<table class='table table-bordered'><tr>" //using each function to loop through the device list. $.each(result.d, function (index, element) { html += "<td style='text-align:center'>" + "<img style='width:auto; height:50px' src='" + element.Image + "' /> <br />" + "<span>" + element.IPAddress + "</span><br />" + "<span>" + element.Name + "</span><br />" + "<input id='btn' class='btn btn-info' type='button' value='Sync Now' data-DeviceID ='" + element.ID + "' />" + "</td>"; if (index % 3 == 2) { html+="</tr><tr>" } }); html += "</table>" $("#div_device").append(html); }, error: function (r) { alert("error"); }, failure: function (r) { alert("failure"); } }); return false; }); }); </script> <input id="btnGetDevice" type="button" value="Get Device" /> <div id="div_device" style="background-color:antiquewhite" class="col-xs-12 col-sm-12 col-lg-12"> </div>The output as below:
Best regards,
Dillion
