Post
Ask Question

Get Resolution Of Local Machine in TypeScript Using ASP.NET

Introduction

 
In this article, I will explain how to get user screen resolution or local machine resolution.
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
 
 application-name.jpg
 
Give the name of your application as "Get_Resolution" and then click "Ok".
 
Step 2
 
After this session, the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, and CSS file and aspx page.
 
 solution-explorer.jpg
 

Coding

 
Resolution.ts 
  1. class Get_Resolution {  
  2.  Resolution() {  
  3.   var txtwidth = < HTMLTextAreaElement > document.getElementById('txtwidth');  
  4.   var txtheight = < HTMLTextAreaElement > document.getElementById('txtheight');  
  5.   txtwidth.value = screen.width.toString();  
  6.   txtheight.value = screen.height.toString();  
  7.  }  
  8. }  
  9. window.onload = () => {  
  10.  var bttnresolution = document.getElementById("show");  
  11.  var obj = new Get_Resolution();  
  12.  bttnresolution.onclick = function() {  
  13.   obj.Resolution();  
  14.  }  
  15. };  
Get_Resolution_Demo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Get_Resolution_Demo.aspx.cs" Inherits="Get_Resolution.Get_Resolution_Demo" %>  
  2.  <  
  3.  !DOCTYPE html >  
  4.  <  
  5.  html xmlns = "http://www.w3.org/1999/xhtml" >  
  6.  <  
  7.  head runat = "server" >  
  8.  <  
  9.  title > < /title>  
  10.  <  
  11.  script src = "Resolution.js"  
  12. type = "text/javascript" > < /script>  
  13.  <  
  14.  style type = "text/css" > 
  15.  #txtwidth  
  16. {  
  17.  width: 71 px;  
  18. } 
  19. #  
  20. txtheight  
  21. {  
  22.  width: 68 px;  
  23. }  
  24. <  
  25. /style>  
  26. <  
  27. /head>  
  28. <  
  29. body >  
  30.  <  
  31.  form id = "form1"  
  32. runat = "server" >  
  33.  <  
  34.  h3 style = "color: #0033CC" > Get Resolution of Local Machine in TypeScript < /h3>  
  35.  &  
  36.  nbsp; < div id = "showdiv"  
  37. style = "font-weight: bold; height: 90px;"; >  
  38. Screen Width: & nbsp; & nbsp; < input id = "txtwidth"  
  39. type = "text" / > px < br / >  
  40.  <  
  41.  br / >  
  42.  Screen Height: & nbsp; < input id = "txtheight"  
  43. type = "text" / > px < br / >  
  44.  <  
  45.  br / >  
  46.  <  
  47.  /div>  
  48.  <  
  49.  /form>  
  50.  <  
  51.  p >  
  52.  <  
  53.  input id = "show"  
  54. type = "button"  
  55. value = "Get Resolution" / > < /p>  
  56.  <  
  57.  /body>  
  58.  <  
  59.  /html>  
Resolution.js
  1. var Get_Resolution = (function() {  
  2.  function Get_Resolution() {}  
  3.  Get_Resolution.prototype.Resolution = function() {  
  4.   var txtwidth = document.getElementById('txtwidth');  
  5.   var txtheight = document.getElementById('txtheight');  
  6.   txtwidth.value = screen.width.toString();  
  7.   txtheight.value = screen.height.toString();  
  8.  };  
  9.  return Get_Resolution;  
  10. })();  
  11. window.onload = function() {  
  12.  var bttnresolution = document.getElementById("show");  
  13.  var obj = new Get_Resolution();  
  14.  bttnresolution.onclick = function() {  
  15.   obj.Resolution();  
  16.  };  
  17. };  
Output 1
 
 first-image.jpg
 
Click on the "Get Resolution" button.
 
Output 2
 
 result.jpg
For more information, download the attached sample application.


Similar Articles