I am writing an Ajax Server Control in ASP.NET C# 4.0 in VS 2010.
After writing the javascript prototype class by hand, I don't know of a way to compile and debug file. To see why my "onclick" event doesn't work.
I'm creating an Ajax Server control by inheriting from Control & IScriptControl, and trying to get an onclick event handler to work. The written control is actually a "DIV". Can someone tell me why it doesn't work?
Thanks
public class FrebbleSquare : Control, IScriptControl
{
.
.
.
IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
{
ScriptReference oRef1 = new ScriptReference("FrebbleAjaxControls.FrebbleSquare.js", this.GetType().Assembly.ToString());
ScriptReference oRef2 = new ScriptReference("FrebbleAjaxControls.prototype.js", this.GetType().Assembly.ToString());
ScriptReference oRef3 = new ScriptReference("FrebbleAjaxControls.scriptaculous.js", this.GetType().Assembly.ToString());
ScriptReference oRef4 = new ScriptReference("FrebbleAjaxControls.effects.js", this.GetType().Assembly.ToString());
return new ScriptReference[] { oRef1, oRef2, oRef3, oRef4 };
}
IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
{
ScriptControlDescriptor descriptor = new ScriptControlDescriptor("FrebblesAjax.FrebbleSquare", this.ClientID);
return new ScriptDescriptor[] { descriptor };
}
}
JAVASCRIPT CLIENT FILE :
Type.registerNamespace('FrebblesAjax');
FrebblesAjax.FrebbleSquare = function (element) {
FrebblesAjax.FrebbleSquare.initializeBase(this, [element]);
}
FrebblesAjax.FrebbleSquare.prototype =
{
initialize: function () {
FrebblesAjax.FrebbleSquare.callBaseMethod(this, 'initialize');
this._onclickHandler = Function.createDelegate(this, this._onClick);
$addHandlers(this.get_element(),
{ 'click': this._onClick,
},
this);
},
dispose: function () {
$clearHandlers(this.get_element());
FrebblesAjax.FrebbleSquare.callBaseMethod(this, 'dispose');
},
_onClick: function (e) {
alert('it worked!');
}
}
FrebblesAjax.FrebbleSquare.registerClass('FrebblesAjax.FrebbleSquare', Sys.UI.Control);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
If you can use Firefox, download the Firebug extension. When the page loads, right-click on the element that you created and select "inspect element". This way you can see all the structure, properties, and functions of the DOM as it currently exists. This is usually preferable to "view source" when you're working with JavaScript. You should be able to see which event handlers are bound and set breakpoints in the JavaScript debugger.
Related
I have created a simple installer for our product with only 1 component and no remote repositories manager.
When I start the uninstaller, the introduction page shows 3 radio buttons:
Package manager
Update components
Remove all components
I need only the third one, so I checked this documentation:
http://doc-snapshot.qt-project.org/qtifw-master/noninteractive.html
As I have understood and being unable to hide the buttons, I added this to my install.qs file:
function Controller()
{
}
Controller.prototype.IntroductionPageCallback = function()
{
gui.clickButton(buttons.NextButton);
}
This should auto-click Next on the introduction page so it should go directly to the uninstall page.
Nothing happens, what ever I write in the Controller functions, the introduction page shows the 3 radio buttons. I added some messagebox in the function and they are never called.
Somebody knows how to solve it ?
I think I have 2 working solutions.
First solution, if you want to have a single page uninstaller:
You need to create a Controller like the one you started before:
function Controller() {
if (installer.isUninstaller()) {
installer.setDefaultPageVisible(QInstaller.Introduction, false);
installer.setDefaultPageVisible(QInstaller.ComponentSelection, false);
installer.setDefaultPageVisible(QInstaller.LicenseCheck, false);
}
}
This will disable all pages in the classic install/uninstall workflow. Make sure to check you're in uninstall mode.
If you want a 2 pages uninstaller:
function Controller()
{
}
Controller.prototype.IntroductionPageCallback = function()
{
if (installer.isUninstaller()) {
// Get the current wizard page
var widget = gui.currentPageWidget();
if (widget != null) {
// Don't show buttons because we just want to uninstall the software
widget.findChild("PackageManagerRadioButton").visible = false;
widget.findChild("UpdaterRadioButton").visible = false;
widget.findChild("UninstallerRadioButton").visible = false;
}
}
}
Bonus
In installer mode, select by default "I accept" the Licence Agreement. Seriously, who doesn't?
Controller.prototype.LicenseAgreementPageCallback = function()
{
var widget = gui.currentPageWidget();
if (widget != null) {
widget.AcceptLicenseRadioButton.checked = true;
}
}
I have a click event bound to the following ko function:
self.select = function (entity, event) {
var ctrlPressed = false;
if (event.ctrlKey) { ctrlPressed = true; }
if (!ctrlPressed) {
manager.deselectAll();
this.selected(true);
} else {
this.selected() ? this.selected(false) : this.selected(true);
}
}
It is bound like so:
data-bind="click: select, event: { dblclick: function(){alert('test');}}"
This currently works except that it fires "select" twice when you double click, which I do not want. I tried following the advice in this SO question, but when I create the singleClick() function, I get an error that "ctrlKey is not a function of undefined". So it's not passing the event properly. Further more, the doubleClick() function in the other answer there doesn't work at all. It gives an error on the "handler.call" part saying handler is not defined.
So, how can I successfully call my ko select function on singleClick but NOT on doubleclick?
I don't think this is really a knockout issue. You have at least these two options:
1. Implement some custom logic that prevents processing if a single click has started processing already
2. Prevent the double-click function altogether. JQuery has this handy handler:
$(selector).on("dblclick", function(e){
e.preventDefault(); //cancel system double-click event
});
So I technically got it to work. Here is my new singleClick function
ko.bindingHandlers.singleClick = {
init: function (element, valueAccessor, c, viewModel) {
var handler = valueAccessor(),
delay = 400,
clickTimeout = false;
$(element).click(function (event) {
if (clickTimeout !== false) {
clearTimeout(clickTimeout);
clickTimeout = false;
} else {
clickTimeout = setTimeout(function () {
clickTimeout = false;
handler(viewModel, event);
}, delay);
}
});
}
};
This passes the viewModel and event to the handler so I can still modify observables and capture ctrlKey pressed.
The binding:
data-bind="singleClick: select, event: { dblclick: function(){alert('test');}}"
The problem is that now, obviously, single clicking an item has a delay while it waits to see if it's a double click. This is an inherent and unsolvable issue, I believe, so though this technically answers my question, I will consider a completely different route (ie, no double-clicking at all in my interface)
I have a ASP.Net C# 4.0 Web Application
I need to Add a scanning feature for my users.
This is what I want to achieve
On my web application
user clicks on a button
opens a window with preview of document in Scanning device attached to the client system
User confirms the Scan
this will save the Scanned document in jpg/pdf format on the server
then do the OCR on document
Can any one suggest a way to achieve this.
I read about this https://www.leadtools.com/sdk/engine/imaging not sure how much this can work. Can any one suggest a best way to get this done.
Thanks
update
tried leadtools from https://www.leadtools.com/support/forum/posts/m28036-Re--Scan-and-Upload-v16--NET-with-Caspol-exe-deployment as LEAD Support suggested but it is missing references not sure where and how to get those references
HaBo,
This is LEAD support. Since you mentioned our LEADTOOLS toolkit, the answer to your question is yes. Our toolkit can be used to implement either of the 2 approaches mentioned by tgolisch.
For the click-once approach, you simply use our Windows Forms controls that contain Twain support and package your application for ClickOnce deployment. This is done, for example, in this demo project:
LEADTOOLS ClickOnce Demos
For the custom control approach, see the example code projects on our forums that perform Scan and Upload
Solution is here:
In ASP.Net/Core Project you send message to call winform project:
var start = function () {
var i = 0;
var wsImpl = window.WebSocket || window.MozWebSocket;
window.ws = new wsImpl('ws://localhost:8181/');
ws.onmessage = function (e) {
$('#submit').hide();
$('#scanBtn').hide();
$('.loader').show();
if (typeof e.data === "string") {
//IF Received Data is String
}
else if (e.data instanceof ArrayBuffer) {
//IF Received Data is ArrayBuffer
}
else if (e.data instanceof Blob) {
i++;
var f = e.data;
f.name = "File" + i;
storedFiles.push(f);
formdata.append(f.name, f);
var reader = new FileReader();
reader.onload = function (e) {
var html = "<div class=\"col-sm-2 text-center\"
style=\"border: 1px solid black; margin-left: 2px;\"><img
height=\"200px\" width=\"200px\" src=\"" + e.target.result + "\"
data-file='" + f.name + "' class='selFile' title='Click to
remove'><br/>" + i + "</div>";
selDiv.append(html);
$('#submit').show();
$('#scanBtn').show();
$('.loader').hide();
}
reader.readAsDataURL(f);
}
};
ws.onopen = function () {
//Do whatever u want when connected succesfully
};
ws.onclose = function () {
$('.dalert').modal('show');
};
}
window.onload = start;
function scanImage() {
ws.send("1100");
};
https://javascript.info/websocket
In Winforms Project you scan document and send graphic data back to Asp.Net/Core project:
public partial class Form1 : Form
{
ImageCodecInfo _tiffCodecInfo;
TwainSession _twain;
bool _stopScan;
bool _loadingCaps;
List allSockets;
WebSocketServer server;
public Form1()
{
InitializeComponent();
if (NTwain.PlatformInfo.Current.IsApp64Bit)
{
Text = Text + " (64bit)";
}
else
{
Text = Text + " (32bit)";
}
foreach (var enc in ImageCodecInfo.GetImageEncoders())
{
if (enc.MimeType == "image/tiff") { _tiffCodecInfo = enc; break; }
}
this.WindowState = FormWindowState.Minimized;
this.ShowInTaskbar = false;
allSockets = new List<IWebSocketConnection>();
server = new WebSocketServer("ws://0.0.0.0:8181");
server.Start(socket =>
{
socket.OnOpen = () =>
{
Console.WriteLine("Open!");
allSockets.Add(socket);
};
socket.OnClose = () =>
{
Console.WriteLine("Close!");
allSockets.Remove(socket);
};
socket.OnMessage = message =>
{
if (message == "1100")
{
this.Invoke(new Action(()=> {
this.WindowState = FormWindowState.Normal;
}));
}
};
});
}
Link to project.
https://github.com/mgriit/ScanAppForWeb
You can remake this project, as you want.
Web browsers don't have permissions to use system devices like this(major security issue). There are 2 common ways of getting around this:
Make a custom control to run in your browser (flash, silverlight, java applet).
Make a "click-once deployment app" that a user launches from your page.
Both approaches would send the data back to your server via web
services or WCF, etc.
I have a button which calls stored procedure and binds gridview.
I found a code on stackoverflow for top alert bar like this:
function topBar(message) {
var alert = $('<div id="alert">' + message + '</div>');
$(document.body).append(alert);
var $alert = $('#alert');
if ($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 10000);
$alert.animate({ height: $alert.css('line-height') || '50px' }, 500).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({ height: '0' }, 200);
});
}
}
Then in my button I try to call this function like this:
Dim script As String = String.Format("topBar({0});", Server.HtmlEncode("Successfully Inserted"))
Response.Write(script) 'Or even like this
ClientScript.RegisterStartupScript(Page.GetType(), "topBar", script, True)
But it simply does not work.
Can you guide me in right direction?
I always sort this type of problems with supplying a Boolean Property whether javascript should fire a piece of script or not. For example :
public bool IsDone { get; set; }
Sorry that the code is in C#
This is a property on code behind file. When I need to fire the javascript method, I simply make this true.
What I do on the aspx page is as follows :
<script>
if(<%= IsDone.ToString().ToLower() %>) {
alert("Done!");
}
</script>
Scenario: I have a standard dropdown list and when the value in that dropdownlist changes I want to update another dropdownlist that exists in a tinyMCE control.
Currently it does what I want when I open the page (i.e. the first time)...
function changeParent() {
}
tinymce.create('tinymce.plugins.MoePlugin', {
createControl: function(n, cm) {
switch (n) {
case 'mylistbox':
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts',
onselect: function(v) {
tinyMCE.execCommand("mceInsertContent",false,v);
}
});
<% foreach (var insert in (ViewData["Inserts"] as List<String>)) { %> // This is .NET
yourobject = '<%= insert %>'; // This is JS AND .NET
mlb.add(yourobject, yourobject); // This is JavaScript
<% } %>
// Return the new listbox instance
return mlb;
}
return null;
}
});
<%= Html.DropDownList(Model.Record[184].ModelEntity.ModelEntityId.ToString(), ViewData["Containers"] as SelectList, new { onchange = "changeParent(); return false;" })%>
I am thinking the way to accomplish this (in the ChangeParentFunction) is to call a controller action to get a new list, then grab the 'mylistbox' object and reassign it, but am unsure how to put it all together.
As far as updating the TinyMCE listbox goes, you can try using a tinymce.ui.NativeListBox instead of the standard tinymce.ui.ListBox. You can do this by setting the last argument to cm.createListBox to tinymce.ui.NativeListBox. This way, you'll have a regular old <select> that you can update as you normally would.
The downside is that it looks like you'll need to manually hook up your own onchange listener since NativeListBox maintains its own list of items internally.
EDIT:
I played around a bit with this last night and here's what I've come up with.
First, here's how to use a native list box and wire up our own onChange handler, the TinyMCE way:
// Create a NativeListBox so we can easily modify the contents of the list.
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
As far as updating the list box at runtime, your idea of calling a controller action to get the new items is sound; I'm not familiar with ASP.NET, so I can't really help you there.
The ID of the <select> that TinyMCE creates takes the form editorId_controlId, where in your case controlId is "mylistbox". Firebug in Firefox is the easiest way to find the ID of the <select> :)
Here's the test button I added to my page to check if the above code was working:
<script type="text/javascript">
function doFoo() {
// Change "myEditor" below to the ID of your TinyMCE instance.
var insertsElem = document.getElementById("myEditor_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
optElem.value = "1";
optElem.text = "Foo";
insertsElem.add(optElem, null);
optElem = document.createElement("option");
optElem.value = "2";
optElem.text = "Bar";
insertsElem.add(optElem, null);
}
</script>
<button onclick="doFoo();">FOO</button>
Hope this helps, or at least gets you started.
Step 1 - Provide a JsonResult in your controller
public JsonResult GetInserts(int containerId)
{
//some code to get list of inserts here
List<string> somedata = doSomeStuff();
return Json(somedata);
}
Step 2 - Create javascript function to get Json results
function getInserts() {
var params = {};
params.containerId = $("#184").val();
$.getJSON("GetInserts", params, updateInserts);
};
updateInserts = function(data) {
var insertsElem = document.getElementById("183_mylistbox");
insertsElem.options.length = 1; // Remove all but the first option.
var optElem = document.createElement("option");
for (var item in data) {
optElem = document.createElement("option");
optElem.value = item;
optElem.text = data[item];
try {
insertsElem.add(optElem, null); // standards compliant browsers
}
catch(ex) {
insertsElem.add(optElem, item+1); // IE only (second paramater is the items position in the list)
}
}
};
Step 3 - Create NativeListBox (code above provided by ZoogieZork above)
var mlb = cm.createListBox('mylistbox', {
title: 'Inserts'
}, tinymce.ui.NativeListBox);
// Set our own change handler.
mlb.onPostRender.add(function(t) {
tinymce.dom.Event.add(t.id, 'change', function(e) {
var v = e.target.options[e.target.selectedIndex].value;
tinyMCE.activeEditor.execCommand("mceInsertContent", false, v);
e.target.selectedIndex = 0;
});
});
//populate inserts on listbox create
getInserts();