CameTooFar A Nerd's False Positive

How to: Pause/Resume BackgroundTransferRequest or BackgroundTransferService in Windows Phone

17. July 2013 05:12 by abhilashca in Windows Phone

Recently, I came across a requirement where I need to perform a background download; along with pause and resume support in Windows Phone 8. The first part is quite easy and straightforward. You can create a BackgroundTransferRequest and add it to the BackgroundTransferService. Done! The BackgroundTransferService class will take care of the background operations for you.

Now, coming to the pause-resume support. I think with current stock APIs for background operations, it's not possible to perform a pause-resume. Why it's so? Because few HTTP headers - If-Modified-Since, If-None-Match, If-Range, Range and Unless-Modified-Since are reserved for BackgroundTransferRequest. From these reserved headers, Range header can be used to download a resource partially by specifying the starting and ending bytes, something like Range: bytes=500-999.

Being said, you can implement a pause-resume or partial download using WebClient class and specifying HTTP Range header value. Unfortunately, this runs in foreground only. Means, while downloading a resource you "should" remain in the UI itself.

Hope this helps.

Thanks

Comments (3) -

patrick1981 8/3/2013 9:26:14 PM #
patrick1981

thanks for the good info

SA 10/13/2013 7:07:42 AM #
SA

I am also facing the same issue... however as "Range" header is reserved to be used by OS then the question comes up that in which scenario it will update "Range" header. Any ideas ??

abhilashca 10/13/2013 8:47:13 AM #
abhilashca

@SA - For BackgroundTransferRequest, the OS internally handles pause-resume feature. For example, lets say you are downloading a file using BackgroundTransferRequest and suddently your network goes off. What will happen? Downloads stops! And when, network comes back OS continues the download from where it's stopped. For that purpose, it needs the range header for specifying the starting and ending bytes. That's the reason, why those headers are reserved.
I hope it is clear now. Please let me know, in case of any doubts.
Thanks Smile

Comments are closed
CameTooFar | All posts tagged 'jquery'

CameTooFar A Nerd's False Positive

jQuery Context Menu and Modal Popup Extender in ASP.NET

24. October 2010 18:35 by abhilashca in AjaxControlToolkit, ASP.NET, jQuery, Rich UI


The behavior and nature of Web has changed over time. What everyone expects from a webpage is Richness. Last Week, I’s porting a Windows Application to  Web Application. So, naturally exists Context Menus and related WinForm dialog boxes. To reduce the learning curve in the Web Form, implementing the context-menu became an option. To the worst, Web Form don’t have any option for Context Menu, by default.

So, what about integrating a context-menu?

Getting Started

  1. Context Menu

    For displaying context-menu, we can use jQuery ContextMenu Plugin from JavaScriptToolBox. It’s a themed, light-weight and flexible context menu. Above all, easy to use and customize. Download it here.

  2. Dialog Box
    You can use Modal Popup Extender control in the AjaxControlToolkit for displaying the Dialog Box. Download it here.

Demo Sample

The sample demonstrated here copies the text content from one TextBox to another TextBox, via context-menu.

context_menu

If the text content to be copied is Empty, it prompts a Modal Popup to accept the text-content and copies the values into the second TextBox.

modal-popup

Download the demo here.

Under The Hoods

The concept is straight forward:

  1. Create Context-Menu
  2. Attach the Context Menu with the  ASP.NET/HTML controls where you need to display the context-menu on your mouse right-click.
  3. Create the dialog-box, using Modal Popup, that should be displayed on each Sub-Menu Item’s Click of your Context-Menu.
  4. On each Sub-Menu Item, Write/Call JavaScript methods to invoke the respective Modal Popups.

 Create Context-Menu

1. Include the following section in your <head> tag.

   1: <!-- jQuery 1.4.1 -->
   2: <script src="Scripts/jquery-1.4.1.js" type="text/javascript" />
   3: <!-- jQuery Context Menu -->
   4: <script type="text/javascript" src="Scripts/jquery.contextmenu.js" />
   5: <!-- Context Menu CSS (Style/Theme) -->
   6: <link href="jquery.contextmenu.css" rel="stylesheet" type="text/css" />


2. Define the context-menu

   1: // Create Context Menu
   2: var ctxtMenu = [
   3:     { 'Copy to Other Textbox': function (menuItem, menu) { TriggerCopyText(); } },
   4:     $.contextMenu.separator,
   5:     { 'Browser Version': function (menuItem, menu) { alert("Browser Version: " + window.navigator.appName); } },
   6:     $.contextMenu.separator,
   7:     { 'Undo Copy': { disabled: true} }
   8: ];


Attach Context Menu with ASP.NET/HTML Controls

   1: // Assign Context-Menu to Control
   2: $(function () {
   3:var txt1 = "#" + "<%= txtName.ClientID %>";
   4:  
   5:// Attach Context-Menu to Control
   6:     $(txt1).contextMenu(ctxtMenu, { theme: 'vista' });
   7: });

 

In the above code-snippet, besides attaching the context-menu to controls, we are setting the theme/style of the context-menu to Vista.

For detailed documentation and customization of Context-Menu, you can check here.

Create Dialog Box using Modal Popup

   1: <!-- Modal Popup : Panel -->
   2: <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup">
   3:<table style="width: 400px;">
   4:<tr>
   5: <td>
   6: &nbsp;
   7: </td>
   8: <td align="right">
   9: <asp:HyperLink ID="hlnkclose" NavigateUrl="javascript:void(0);" 
  10: runat="server">X</asp:HyperLink>
  11: </td>
  12:</tr>
  13:<tr>
  14: <td>
  15:                 Enter Text to be Copied:
  16: </td>
  17: <td>
  18: <asp:TextBox ID="txtPopup" runat="server"></asp:TextBox>
  19: </td>
  20:</tr>
  21:<tr>
  22: <td>
  23: &nbsp;
  24: </td>
  25: <td>
  26: &nbsp;
  27: </td>
  28:</tr>
  29:<tr>
  30: <td>
  31: &nbsp;
  32: </td>
  33: <td>
  34: <input id="htmlBtnOk" type="button" onclick="CopyText();" 
  35: value="Copy Text" />
  36: </td>
  37:</tr>
  38:</table>
  39: </asp:Panel>
  40: <!-- ModalPopup Extender -->
  41: <asp:ModalPopupExtender ID="mpeCommon" 
  42:PopupControlID="pnlPopup" 
  43:TargetControlID="btnDummy"
  44:CancelControlID="hlnkclose" 
  45:BackgroundCssClass="modalBackground" 
  46:runat="server">
  47: </asp:ModalPopupExtender>
  48: <!-- 
  49:     Dummy Button: 
  50:     -> used to set the Default TargetControlID of the ModalPopuExtender
  51: -->
  52: <asp:Button ID="btnDummy" Style="display: none;" runat="server" Text="Button" />

 

Invoke Modal Popup

Modal Popup can be invoked through show() via JavaScript.

   1:var mpeId = "<%= mpeCommon.ClientID %>"
   2:// Display Popup
   3:     $find(mpeId).show();

 

The Whole Story

The whole code can be summed up as follows:

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
   2: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
   3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4: <html xmlns="http://www.w3.org/1999/xhtml">
   5: <head runat="server">
   6:<title>ContextMenu in ASP.NET</title>
   7:<!-- Emulate IE7 -->
   8:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   9:<!-- Load jQuery -->
  10:<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
   1:  
   2:     <!-- Context Menu Js Script -->
   3:     <script src="Scripts/jquery.contextmenu.js" type="text/javascript">
   1: </script>
   2:     <!-- Context Meny Styles and Theme -->
   3:     <link href="jquery.contextmenu.css" rel="stylesheet" type="text/css" />
   4:     <!-- Modal Popup CSS -->
   5:     <link href="Style.css" rel="stylesheet" type="text/css" />
   6:     <script type="text/javascript">
   7:// Create Context Menu
   8:var ctxtMenu = [
   9:             { 'Copy to Other Textbox': function (menuItem, menu) { TriggerCopyText(); } },
  10:             $.contextMenu.separator,
  11:             { 'Browser Version': function (menuItem, menu) { alert("Browser Version: " + window.navigator.appName); } },
  12:             $.contextMenu.separator,
  13:             { 'Undo Copy': { disabled: true} }
  14:         ];
  15:  
  16:// Assign Context-Menu to Control
  17:         $(function () {
  18: var txt1 = "#" + "<%= txtName.ClientID %>";
  19:  
  20: // Attach Context-Menu to Control
  21:             $(txt1).contextMenu(ctxtMenu, { theme: 'vista' });
  22:         });
  23:  
  24:/*** User-Defined Function ***/
  25:  
  26:// Triggers/Initiates Copying Text
  27:function TriggerCopyText() {
  28: var txt1 = document.getElementById("<%= txtName.ClientID %>");// First TextBox ID
  29: var txt2 = document.getElementById("<%= txtCopyName.ClientID %>"); // Second TextBox ID
  30: var mpeId = "<%= mpeCommon.ClientID %>"// Get ModalPopupExtender Id
  31:  
  32: /***
  33:                 Check whether the Text is Empty or not
  34:                 If Empty, prompt a Modal Popup Extender to accept value 
  35:                 and copy it to the other TextBox
  36:             ***/
  37:  
  38: if (txt1.value.length == 0) {
  39: // Display Popup
  40:                 $find(mpeId).show();
  41:             }
  42: else {
  43: // Copy Text
  44:                 txt2.value = txt1.value;
  45:  
  46:                 alert("Text successfully copied");
  47:             }
  48:         }
  49:  
  50:// Copies Text from Modalpop to the Second Textbox
  51:function CopyText() {
  52: var txt2 = document.getElementById("<%= txtCopyName.ClientID %>"); // Second TextBox ID
  53: var txtPopup = $get("<%= txtPopup.ClientID %>");// Popup Control ID
  54: var mpeId = "<%= mpeCommon.ClientID %>"// Get ModalPopupExtender Id
  55:  
  56: // Copy Value
  57:             txt2.value = txtPopup.value;
  58:  
  59: // Hide ModalPopupExtender
  60:             $find(mpeId).hide();
  61:  
  62:             alert("Text successfully copied");
  63:         }
  64:
</script>
  11: </head>
  12: <body>
  13:<form id="form1" runat="server">
  14:<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  15:</asp:ToolkitScriptManager>
  16:  
  17:<div style="border-color: #e9eaf1; border-width: 1px; padding: 10px; border-style: solid; width: 300px; margin: 200px 0px 0px 500px;">
  18:<table style="width: 300px;">
  19: <tr>
  20: <td>Name:</td>
  21: <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
  22: </tr>
  23: <tr>
  24: <td>&nbsp;</td>
  25: <td>&nbsp;</td>
  26: </tr>
  27: <tr>
  28: <td>Copied Name:</td>
  29: <td><asp:TextBox ID="txtCopyName" runat="server"></asp:TextBox></td>
  30: </tr>
  31:</table>
  32:</div>
  33:<!-- Modal Popup : Panel -->
  34:<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup">
  35:<table style="width: 400px;">
  36: <tr>
  37: <td>&nbsp;</td>
  38: <td align="right">
  39: <asp:HyperLink ID="hlnkclose" NavigateUrl="javascript:void(0);" runat="server">X</asp:HyperLink>
  40: </td>
  41: </tr>
  42: <tr>
  43: <td>Enter Text to be Copied:</td>
  44: <td><asp:TextBox ID="txtPopup" runat="server"></asp:TextBox></td>
  45: </tr>
  46: <tr>
  47: <td>&nbsp;</td>
  48: <td>&nbsp;</td>
  49: </tr>
  50: <tr>
  51: <td>&nbsp;</td>
  52: <td><input id="htmlBtnOk" type="button" onclick="CopyText();" value="Copy Text" /></td>
  53: </tr>
  54:</table>
  55:</asp:Panel>
  56:<!-- ModalPopup Extender -->
  57:<asp:ModalPopupExtender ID="mpeCommon" PopupControlID="pnlPopup" TargetControlID="btnDummy"
  58:CancelControlID="hlnkclose" BackgroundCssClass="modalBackground" runat="server">
  59:</asp:ModalPopupExtender>
  60:<!-- 
  61:         Dummy Button: 
  62:         -> used to set the Default TargetControlID of the ModalPopuExtender
  63:     -->
  64:<asp:Button ID="btnDummy" Style="display: none;" runat="server" Text="Button" />
  65:</form>
  66: </body>
  67: </html>

 

Note

  1. Don’t forget to include the EmulateIE7 meta tag. Since, the context menu won’t render in IE9 Beta1, by default.
  2. $get() – is the short-cut for document.getElementById() function
  3. $find() – used to lookup for ASP.NET AJAX client-side Components by it’s ID.
  4. <%= servercontrol.ClientID %> – gives the ID of the server control rendered at client-side, ie in HTML.

Hope this helps. Got some more questions, drop it here.

Download the demo here.

Thanks.