How do I use SyncFusion Signature Box - asp.net

I'll be frank, I have little to no experience in asp.net. I've been building a website in Web Forms for a past few weeks. I would like to put a Signature control on a page on this site. I'm using SyncFusion.
I tried to add it to a new web form for testing;
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<%# Register Assembly="Syncfusion.EJ.Web, Version=14.4460.0.15, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ej:Signature ID="Signature1" runat="server"></ej:Signature>
</div>
</form>
</body>
</html>
But all I get is a blank page. What am I doing wrong?
EDIT:
This is the page source in the empty browser;
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./test.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="a7KupFN2IvhJ2xB1RbT9gIJGuq/sSUKCZso7ZYfDhZZR5c9XFfZfctDoaphqu0eXI/FCiapkZDDbKmONWUwSOmQKYeon2OakrX+JCtQ7AzWaYNkS0W6XPn/XQBIl+5gAepOk5prBxAIOUrIv0L7g5r3+LM7yeET8ztjWzCD5ADZ/Vu9CmgE/1wjB9IylHFpocDDNZu4mUru4RbOR0yPzeuhBBdXxMk2Vi7PIUHJ7Dk8cRKdncxSwSsQlUyAZxcl1ZxbUP/vGdOBcxmx2ReO/AS+VvvDZUlfMq8bLkyMc7UJH+Xl+jyxlRCVLkVWIeC5sdMhqPYgnK8MRmlEkba+Nlk2Bipz6IEpvDXw/j+dEUVu/sKoB2O/CJzryw+Hqk27AG67pYTkVs7PRDyFv0+D2it1m023YGbJJX6FxV8GqNeUpPI/kR66jpkZES2RzwWCw3wfdhDocvBTcPGndETFi2Ed1lwbXYeqUXG+ER6kV/PILZSUhj5c74u8QFaKOUtVRMN0mALPkt5VDfmD9CTaKsoHI8H2zBSXPLche+evxHY8dLVJpE5N2MqyT1ETGj+PEPC5hMKaFRyf1KVopBqbPcbmGE+r2bJ/KXwvddQucuIYJPKBNE3gK0ab30ewSHW0fOaums+7P0hN8btfvSQGkFZwfiKerQq8Okpup7DJTB2WE3WFowT7XqYvmoatuqDt80l3VJQovJ3Mg+sJY0lpTg0eikqto6evySKW12tC9tmevkvvnbpoi4fNlmna/rwcO8Nu/wF/ns91CpC2xVHYDsg0x5dYz9vTHRYxJvbbH5WnqtJ5donHgPoM1UqFbDNve" />
</div>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
typeof EJ_ClientSideOnPostBack == 'function' && EJ_ClientSideOnPostBack();
return true;
}
//]]>
</script>
<div>
<div id="Signature1"></div>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
</div>
<script type="text/javascript">
//<![CDATA[
$("#Signature1").ejSignature({"strokeWidth":2,"enabled":true,"height":"400px","backgroundColor":"#ffffff","strokeColor":"#000000","clientId":"Signature1","uniqueId":"Signature1"});
//]]>
</script>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"958d69901e2943e493e9b4da9976b691"}
</script>
<script type="text/javascript" src="http://localhost:55500/690a8379ccf649d289724e7760d89595/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>


Syncfusion Signature doesn't have any default height or width value. It has the both the height and width as 100% by default.It fits inside the given div. Hence we need to set the height value for the signature.
<div>
<ej:Signature ID="Signature1" height="400px" runat="server"></ej:Signature>
</div>

Related

asp net user control with angularjs

I'm using angularJS in an asp.net user control (UC), but, unfortunately, when I try to add my UC in my page, the whole page part that uses angular stops working.
I tried to use angular reference separate from UC and the page, but no success.
Page Code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Abc.aspx.cs" Inherits="WebApplication1.Abc" %>
<%# Register Src="~/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>
<!doctype html>
<html>
<head>
</head>
<body>
<uc1:filterUC runat="server" ID="filterUC" />
<div>
<label>Name:</label>
<input type="text" ng-model="myModel" placeholder="Enter a name here">
<hr>
<h1>Hello {{myModel}}!</h1>
</div>
</body>
</html>
UC code:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="filterUC.ascx.cs" Inherits="WebApplication1.filterUC" %>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
How can I accomplish it?
Regards.

I made your example work with these changes:
Move the script to invoke AngularJS into the page Abc.aspx.
Set in the <body> tag ng-app="app" and remove it from the div in your User Control.
Add a script to create your Angular app module.
<%# Register Src="~/Controls/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>
<!DOCTYPE html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script>
angular.module('app', []);
</script>
</head>
<body ng-app="app">
<div>
<label>Name:</label>
<input id="input1" type="text" ng-model="myModel" placeholder="Enter a name here">
<hr>
<h1>Hello {{myModel}}!</h1>
</div>
<uc1:filterUC runat="server" id="filterUC" />
</body>
</html>

nothing show in designer page After created the html page in .aspx in web form in visual studio?

i have created the .aspx in webform in visual studio. but after i have created the htmlcoding in source and then i could not see my form filling page in designer view in visual studio?
below i mentioned the html code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MainMaster.master.cs" Inherits="ssweb.Admin.MasterPages.MainMaster" %>
<!DOCTYPE html >
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>Specialed India</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"/>
</head>
<body>
<form >
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
</form>
</body>
</html>

after i analysed well in my code,
then the problem is, if i close the script tag in open tag itself.then i could not get any thing in designer view
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
if i close the script tag like() below , i can view the changes in designer view.
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" ></script>

CSS - Background-image not showing

This is my CSS:
body {
text-align:center;
vertical-align:central;
width:480px;
height:800px;
}
#content {
width:100px;
height:200px;
background-image:url("../App_GlobalResources/TopBanner.png");
display:inline-block;
}
And my HTML (Master page):
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Mobile.master.cs" Inherits="m.mysite" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TestTitle</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
test1234
</div>
<form id="form1" runat="server">
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And i have a Default.aspx site which uses my masterpage, but it simple wont show my image..
if i make an img scr tag in the html it shows fine.. so the path is correct.. what else could it be?
'
This is the output HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
TestTitle
</title>
<link href="App_Themes/MobileTheme/MobileLayout.css" type="text/css" rel="stylesheet" /> </head>
<body>
<div id="header">
test1234
</div>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkNWnHplPoHce7cSIeDENrnMaUn20Ibq7H6yKbaedCCPw=" />
</div>
<div id="content">
test
</div>
</form>
</body>
</html>

Okay it works now, seems like Internet explorer was looking in the wrong folder.. must be somekind om Visual studio bug/setting i diden't notice..

TinyMCE editor in Iframe and get value using Jquery

i have a .html page
<head>
<title></title>
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<iframe id="EditorFrame" src="UploadTemplates.aspx" frameborder="0" style="height: 551px;
width: 794px"></iframe>
<br />
<p>
<textarea id="TemplateEditor1" cols="50" rows="15">
</textarea>
</p>
<input id="SaveTemplate" type="button" value="Save" />
</div>
</body>
</html>
and i have a server side page called UploadTemplates.aspx which is the src of iframe and the MARKUP of UploadTemplates.aspx page is
<head id="Head1" runat="server">
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<p>
<textarea id="TemplateEditor" cols="50" rows="15" runat="server" class="tinymce">
</textarea>
</p>
</div>
</form>
</body>
</html>
now my question is that how can i get vlaue on my html page of Tiny Editor using jquery which is placed on another page called UploadTemplate.aspx please help

If you got two separate pages you will need to do an ajax request to regulary save the editors content and deliver the saved content back on ajax response,

jquery tabs and asp.net master pages issue

i have a website with master pages and content pages. the code for master page is:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
<form id="form1" runat="server">
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
And my content pages are like:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>
Now, the tabs renders perfectly but the text used inside tabs or section is displayed back again in each tab content.
Screenshot of how it is rendering:
And here is the rendered HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>
<body style="height: 800px">
<form method="post" action="TopDeals.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />
</div>
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<input name="ctl00$SearchBox" type="text" id="SearchBox" />
<input type="submit" name="ctl00$Search" value="Search" id="Search" />
</li>
</ul>
</div>
<div>
Top deals page.
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
Anyone can tell what I am doing wrong here?

The behavior that you are seeing is as per jQuery tabs - you are not using it correctly.
One of the typical use case scenario will have markup such as:
<div id="tabs">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
</ul>
<div id="tabs-1">
Tab 1 Content
</div>
<div id="tabs-2">
Tab 2 Content
</div>
</div>
Note local referencing href on li and corresponding tab content div (with same id).
In case, URLs are used then jquery tabs will create the content div automatically and load them using AJAX (see content via AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).
This is the case with your code, you are using urls - jquery is loading the url content in a tab. So, for first tab, you can see the content of TopDeals.aspx page - and this page use the same master and hence the tab markup appears in the content div.
EDIT: work-around
Firstly, opening a new page via tab is frowned upon by usability experts - check http://www.useit.com/alertbox/tabs.html! However, to achieve what you want, you need to set the href of active tab to a local link.
For example, in master page
<div id="TopNav">
<ul>
<li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
<li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
<li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
<div id="TabContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
Notice the placement of content placeholder. Now, in each page, you have to adjust the active's tab href accordingly. For example, in TopDeals.aspx, you have to add following line in say page_load or page_prerender:
Tab1.HRef = "#TabContent";
Instead of using hard-coded tab ids etc, I would suggest to use a Repeater in master page and populating it from code-behind. That way, you can expose ActiveTab property in master page (set by content pages) that will adjust href of the correct tab.
Finally last part is tab navigation: see this FAQ from jquery tabs so that when other tab is clicked, browser will open that page (instead of content getting loaded via AJAX).
EDIT: It appears that above FAQ has been removed by jquery team. To follow the tab URL, one needs handle select event - e.g.
$('.tabs').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
location.href = url; // follow url
return false; // to disable default handling
}
});

Resources