I have an MVC.NET app which using Knockout.js (+ knockout.mapping) to deal with some cascading dropdowns. The data for these comes from a WebAPI call to an external service. As it happens this service requires an authentication token which expires after 2 hours, so I have the MVC app put the data from the service in a System.Web.Caching.Cache and return it from there unless the token has expired where it will grab it again from the service.
This is working fine.
However when I need to get this to the View, I am currently using the following method, which is to have a property of the ViewModel that I assign the service/Cache data to and then do this in the view:
var model = new ViewModel(#Html.Raw(Json.Encode(Model.ReferenceData)))
ko.applyBindings(model);
where Model.ReferenceData is the data from the service.
again this is working fine, but... the thing is with this, that the page then has all that Json data dumped in it on each request.
I would like to use an external JS file for the ReferenceData as then at least it can be cached by the browser and lessen the weight of the page on future requests.
However, I imagine that the overhead of generating a JS file is not that small, along with – what I really need is it to generate a link to that file that changes in much the same way that the built in MVC bundling of js files works – generating a link with a querystring.
My question is: is there an easy way of doing this?
For sure I can, when the cache is filled that first time, generate a js file and reference that from the View, but as I say getting that to change its link each time it is refreshed – or at least working out whether the data in it has changed and updating it only then is where the problem lies.
Any insight to this would be of great help
Thanks
Nat
Version the JS file (you can keep a GUID in the file it-self).
In Application_Start() get this version ID to a static variable.
In your controller pass this static variable data to ViewBag.
Ref your script with this ID
When you regenerate the file, update the version in file as well as your static variable. Next request from the client get the new version with new key.
Now if you want to update clients on the new version you have to use bi-directional protocol like web sockets or long-polling.
Related
How can a Javascript variable set on a server(via properties file) be injected to an Angular js/JavaScript app?
There is a Java Jersey application that has client files (js, HTML, CSS, etc.) under the /src/main/webapp folder and there is a javascript variable that I would want to set before it gets served to the client. For example , please consider the following:
<script type="text/javascript">
var serverHost = "<%serverHost%>";
</script>
How can I replace the value of "<%serverHost%>" String with a value of my choice that will be evaluated at runtime? Preferably via properties.
The goal of this is that the client has Rest calls and the URL cannot be relative and has to be full because the application will be accessed via a different/middle man server, so ultimately the rest calls need to reach the originated host server. The value is need via a properties file so the application/same build can work on different environments.
Would appreciate any ideas.
Thank you
The problem you are trying to solve needs server side rendering.
In your case, for example,
You can retrieve the host URL from the properties file on the server side, pass it to the view using the controller, and in the view, using JSP tags, generate an HTML for which the serverHost variable is dynamically set
HOWEVER....
As you are using AngularJS, this type of rendering is clearly against Angular's philosophy.
You can create a constant in angular,
angular.module('myApp').constant('SERVER_URL', 'http://localhost:8000/');
You can set the value of this constant during the build.
OR
You can create a simple API where you'll retrieve the host url value from the properties file, preferably in JSON format, then you can simply call that API to set this constant value.
today a question was raised here and I don't have an evident answer.
Assume that we concatenate and minify all resource files (CSS and Javascript) and declare them in the "Master-Page".
On a multi-page app, if a CSS file changes it will be recharged on the next full page load.
On a single-page app, the user can keep working for days and never recharge the main page where the CSS files are declared. The user will never see the changes until a Ctrl-F5 is issued.
I'm sure someone already thought of this and have an experience to share :)
For me, using WebSockets is not an option. First because it's overkill and second because not all my clients support the technology. Same reason applies to all WebSockets fallbacks... I won't keep hitting my servers because of this.
So, any ideas anyone? :)
BTW, we're using AngularJS if that can help for a specific solution.
Thanks!
I've getting through this same problem. My solution which is opinionated and may not respond to your criterias:
When I package my front-app and my server-app, I share a configuration file containing the current version of the front-app.
Front side: 75% of my routes change implicitly call a Webservice (route change resolve). SO each time I call my server I include a custom HTTP header (or a GET/POST param) containing the client version of the front-app.
Server side : I compare the front-app version (the one in the browser of the user, loaded last time user refreshed/loaded the SPA) with the front-app version of the shared configuration file :
If version matches : I Do nothing.
If version don't match I send a custom HTTP status error code (418 for example)
Then front side: I added a response Interceptor that intercepts any 418 error code and do a force-refresh of the whole app
That's it. Basically the event that "check" if the front-app version is the latest is a route change (that calls a WS via ajax). But you could add some infinite $interval calling a dedicated WS each 5 minutes or so...
I can add some code if needed.
Hope this helps ;)
Assuming that you are using AngularJS' routing via $route service and provider, then you can use $routeChangeSuccess event to perform a server request if there are significant changes that needs to be changed; if there are any then you can do a window.location.reload() to refresh the page and get all the updated resources and htmls.
The following process can be changed depending on how you want to implement it:
1. Setup a config file in your server indicating the app's version. You may also choose to assign different versions for different files but since you have concatenated all your resource files then I guess you may limit your version options in your configuration.
2. Create a service that contains all the necessary information(versions of files from the server) and methods to perform a server request to your server to check against the current file versions stored in the service.
3. Use $routeChangeSuccess event to perform a server request using the service that you have created in step 2, if the request returned a valid confirmation that there were changes then do the force page reload via window.location.reload().
I decided to add my final thoughts as an answer here too:
We went for a reduced solution for now.
As we have a "proxy service" that is (again for now) the only one that interacts with this application, we added the application version on the http header of all responses. If we receive a newer version, a popup appears notifying the user and a full page refresh is issued...
This solution won't work for applications that don't have their own "private" service.
I'm building an ASP.NET MVC 4 website that needs to be available offline (HTML 5 manifests/caching), so I will be unable to take advantage of server side HTML generation.
Right now, I just have generic/cacheable HTML on the View (.cshtml) and I'm making jQuery AJAX calls on document ready to load the data from the server and using mustache.js to generate the HTML.
Being constrained to doing HTML generation only in the client side, I'm unable to use Url.RouteUrl to generate links and also constrained to having to parse the current URL manually when navigating to a details page, and using the Id (or whatever the parameter is) to make the AJAX call to retrieve the information for the specific record that I need.
Since I'm still using MVC URL Routing (and would like to keep using it) to return the corresponding View (as in, http://localhost:27954/Route/Test2/7?mytext=hellow), I'll need a javascript or jQuery function to both be able to parse URL's and retrieve the value for a given querystring parameter, and ideally another method to generate URLs.
Since I'm obviously not the first person in this situation, I was wondering if anyone had any proven methods already that they could share, or any recommendations.
Thanks!
I have a Google map on my web site which I need its markers to be updated by timer.
My solution is:
Make a SQL query to the server DB.
Get the SqlDataReader.
Pass it to the JS code (which manage the map) by a function (RegisterStartupScript?)
The JS clears all existing markers and set new ones according to the SqlDataReader data.
I don't want the whole page to be refreshed when this is done.
Your opinion?
I wouldn't create data access via javascript code, as this could potentially open your site up to various attacks such as SQL injection and XSS attacks. If you are using ASP.NET MVC, you could use a partial page inside your view that hits an action on a controller every N seconds (enforced using javascript), and returns data via a jsonresult (accessed using your sqldatareader, ideally using a repository to abstract data access).
I need to do as much as possible on the client side. In more details, I would like to use JavaScript to code an interface (which displays information to the user and which accepts and processes response from the user). I would like to use the web serve just to take a date file from there and then to send a modified data file back. In this respect I would like to know if the following is possible in JavaScript:
Can JavaScript read content of a external web page? In other words, on my local machine I run JavaScript which reads content of a given web page.
Can JavaScript process values filled in a HTML form? In other words, I use HTML and JavaScript to generate an HTML form. User is supposed to fill in the form and press a "Submit" button. Then data should be sent to the original HTML file (not to a web server). Then this data should be processed by JavaScript.
In the very end JavaScript will generate a local data-file and I want to send this file to a PHP web server. Can I do it with JavaScript?
Can I initiate an execution of a local program from JavaScript. To be more specific, the local program is written in Python.
I will appreciate any comments and answers.
It could technically, but can't in reality due to the same origin policy. This applies to both reading and writing external content. The best you can do is load an iframe with a different domain's page in it - but you can't access it programmatically. You can work around this in IE, see Andy E's answer.
Yes for the first part, mmmm not really for the second part - you can submit a form to a HTML page and read GET arguments using Javascript, but it's very limited (recommended maximum size of data around 1024 bytes). You should probably have all the intelligence on one page.
You can generate a file locally for the user to download using Downloadify. Generating a file and uploading it to a server won't be possible without user interaction. Generating data and sending it to a server as POST data should be possible, though.
This is very, very difficult. Due to security restrictions, in most browsers, it's mostly not possible without installing an extension or similar. Your best bet might be Internet Explorer's proprietary scripting languages (WScript, VBScript) in conjuction with the "security zones" model but I doubt whether the execution of local files is possible even there nowadays.
Using Internet Explorer with a local file, you can do some of what you're trying to do:
It's true that pages are limited by the same origin policy (see Pekka's link). But this can be worked around in IE using the WinHttpRequest COM interface.
As Pekka mentioned, the best you can manage is GET requests (using window.location.search). POST request variables are completely unobtainable.
You can use the COM interface for FileSystemObject to read & write local text files.
You can use the WScript.Shell interface's Exec method to execute a local program.
So just about everything you asked is attainable, if you're willing to use Internet Explorer. The COM interfaces will require explicit permission to run (a la the yellow alert bar that appears). You could also look at creating a Windows Desktop Gadget (Vista or Win 7) or a HTML Application (HTA) to achieve your goal.
Failing all that, turn your computer into a real server using XAMPP and write your pages in PHP.
see i got what you want to do
best things is do following
choose a javascript library (eg:jquery,dojo,yui etc), i use jquery.this will decrease some of your load
inspite of saving forms data in in a local file, store them in local variables process them and send them to server (for further processing like adding/updating database etc) using XMLHttp request, and when webservice returns data process that data and update dom.
i am showing you a sample
--this is dom
Name:<input type='text' id='name' />
<a href='javascript:void(0)' onClick='submit()'>Submit Form</a>
<br>
<div id='target'></div>
--this is js
function submit()
{
var _name=$('#name').val();// collect text box's data
//now validate it or do any thing you want
callWebservice(_name,_suc,_err);
//above call service fn has to be created by you where you send this data
//this function automatically do xmlHttprequest etc for you
//you have to create it ur self
}
//call this fn when data is sucessfully returned from server
function _suc(data)
{
//webservice has returned data sucessefully
//data= data from server, may be in this case= "Hello user Name"; (name = filled in input box);
//update this data in target div(manipulate dom with new data);
$('#target').html(data);
}
function _err()
{
//call this fn when error occurs on server
}
// in reality most of the work is done using json. i have shown u the basic idea of how to use js to manipulate dom and call servcies and do rest things. this way we avoid page-reloads and new data is visible to viewer
I would answer saying there's a lot you can do, but then in the comment to the OP, you say "I would like to program a group game."
And so, my answer becomes only do on the client side what you are able and willing to double check on the server side. Never Trust the Client!
And I do not want to do my job twice.
If you are going to do things on the client side, you will have to do it twice, or else be subject to rampant cheating.
We had the same question when we started our project.In the end we moved everything we could on the JS side. Here's our stack:
The backend receives and send JSON data exclusively.We use Erlang, but Python would be the same. It handles the authentication/security and the storage.
The frontend, is in HTML+CSS for visual elements and JS for the logic.A JS template engine converts the JSON into HTML. We've built PURE, but there are plenty of others available. MVC can be an overkill on the browser side, but IMO using a template engine is the least separation you can do.
The response time is amazing. Once the page and the JS/CSS are loaded(fresh or from the cache), only the data cross the network for each request.