Rick Schott :: devlpr.net

Supporting WebForm Postbacks in a Non-WebForms application

rick schott — Tue, 30 Apr 2013 15:40:21 +0000

This is a little crazy but it does work. I have a mobile application framework to uses a couple legacy ASP.NET controls. I had a need for them to support postbacks. The real problem I have is that I don’t support ViewState, I don’t have a ScriptManager and my pages load via AJAX inside the jQuery Mobile framework.

So, even when ASP.NET recognized these controls needs more, my mobile framework ignores its, so what do to? I added some ASP.NET shims for __doPostBack and WebForm_FireDefaultButton.

[sourcecode language="html"]

…

[/sourcecode]

[sourcecode language="javascript"]
var theForm; //stupid .net shim

$(function () {
try {
theForm = document.forms['Form1'];
if (!theForm) {
theForm = document.Form1;
}
} catch (e) {
}
});

function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
if (!theForm.__EVENTTARGET) {
var _eventtarget = ‘’;
$(‘.aspNetHidden’).append(_eventtarget);
}
if (!theForm.__EVENTARGUMENT) {
var _eventarg = ‘’;

$(‘.aspNetHidden’).append(_eventarg);
}
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
[/sourcecode]

How to set the ASP.NET Form Action with jQuery Mobile AJAX requests that redirect

rick schott — Wed, 20 Feb 2013 21:17:55 +0000

A major problem I have had with using ASP.NET and jQuery Mobile is that jQuery Mobile turns most requests into an AJAX call. It’s very cool, and it is the crux of the framework, also is what makes it feel like a native app instead of a web page. If you are familiar with ASP.NET and it’s single form tag, you know it’s wants to control everything including the “action” of the form.

I know I know ASP.NET MVC…etc is better for jQuery Mobile, but in this specific case, I am tied to a big giant ASP.NET custom CMS engine.

So, what’s happens when we take ASP.NET out of the loop(ajax request/hijacks)? It’s not pretty and you will get all kinds of Event/ViewState errors, postbacks to the root, no events firing…etc. I played with lots of solutions and this is the one that works for me:

1. Disable ViewState and Event Validation
[sourcecode language="csharp"]
protected override void OnInit(EventArgs e)
{
Page.EnableEventValidation = false;
Page.EnableViewState = false;
base.OnInit(e);
}
[/sourcecode]

2. Always set the data-url of the jQuery Mobile page being viewed(this updates the browser url during a redirect)
[sourcecode language="html"]

……

[/sourcecode]

3. When the page inits set the form action with a little jQuery
[sourcecode language="javascript"]
$(document).bind(‘pageinit’, function (event) {
var activePage = $(event.target); //<—needed because $mobile.activePage isn’t available yet
$(‘form’).attr("action", activePage.attr("data-url"));
});
[/sourcecode]

How to get script tags with jQuery .find from ajax result

rick schott — Sun, 29 Apr 2012 04:18:00 +0000

[sourcecode language="javascript"]
$.ajax({
type: "GET",
dataType: ‘html’,
contentType: ‘application/x-www-form-urlencoded’,
url: ‘/url’,
success: function (data) {
//have to replace script or else jQuery will remove them
var parsedHTML = data.replace(/script/gi, ‘rickscript’);
$(parsedHTML).find(‘rickscript’).each(function (index, domEle) {
if (!$(this).attr(‘src’)) {
eval($(this).text()); //feeling lucky execute it
}
});
}
});
[/sourcecode]

Using ucajax to render UserControls via WCF

rick schott — Tue, 24 Jan 2012 15:09:44 +0000

I recently released an open source project called ucajaxÂ hosted onÂ GitHubÂ and also available viaÂ NuGet. The project’s main purpose is to render ASP.NET UserControls via web services, currently supporting WCF and WebMethods. Â It also comes will a fullyÂ functionalÂ demo that consumes the NuGet package and can be viewed live here.

There are fewÂ limitationsÂ such as postbacks, it doesn’t support them. Â Ucajax will also strip out resources/form tags…etc and only sends you the content of the UserControl. Â This is done for a few reasons. Â ASP.NET will get upset if new ViewState or forms get injected into the DOM that it doesn’t know about.

The simplest example is the Load Via Client WCF example.

1. Add ucajax to your project via NuGet:

2. Create a UserControl:

Markup:

[sourcecode language="html"]

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControlSimple.ascx.cs" Inherits="ucajax.web.Controls.UserControlSimple" %>

[/sourcecode]

Code-behind:

[sourcecode language="csharp"]
namespace ucajax.web.Controls
{
public partial class UserControlSimple : System.Web.UI.UserControl
{
public string TextProperty1 { get; set; }
public bool TextProperty2 { get; set; }
public bool AjaxAutoRefresh { get; set; }

protected void Page_Load(object sender, EventArgs e)
{
lblTextProperty1.Text = TextProperty1;
lblTextProperty2.Text = TextProperty2.ToString();
lblDateTime.Text = "Oh, look at the time: " + DateTime.Now.ToString();
lblReload.Visible = AjaxAutoRefresh;
}
}
}
[/sourcecode]

3. Add some markup to a .aspx:

[sourcecode language="html"]

[/sourcecode]

4. Add some script that will render the UserControl:

[sourcecode language="javascript"]
var baseUrl = "";
$(document).ready(function () {
var model = new $.ucajax.viewModel($.ucajax.DICTIONARY_TYPE.WCF);
model.ajaxControlViewModel.ControlPath = baseUrl + "Controls/UserControlSimple.ascx";
model.ajaxControlViewModel.ControlParams.push(new model.keyValuePair("TextProperty1", "Set via JavaScript, rendered via WCF!"));
model.ajaxControlViewModel.ControlParams.push(new model.keyValuePair("TextProperty2", "True"));
model.ajaxControlViewModel.ControlParams.push(new model.keyValuePair("AjaxAutoRefresh", "True"));

$().ucajax({ contentId: ‘AJAXContent’,
postData: model,
RESTUrl: baseUrl + ‘Service/AjaxContent.svc/GetAJAXControl’,
ajaxSpinnerId: ‘ajaxifyspinner’,
autoRefresh: true
});
});
[/sourcecode]

5. You now have a UserControl rendered via a WCF web service:

Now, go create something and tell me about, would love to hear your feedback!

Building a demo chat app in MVC3, backbone.js and a little SignalR for fun…

rick schott — Mon, 23 Jan 2012 14:34:25 +0000

I have been doing a lot of reading lately on backbone.js. One of the key features I wanted to explore was it’s concept of Models and how it keeps the server side in sync with RESTful JSON endpoints.

What is backbone.js?

BackboneÂ supplies structure to JavaScript-heavy applications by providingÂ modelsÂ with key-value binding and custom events,Â collectionsÂ with a rich API of enumerable functions,Â viewsÂ with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

I started searching the internet to find an example in the .NET world, surely someone has an example already? Â I did run across a few posts that got me in the right direction:

The Backbone.js Todo List Sample, Refactored â€“ Part 1Â via @robconery
ASP.NET MVC3 RESTful application tutorial with Backbone.js â€“ Part I
ASP.NET MVC3 RESTful application tutorial with Backbone.js â€“ Part II
ASP.NET MVC3 RESTful application tutorial with Backbone.js â€“ Part III
A Backbone.js demo app (Sinatra Backend)Â via ryandotsmith

The BitCandies series was more than I needed, the last article with Sinatra is what I was looking for. Â All I wanted to see was how backbone.js posts to the RESTful endpoints. Â If I could see that in action I knew I could do the same with MVC3 JsonResults in a Controller.

The chat demo:
This demo uses MVC3 Controllers as the RESTful JSON endpoints utilizing the Json ActionResult. I also made a MVC3 Model called Message to keep the client and server-side parity. I cheated with persistence using a static class, no database needed to run the demo. The original demo I forked from used setInterval to poll the server for new messages. This worked but for only one client. I wanted this to work like a real chat app would, so I replaced that with SignalR to let the clients know new messages have arrived and to update their data. I know I could replace the Controllers with SignalR all together but this is a demo to show how to use all the pieces, not a best practices.

/Views/Shared/_Layout.cshtml(script references needed)

[sourcecode language="html"]
………

………

………
[/sourcecode]

/Scripts/application .js (this is basically the single page appÂ initializerÂ for this example)

[sourcecode language="javascript"]
// SignalR Proxy created on the fly
var chat = $.connection.chat;

var Message = Backbone.Model.extend({});

var MessageStore = Backbone.Collection.extend({
model: Message,
url: ‘/messages’
});
var messages = new MessageStore;

var MessageView = Backbone.View.extend({

events: { "submit #chatForm" : "handleNewMessage" }

, handleNewMessage: function(data) {
var inputField = $(‘input[name=newMessageString]‘);
messages.create({ content: inputField.val() });

//signalr call to server
chat.send("dummy message, just signaling")
.done(function () {
console.log(‘Success!’)
})
.fail(function (e) {
console.warn(e);
})
inputField.val(”);
}

, render: function() {
var data = messages.map(function(message) { return message.get(‘content’) + ‘\n’});
var result = data.reduce(function(memo,str) { return memo + str }, ”);
$("#chatHistory").text(result);
return this;
}

});

messages.bind(‘add’, function(message) {
messages.fetch({success: function(){view.render();}});
});

var view = new MessageView({el: $(‘#chatArea’)});

//replaced with SignalR
//setInterval(function(){
// messages.fetch({success: function(){view.render();}});
//},10000)

// Declare a function on the chat hub so the server can invoke it
chat.reloadMessages = function (message) {
//server callback, reload messages from server via backbone!
messages.fetch({ success: function () { view.render(); } });
};

// Start the connection
$.connection.hub.start();

//get any messages on load, .fetch is backbone.js working here
messages.fetch({ success: function () { view.render(); } });
[/sourcecode]

/Models/MessageModels.cs

[sourcecode language="csharp"]
namespace BackboneMVC3SignalR.Models
{
public class Message
{
public string content { get; set; }
}

}
[/sourcecode]

/Controllers/MessagesController.cs

[sourcecode language="csharp"]
namespace BackboneMVC3SignalR.Controllers
{
public class MessagesController : Controller
{
//
// GET: /Messages/

public ActionResult Index()
{
List s = new List();
if (GlobalVariables.Messages != null)
{
s = GlobalVariables.Messages;

}

return Json(s, JsonRequestBehavior.AllowGet);
}

[HttpPost]
public ActionResult Index(string content)
{
List s = new List();
if (GlobalVariables.Messages != null)
{
s = GlobalVariables.Messages;

}
s.Add(new Message{ content = content});
GlobalVariables.Messages = s;

return Json(s, JsonRequestBehavior.AllowGet);

}

}
}
[/sourcecode]

/Hubs/Chat.cs

[sourcecode language="csharp"]
namespace BackboneMVC3SignalR.Hubs
{
public class Chat : Hub
{
public void Send(string message)
{
// Call the reloadMessages method on all clients
Clients.reloadMessages(message);
}
}
}
[/sourcecode]

Full working demo can be found on GitHub.

Postback UpatePanel on close of jQuery dialog

rick schott — Tue, 15 Nov 2011 18:43:41 +0000

Put a hidden asp:button within the UpdatePanel or outside and set it as an AsyncPostBackTrigger.
Call the js function from ItemDataBound if needed, passing in the ClientID of the hidden asp:button.
The js function will call the click event on the button passed in once the “OK” or whatever you set buttonTxt to, button is clicked.
You can then handle the UpdatePanel.Update automatically if the button is inside the UpdatePanel or call Update within the butHidden_Click.

Markup:

[sourcecode language="xml"]

[/sourcecode]

Script:
[sourcecode language="javascript"]
function showjQueryUIDialogOkBtnCallback(buttonToClick, dialogSelector, buttonTxt, isModal, width, height)
{
var buttonOpts = {};
buttonOpts[buttonTxt] = function () {
$("#" + buttonToClick).trigger(‘click’);
};

buttonOpts['Cancel'] = function () {
$(this).dialog("close");
$(this).dialog(‘destroy’);
}

$(dialogSelector).dialog({
resizable: false,
height: height,
width: width,
modal: isModal,
open: function (type, data) {
$(this).parent().appendTo("form"); //won’t postback unless within the form tag
},
buttons: buttonOpts

});

$(dialogSelector).dialog(‘open’);

}
[/sourcecode]

ASP.NET with jQuery popup dialog: how to post back on dialog closing

Cross browser keypress event handling

rick schott — Wed, 09 Nov 2011 18:46:20 +0000

Running example on JSFiddle:

[sourcecode language="javascript"]
$(document).ready(function () {
$("#TextBox1").live(‘keypress’, function (e) {
var kCode = e.keyCode || e.charCode; //cross browser check
//Mozilla and Safari define e.charCode, while IE defines e.keyCode which returns the ASCII value
if (kCode == 9) {
$("#TextBox2").focus();
}
});
});

[/sourcecode]

JavaScript Madness: Keyboard Events

Load dynamic controls without dll or project references and assign properties

rick schott — Fri, 04 Nov 2011 21:59:30 +0000

I recently had to load an instance of a specific control within a masterpage base class that had no direct references but would be available at run-time.Â Â Here is how I approached it.

I first used LoadControl via a fully qualified assembly name.Â I then used dynamic to set properties to bypass compile time checks:

[sourcecode language="csharp"]
Control knownControl = FindControl("KnownControl");
if (knownControl != null)
{
string assemblyName = "Com.YourNameSpace.UI";
string controlAssemblyName = string.Format("{0}.{1},{0}", assemblyName, "AwesomeControl");

Type type = Type.GetType(controlAssemblyName);
if (type != null)
{
dynamic control = LoadControl(type, null);
control.YourAwesomeName = "Awesome Name";
control.ShowAwesomeName = true;

knownControl.Controls.Add(control);
}
}
[/sourcecode]

A Glimpse into the future of MVC debugging

rick schott — Fri, 22 Apr 2011 12:36:24 +0000

What Firebug is for the client, Glimpse does for the server… in other words, a client side Glimpse into whats going on in your server.

jQuery Infinite Scroll with MVC 2

rick schott — Tue, 12 Apr 2011 17:55:36 +0000

The inspiration for this post came from answering a question on Stack Overflow:
jQuery Infinite Scroll and Gridview

Controller:
[sourcecode language="csharp"]

///

/// GET: /Widget/Search/
/// Displays search results.
///

///
///
public ActionResult Search(SearchType searchType, string s, [DefaultValue(1)]int page)
{
try
{
int batch = 20;
int fromRecord = 1;
int toRecord = batch;

if(page != 1)
{
toRecord = (batch * page);
fromRecord = (toRecord – (batch-1));

}

var widgets= _repos.Search(searchType, s, fromRecord, toRecord );

if (widgets.Count == 0)
{
InfoMsg("No widgets were found.");
}

if (Request.IsAjaxRequest())
{
if(widgets.Count > 0)
{
return View("SearchResultsLineItems", widgets);
}
else
{
return new ContentResult
{
ContentType = "text/html",
Content = "noresults",
ContentEncoding = System.Text.Encoding.UTF8
};
}

}

return View("SearchResults", widgets);
}
catch (Exception ex)
{
return HandleError(ex);
}
}

[/sourcecode]

View:
[sourcecode language="csharp"]
<% if (Model.Count > 0) { %>

<% Html.RenderPartial("SearchResultsLineItems", Model); %>

	Col1	Col2	Col3	Col4	Col5	Col6

<% } %>
[/sourcecode]

Script:
[sourcecode language="csharp"]

$(document).ready(function() {
initAutoPaging();
});

function initAutoPaging() {
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() – $(window).height()) {
loadMore()
}
});
}

var current = 1;
function loadMore() {
if (current > -1) {
if (!_isShowingDetails)
{
if (!$(‘#loadingSearchResults’).html()) {
current++;
$(‘#loadingSearchResults’).show();
$(‘#loadingSearchResults’).html("");
$.ajax({
async: true,
url: document.URL + "?&page=" + current,
contentType: "application/x-www-form-urlencoded",
dataType: "text",
success: function(data) {
if (data != ‘noresults’) {
$(‘#tblSearchResults tr:last’).after(data);
$(‘#loadingSearchResults’).hide();
$(‘#loadingSearchResults’).html(”);
highlightSearch();
} else {
current = -1;
$(‘#loadingSearchResults’).show();
$(‘#loadingSearchResults’).html("

– No more results —

");
}
}
});
}
}

}
}

[/sourcecode]