PDA

View Full Version : How to pass information from ASP.NET to ExtJs?



dbassett74
13 Aug 2009, 8:33 AM
This is really geared towards using ExtJS on a IIS/ASP.NET server. Hopefully someone can help me out here. In IIS, you can specify to use Integrated Windows Authentication. When navigating to the site, the user is then prompted to enter a valid Windows account. Once they have successfully logged in, this creditional information is available via ASP.NET through the System.Web.HttpContext.Current.User.Identity object.

What I'm unsure of how to accomplish is somehow passing this to ExtJs as a variable or some other mechanism so that from with an ExtJs app, I can use this information when doing things like AjaxRequests, etc.

the problem is that ExtJs is executed via JavaScript, so I don't know how to get data from an ASP.NET page into ExtJs.

Any help would be appreciated.

dbassett74
13 Aug 2009, 9:10 AM
After a little bit of intuition, I found out a way to do this. Although it works, I'm not sure its the best way. Maybe someone can chime in here and tell me if what I'm doing is okay, or there is a better way:

In the asp page:


<asp:HiddenField ID="login" runat="server" />
In the asp code behind:


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
login.Value = System.Web.HttpContext.Current.User.Identity.Name
End Sub
In the JavaScript that loads ExtJs:


Ext.onReady(function() {
Ext.Msg.alert(document.getElementById("login").value);
});


Seems to work.

geewhizbang
13 Aug 2009, 9:54 AM
I am using Ext.Direct MVC pattern. There is a very lively thread about this in the Ext.Direct forum.

Ext.Direct hooks up ExtJS directly to functions on your server, and a very smart programmer has written some excellent wrappers around Ext.Direct and NewtonSoft JSON to make this happen. There is a sample ASP.net MVC app that installs easily and gets you started on this.

If you are writing a new app from scratch (like my company) this is a good way to go. There are somewhat difficult new metphors to learn, not the least of which is that there is not much need for asp.net serverside controls any more.

That may be a big pill for some to swallow, but I got tired of them a LONG time ago. Other than being easy to implement in a quick but dirty way, they never were much good for large scale apps since ASP.net controls are verbose, slow and not very friendly to CSS stylesheet control. The elaborate stateful metaphors of ASP.Net controls that make them easy to use (at least at first) comes at a huge price in performance and interface design flexibility.

They are so bad that M$ doesn't use them themselves on most of their big customer facing pages.

Instead of serverside controls, the best way to implement ExtJS under ASP.Net is to request data from MVC views and from Ext.Direct AJAX functions, and let ExtJS decorate the data with interfaces and layout on the client side.

So if you are going to use ExtJS effectively you need to learn new metaphors. If you do this correctly, it wouldn't be that hard to port your app to a completely different back end other than ASP.Net by the time you're done.

That alone speaks to how well the ExtJS metaphors decouple the layout and business rules of your app from the backend data services. It also has a huge advantage in application scalability because you offload the work of writing the display interfaces for your pages to all of the client computers browsing the application.

I've been rather lost for the past two weeks on the startup coding for a new app, but my coworkers are nevertheless very impressed with how well my new interfaces are working. I'm not sayin' it's easy to learn, but once you get there, the ExtJS metaphors are going to save you a lot of work and allow you to create a very robust, very fast application.

So I would start out in the ExtJS.Direct for asp.net forum.

geoffrey.mcgill
13 Aug 2009, 11:05 AM
Hi dbassett74,

Probably the most straightforward method of passing a value from the server-side to the client-side is by just inlining against a variable.


<script type="text/javascript">
var username = '<%= System.Web.HttpContext.Current.User.Identity.Name %>';

Ext.onReady(function () {
Ext.Msg.alert('Username', username);
});
</script>

Of course you can make it a little more elegant by creating a custom namespace object so you're not over polluting the global namespace.


<script type="text/javascript">
Ext.ns("CompanyX");

CompanyX = {
username : '<%= System.Web.HttpContext.Current.User.Identity.Name %>'
};

Ext.onReady(function () {
Ext.Msg.alert('Username', CompanyX.username);
});
</script>

Or, maybe even better is throwing the vars and logic into a closure, or some combination of both closure and ns.


<script type="text/javascript">
(function () {
var username = '<%= System.Web.HttpContext.Current.User.Identity.Name %>';

Ext.onReady(function () {
Ext.Msg.alert('Username', username);
});
})();
</script>

The value could obviously be fetched via ajax as well, although firing off a separate request might be overkill.

Hope this helps.

dbassett74
13 Aug 2009, 1:08 PM
Nice! I love your first example. That is so much cleaner than what I had and it works great. However, for some reason, it strips out the "\" from the username. For example, it should be:

Domain\Username

But using your way, it returns:

DomainUsername

Is JavaScript stripping out the "\"? I guess if that's how it will be, I can anticipate that, but I do think leaving in the "\" is more clean. Is there a way to fix this?

geoffrey.mcgill
13 Aug 2009, 1:15 PM
The "\" is an escape character, so you need to escape the escape character. The following demonstrates.

Example


<script type="text/javascript">
var username = '<%= System.Web.HttpContext.Current.User.Identity.Name.Replace("\\", "\\\\") %>';

Ext.onReady(function () {
Ext.Msg.alert('Username', username);
});
</script>

You would initially think just .Replace("\", "\\") would work, but in the .Replace Method the "\" is also treated as an escape char. So... you end of double escaping everything with Replace("\\", "\\\\");

You should be able to just encode the string value as well. I'll run a test a post another response using encoding.

Hope this helps.

geoffrey.mcgill
13 Aug 2009, 1:20 PM
meh... the .Replace Method is probably the easiest option. Stick with that.

thilakmsc
4 Jul 2012, 3:06 AM
Dear all .,

Mat i know how to pass value from Ext js control to server side(ASP.Net using AJAX)

Thnak you:(

sword-it
16 Jul 2012, 12:17 AM
Dear all .,

Mat i know how to pass value from Ext js control to server side(ASP.Net using AJAX)

Thnak you:(


Hi thilakmsc

ext js ajax :


Ext.Ajax.request({
url: 'your asp.net url'
, params: {} // your param object
, success: function(response){
// success
}
, failure: function(){
// failure
}

});


ASP.net get params:


// you can get params Request class
string myParam = HttpContext.Current.Request["your parameter"];

Regards