ASP.net & Javascript

What is Ajax life cycle in ASP.NET?

http://ajaxtutorials.com/general/client-side-page-life-cycle-with-updatepanel-with-javascript/

Why is Javascript affect gone after postback?

Issue

• When clicking on a button to get selected option of a drop down list, the selected option is incorrect

Relevant information

• After page is loaded, a Javascript adds an blank option into the drop down list, set the selected option as this blank option
• Issue is: When clicking on a button to get selected option of a drop down list, the wanted result in C#(back-end) is the blank option but it is not

Reason

• This is because value changed in javascript side, are lost in postback request. Only exception is text type control which is like textbox

Solution

• When selecting drop down list from javascript, at the same time set that value into hidden textbox.
• After postback on server side, we won’t get that updated drop down list but, we can know the selected option from hidden textbox

Why doesn’t print button of “telerik:ReportViewer” work in Chrome?

• It’s just because Telerik library is old and need to be updated
• Other solution for this

  [js]
  // Browser detection
  function get_browser_info(){
  var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  if(/trident/i.test(M[1])){
  tem=/\brv[ :]+(\d+)/g.exec(ua) || [];
  return {name:’IE ‘,version:(tem[1]||”)};
  }
  [/js]

  [js]
  if(M[1]===’Chrome’){
  tem=ua.match(/\bOPR\/(\d+)/)
  if(tem!=null) {return {name:’Opera’, version:tem[1]};}
  }
  M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, ‘-?’];
  if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
  return {
  name: M[0],
  version: M[1]
  };
  }

  // Get EndRequest
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
  </asp:ScriptManager>

  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_endRequest(endRequest);
  function endRequest(sender, pageLoadedEventArgs) {

  if ($get(‘pnlForm’).style.display != ‘none’)
  {
  // Print Form is clicked
  var browser=get_browser_info();
  if (browser.name == ‘Chrome’)
  {
  // User is using Chrome
  PrintFormForChrome();
  }
  }
  }

  var countTimes = 0;
  function PrintFormForChrome()
  {
  countTimes++;
  if (countTimes == 15)
  {
  // After 15 seconds, give up
  countTimes = 0;
  return;
  }
  var srcPrintElem = document.getElementById(‘ReportViewer1ReportFrame’);
  if (srcPrintElem != null)
  {
  var srcPrint = srcPrintElem.getAttribute(‘src’);
  if (srcPrint.indexOf(‘ReportViewer’) > 0)
  {
  $get(‘pnlForm’).style.display = ‘none’;
  countTimes = 0;
  window.open(srcPrint, ”, ”, false);
  //var previewWnd = window.open(srcPrint, ”, ”, false);
  //previewWnd.print();
  //previewWnd.open();
  } else
  {
  setTimeout(function() {
  PrintFormForChrome();
  },1000); // 1s
  }
  }
  }[/js]

  How to get value on Front End from SQL server?

  • aspx file call a back end function (via Web method) requesting SQL server to call a stored procedure
  • Method 1
    [js]
    PageMethods.[FunctionName]([param_01],[param_02],[..],[success_function],[failure_function]);
    // [FunctionName] is the function being defined at aspx.cs file
    // This function will call other function to access DB

    // [success_function],[failure_function] are defined in Javascript
    function success_function(strResults, context) {
    console.log(strResults);
    }

    function failure_function(error) {
    alert(error.get_message());
    }
    [/js]

  • Method 2
    [js]
    xhpCall = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject(“Microsoft.XMLHTTP”);
    xhpCall.onreadystatechange = [return_function];
    xhpCall.open(“POST”, “[backend_className].reliability?[param01]=[value01]&[param02]=[value02]&[param03]=[value03]”, false);
    xhpCall.send();

    function return_function()
    {
    if (xhpCall.readyState == 4)
    {
    console.log(xhpCall.responseText);
    }
    }
    [/js]

  • Method3
    [js]
    var url = “[backend_className].reliability?[param01]=[value01]&[param02]=[value02]&[param03]=[value03]”;
    ajaxWebRequest(url, return_function);

    function return_function(result, eventArgs) {
    if (result.get_responseAvailable()) {
    console.log(result.get_responseData());
    }
    }

    function ajaxWebRequest(url,method)
    {
    //var newDate=Date();
    var rand = Math.random();
    rand = rand.toString().substring(rand.toString().indexOf(‘.’)+1);
    var webRequest = new Sys.Net.WebRequest();
    webRequest.set_url(url+”&noCachedCall=”+rand.toString());//call handler instead of cache
    webRequest.add_completed(method);
    webRequest.invoke();
    }
    [/js]

  • Stored Procedure returns data set to back-end, back-end pass this to front end as XML format
  • JavasScript on aspx file will use this value to show on screen

  How to get value on Front End from Back End?

  • C#

    [c]
    protected int userAuto = 0;
    protected void Page_Load(object sender, EventArgs e)
    {
    userAuto = ___;
    }[/c]

  • JavasScript

    [js]
    
    
    
    [/js]

  How to embed attribute to HTML tag being run ‘at server’?

  • aspx file

    [html]
    
    [/html]

  • js file

    [js]
    
    [/js]