I'm building a site with React and Asp.Net MVC. The site needs to be multi-language, I was planning on using the classic resx files for that.
I started doing this
#Html.React("FriendListContainer", new
{
initialData = Model,
getUrl = "/Friend/Get",
deleteUrl = "/Friend/Remove",
resFriends = Global.Friends // pass resource as prop
})
It works, but is far from ideal as this makes the code harder to read. Also I need to pass these props all the way down to the components that need them..
I tried using React-Intl but it does not work with server-side rendering. I would rather not go back to client-side rendering if possible.
How could I make this work without making my code look so clunky ?
Related
I am a newbie to JQM (I use 1.4.5) and my webapp (asp.net C# apache Cordova) contains many separate pages of .cshtml (single-page template) only. I am testing my webapp on a Samsung Galaxy Grand using Android 4.2.2
A.
I am not sure about my understanding of 'linking pages', even after reading all the JQM docs on this and also after reading up many, many posts on this topic about passing querystring values to another page; mainly because I find that ALMOST ALL the examples are directed towards providing answers for internal pages (Multi-Page template) within a single html page.
So I request some of you JQM experts to confirm or correct the following understanding of mine....
From the JQM docs I understood that
I could use in any link (e.g button), href="page2.cshtml?par1=1&par2=2"; and JQM will automatically use Ajax for this link to work.
I also understood that use of querystring is always allowed in such cases of different html pages of the same domain and it will work via Ajax automatically ; so long as the attr such as rel="external", data-ajax="false" etc. are not used in the same link.
but querystrings are not allowed in case of the internal pages (multi-page template) only....;
and if I need to use the above href to link to a page in another domain e.g. www.anotherdomain.com/page2.cshtml?par1=1&par2=2, then I need to use rel="external".
Are all my above points (that reflect my understanding) CORRECT? KIndly confirm ro please correct me ...
B.
In my app, I find that most of the links work according to my understanding as above, to connect to different pages in the same domain; and I assume it happens via Ajax. Is it correct? I am also able to use the querystring params in page2 ( i.e. To-Page).
But in one case, though it works, in the To-Page the Panel features do not operate correctly, unless I introduce rel="external' in the href link !!! I suppose it means it IS NOT AJAX anymore? Also I am unable to find the reason..
Further independent of the above topic, I face another issue. The loading time (i.e. Time taken to display the To-Page) varies.
Mostly it is OK, but at times the loading-circle goes on forever.... and I presume it has crashed....??? then If I go back using the back button and come forward again, many times it loads immediately...!!!!!
Any thoughts or suggestions.....?
Thanks in anticipation...
Ratna
Before you can worry about how to pass attributes from one page to another you need to understand the difference between multi-page and multi-HTML templates.
Multi HTML page template
Smaller and lighter, each data-role=”page” is inside a separate HTML file and page structure is much more modular.
Can become even smaller if every subsequent HTML page is stripped from HEAD content, or anything that isn’t data-role=”page” div. Unfortunately in this case fallback if JavaScript is not supported is out of question.
DOM size is relatively small, only first page is permanently loaded into the DOM, any other page will also be loaded into the DOM but at the same time it will also be removed when not used actively, basically each time you move from it.
Better fallback if JavaScript is not supported. Works great in desktop browsers after a page refresh, mainly because every HTML page has an existing HEAD content. This also allows your app to behave like normal web app mainly because AJAX can be turned off.
Multipage template
Since all pages are already loaded, no additional requests are generated for navigating between pages.
First load is slower as the file size is larger, but subsequent page navigation is fast, thus making transitions much more smooth. Almost native-like smooth, emphasize on almost.
Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support, thus making it a great solution for a hybrid app. It works much better as a Phonegap app then multi HTML template.
The “page” data-role element is required.
More about this topic can be found here: Multipage template vs Multi HTML template in jQuery Mobile
Now let's talk about how to properly pass data between jQuery Mobile pages.
jQuery Mobile uses AJAX by default
You can turn off AJAX using rel="external"
If you turn off AJAX you will lose almost everything good about jQuery Mobile, including animations. So if you don't want AJAX page handling better find some other responsive framework like Bootstrap or Foundation.
If you don't want to use AJAX you can still use querystrings but inside a href or via changePage function.
Better querystrings alternatives:
Global object.
If you're using AJAX you can simply use a global object(s) to store all of your data.
Something like this:
// Store object
var storeObject = {
parameter1: null,
parameter2 : null
}
Access data from the previous page
Again if you're using AJAX you don't need to pass any data because all that data is till in the DOM.
// Store object
$(document).on('pagebeforeshow', '#second', function(e, data){
alert("My name is " + data.prevPage.find('#test-input').val());
});
Localstorage or Sessionstorage
This solution will work no matter if you use AJAX or not.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#change-page-button', function(){
// store some data
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
// Change page
$.mobile.changePage("#second");
});
});
$(document).on('pagebeforeshow', '#second', function(){
alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
// Lets change localStorage data before we go to the next page
localStorage.firstname="NewFirstNeme";
localStorage.lastname="NewLastName";
});
$(document).on('pagebeforeshow', '#third', function(){
alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
});
Send data through changePage function or via href
// Send
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true});
or
Send parameter
receive that same data:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
If you need more information about this solutions including working examples find them here: Passing data between jQuery Mobile pages
Several methods mentioned here are deprecated (still usable) in the version 1.4. Though you don't need to worry about that, almost everything here will be unusable in version 1.5. This new version will overhaul jQuery Mobile from the bottom to the top.
Update
Yes, you can use any such link and jQuery Mobile will use AJAX. If you take a look at my previous examples you will find a working one.
If you want AJAX you CAN'T use rel="external", data-ajax="false" though stringquerys will work in bot cases.
Correct they will only work in multi-HTML template. Though there used to be a 3rd party plugin that allowed this to work with multi-page template but I don't think it works with newer jQuery Mobile versions.
Correct, if you want to link external page you need to use rel="external".
When building components in AEM, by default new components are created with an associated JSP file for rendering.
For builds using Sightly, each time a component is created the developer must delete the JSP file and create the required HTML file.
This leads to wasted time and effort, not to mention frustration for developers having to complete a repetitive task.
Can AEM be configured so the default rendering generated is HTML rather than JSP?
Thank you
I don't think such a configuration is possible in AEM, primarily because, the creation of component and its JSP is handled through Javascript.
/crx/de/js/CRX/plugins/action/CreateComponentAction.js
Even the initial content available within the JSP file is populated through this JS only.
A short snippet from the JS, is shown here
// create component JSP
var nodeName = label + ".jsp";
var compJspFile = CRX.Util.createNode(nodeName, nodeName,
CRX.util.NT_FILE, component, loader);
Ok, I'm still new to Asp.Net and MVC3. I'm becoming more familiar with things but still experimenting after finishing my first web application (a simple web form submission into a database). Now I am working on smaller projects such as converting some old ColdFusion web forms that submit e-mails. I've easily accomplished this in MVC3 but all of our web pages are in a separate content management system where our central HTML template is. I've already asked a question about this here and didn't get anywhere.
What we have is the majority of our web pages get exported from the CMS as straight HTML files, and only the ones that need database access or a programming language are exported as ColdFusion. It's very easy to "include" ColdFusion code to use inside of the template in our CMS. I would love to be able to use this HTML template in my mvc3 project but I've found no way to perform an "include" or link to an external file. I'm not sure how this would work anyway, so I settled on just copy/pasting the template to mvc3 and figuring out a way I can share this template (now a "layout") between all of the small projects I'll be working on. If the template changes I do not want to have to update every single little mvc3 web application. I learned about using "Areas" but it seems you can't just publish a single area to a folder on the web server, the whole project has to be deployed.
All I really need is a way for small mvc3 projects to use one template and these small mvc3 projects to be scattered all over our web server. Would this best be done in one large project that publishes to multiple different folders, or as many small projects that can share a common layout? Is either of these two possible?
After attempting and experimenting with all of this, I'm beginning to think MVC is not going to work with what I want. It seems better suited for intranet applications or entire web sites, not this little "here and there" applications like what I want. Should I learn Web Forms instead? I know I can "include" a aspx file inside our CMS much like I do with ColdFusion.
Do your templates have to be "exported" from the CMS? Or, can you have a template that "lives" on a static CMS URL? This is what we do for apps that need db access / can't be easily done within the CMS, but need to share the same look and feel.
What you can do is have your plain old HTML file live at a URL, for example, https://cms.domain.tld/templates/designxyz.html. That file will serve up a basic layout, except where your custom app content goes, you simply have the string "content goes here".
Then, from the MVC app, you can call this URL to get the HTML content as a string. Once you have the string, you can split it in 2 before and after the "content goes here" string. Then, in your layout.cshtml file, you can do something like this:
#{
const string contentPlaceholder = "content goes here";
var allHtml = GetHtmlTemplateFromLiveServer();
var index = allHtml.IndexOf(contentPlaceholder);
var topHtml = allHtml.Substring(0, index);
var botHtml = allHtml.Substring(index + contentPlaceHolder.Length);
}
#topHtml
#RenderBody()
#botHtml
If something like this works, you can then abstract all of this away into a HTML Helper, then reuse that helper in other projects (NuGet would be good for this).
_Layout.cshtml
#{
var options = new CmsTemplateRenderOptions
{
Url = "https://cms.domain.tld/templates/designxyz.html",
Cache = new TimeSpan(1, 0, 0);
};
}
#Html.RenderCmsTemplate(CmsTemplateRenderRegion.Top, options)
#RenderBody()
#Html.RenderCmsTemplate(CmsTemplateRenderRegion.Bottom, options)
Then, to update the layout for all of your apps, you would just publish changes to the https://cms.domain.tld/templates/designxyz.html URL.
I could do with a little guidance if possible..
I'm building a class library to contain custom web controls. I've transformed many of the jQuery UI elements into .NET classes for dynamic use in pages. e.g.
Dim Msg As New Dialog("Dialog Title", New LiteralControl("Dialog Content"))
Msg.Width.Value = 500
Msg.Height.Value = 300
Me.Controls.Add(Msg )
The necessary scripts get inserted into the head during CreateChildControls, and any jQuery file references are added to the head e.g.
RegisterScriptFile("~/Scripts/jquery-1.5.1.js")
RegisterScriptFile("~/Scripts/UI/jquery.ui.core.js")
RegisterScriptFile("~/Scripts/UI/jquery.ui.widget.js")
RegisterScriptFile("~/Scripts/UI/jquery.ui.mouse.js")
RegisterScriptFile("~/Scripts/UI/jquery.ui.draggable.js")
RegisterScriptFile("~/Scripts/UI/jquery.ui.position.js")
RegisterScriptFile("~/Scripts/UI/jquery.ui.resizable.js")
RegisterScriptFile("~/Scripts/UI/jquery.ui.dialog.js")
The WebControl base class handles inserting the references into the Page Head.
This is brilliant, however there's a problem...the file paths may differ between applications which consume the control library.
My choices that I can see are:
A) Embed the files as resources within the library itself....however the CSS styling would be non-customisable between the individual aplications, and any changes to CSS/JS would need a re-compile.
B) Define and use a standardised file heirarchy. Each application needing a folder call 'Scripts' with a fixed file heirarchy within, so the control knows where to reference the required files. The problem I can see here is that it might not always be possible to use this standardised heirarchy and could make using the library cumbersome.
C) Create a property for each control, for each file it requires. Again this would become cumbersome and a pain to use, because each instantiated control would have to have those properties set.
D) Make some kind of ResourceUrlLibrary Dictionary like class which the consuming app can populate, then give to each control as it's instantiated. However, this seems convoluted and could cause confusion for other developers.
If anyone has come across this problem and could spare me some guidance that would be brilliant :)
If its a custom control, it has a reference to the Page class, which then has a method call ResolveClientUrl to generate a relative URL for you. So that can take care of that scenario. You may want to expose a ScriptsFolder property that allows you to store the path to the scripts rather than hard-coding it too.
If this is for your own custom project, standardizing on a folder is fine, but if you are creating a common library to be reused, requiring a specific folder isn't a good idea, and you can then use the ScriptsFolder property to remedy this, or store the folder path in the config. It's OK to standardize on the use of an application setting.
To confirm, I use Telerik controls, and they go the route of having a property that defines a custom path to the script (since they rely on one for a specific control), and they also have certain settings that can be overridden by adding an application setting.
HTH.
I keep running into problems with URLs and routing.
Couldn't find an answer on SO.
I would like to manage all of my urls/links in a single place.
This is for my C# MVC code and the js/jquery ajax code.
These urls are scattered throughout my application.
Moving to a production server needs some fixes and I don't like the fact that I need to look for all of the occurrences in the application.
I don't mind fixing this once - but I would like to do it only once.
Any ideas how to manage all of these links/urls as a group will be very appreciated.
Be happy ad enjoy life, Julian
Consider using T4MVC
You could use Html.ActionLink or
Html.BuildUrlFromExpression(c => c.ControllerAction())
Depends, if you have application reading off certain urls and those urls changed once in a while. then you might want to consider putting all those urls into a database table/etc and retrieve them using specific key.
that way, when your url changed, all you need to do is to change the url on your database and all your application will still be running fine.
Urls should be managed in a single place: the RegisterRoutes static method in Global.asax. In absolutely every other part of your application you should use Html helpers when dealing/generating urls. This way you will never have problems because helpers take into account your routing system.
So instead of writing:
$('#foo').click(function() {
$('#result').load('/mycontroller/myaction');
return false;
});
you use an HTML helper to generate this foo:
<%: Html.Action("foo", "myaction", "mycontroller") %>
and then:
$('#foo').click(function() {
$('#result').load(this.href);
return false;
});
Never hardcode a single url in your application except of course in global.asax which is the only centralized place urls should be defined. So basically every time you find yourself writing something of the form /foo/bar in some other part than global.asax you are doing it wrong.