Razor: Expected';' when declaring string in C# in JavaScript Block - asp.net-mvc-3

In the MVC View code below, isLoggedInDb is underlined in green with a tooltip displaying Expected ';'. There clearly is a ;, and it is hard to Google for ; on top of it. I've seen that others have problems creating JavaScript serverside in this manner, so maybe it's not best practice. Should this be ignored, or is there a legitimate reason for Intellisense to complain?
#* SHTML Code Above *#
<script type="text/javascript">
#{
string isLoggedInDb;
if(Session["isLoggedInDb"] != null)
{
if(Session["isLoggedInDb"].ToString() == "1")
{
isLoggedInDb = "1";
}
else
{
isLoggedInDb = "0";
}
}
}
var dblogin=#(isLoggedInDb);
#*....etc*#
}
Edit:
It just occurred to me that building JavaScript programatically, probably is not the best idea, since it might be considered best practice to keep JavaScript in separate files, which are often cached. I think I should program hidden variables in the HTML that JavaScript reads instead. Maybe someone can confirm this.

I'm not 100% sure, but I would think the compiler is viewing it as C# code because you have it in a Razor code block #{ }
Try this:
<script type="text/javascript">
string isLoggedInDb;
#if(Session["isLoggedInDb"] != null)
{
if(Session["isLoggedInDb"].ToString() == "1")
{
<text>isLoggedInDb = "1";</text>
}
else
{
<text>isLoggedInDb = "0";</text>
}
}
</script>
As for building JS on the server, I personally can't stand the idea (I don't like merging any client/server/css code). I can't speak to its performance but I can say you are setting yourself up for a nightmare maintenance scenario keeping track of where all your JS is coming from, not to mention you lose the ability to easily debug and manage your scripts.

Without a doubt think you should have the approach of taking something similar to:
var isLoggedOn = #Model.IsLoggedInDb
IsLoggedInDb should be part of your ViewModel, your View should not be checking the session, this is very brittle, not easily testable, and the controllers purpose is to orchestrate the data for the presentation layer (view)

The code should work as is, however the Razor Parser is fighting the javascript intellisense, so you might want to move all your C# code logic out of the script tags since it doesnt need to be inside, like the following:
#{
string isLoggedInDb;
if(Session["isLoggedInDb"] != null)
{
if(Session["isLoggedInDb"].ToString() == "1")
{
isLoggedInDb = "1";
}
else
{
isLoggedInDb = "0";
}
}
}
#*....etc*#
<script type="text/javascript">
var dblogin=#(isLoggedInDb);
..etc..
</script>

Related

YUI on IE8: Argument not valid on dom-style.js

I have asked this everywhere but still not getting any feedback and is getting me crazy. We are using some Alloy UI widgets on the portal im working with (Liferay 6.2) and everything works fine in all the browsers but IE8. For some reason im getting an error message regarding an invalid argument in one of the YUI core files functions regarding setStyle (what you use to add styles to a node in YUI). I have realized that IE8 is not happy with this (here's the whole YUI function) :
setStyle: function(node, att, val, style) {
style = style || node.style;
var CUSTOM_STYLES = Y_DOM.CUSTOM_STYLES;
if (style) {
if (val === null || val === '') { // normalize unsetting
val = '';
} else if (!isNaN(new Number(val)) && re_unit.test(att)) { // number values may need a unit
val += Y_DOM.DEFAULT_UNIT;
}
if (att in CUSTOM_STYLES) {
if (CUSTOM_STYLES[att].set) {
CUSTOM_STYLES[att].set(node, val, style);
return; // NOTE: return
} else if (typeof CUSTOM_STYLES[att] === 'string') {
att = CUSTOM_STYLES[att];
}
} else if (att === '') { // unset inline styles
att = 'cssText';
val = '';
}
style[att] = val;
What is causing IE8 to report the error is this line:
style[att] = val;
apparently because of
val =' ';
What i don't understand is why the other browsers don't have any problem with that declaration and just IE8 complains about it. Since this is part of the dom-style.js which is a core file for YUI in Liferay i really don't want to mess with that code. I will REALLY appreciate any help since i have been dealing with this for the whole week and still can't get a solution and / or information on the www about a similar issue.
Ok this is WAY more simple than i thought. For some reason all the modern browsers (including IE9) don't have any problems when you initialize Alloy UI with :
YUI({ lang: 'ca-ES' }).use(
'aui-node',
'aui-datatable',
'aui-pagination',
'datatype-date',
function(Y) {...
But IE8 (of course) will give you a series of really weird console errors and will make your widgets work bad if you dont use AUI insted of YUI, so that was it i replaced YUI by AUI in all the parts of my code and now is working fine in IE8 too. If somebody can give a proper explanation will be really appreciated since is hard for me to understand why IE8 is not ok with using YUI to initialize Alloy UI widgets or use YUI.
Im still doing some research on that but it seems that the reason this is happening is because im using YUI on a .JS file, still have to find a proper explanation tho.

Skip some tags with stripTags() function in prototypejs

I've successfully implemented a bit of code that strips all HTML from a pasted string using stripTags(). My next goal is to mark a few tags with white flags so they get ignored on 'paste' event using .wrap() to augment the function.
I'm using prototype.js as a framework and have slowly been working through the growing pains of learning both the framework and javascript, but this issue has presented a bit of a roadblock.
I've googled around a bit and found what looks like two great solutions, but I don't seem to be implementing them correctly.
Found solutions:
http://perfectionkills.com/wrap-it-up/ (function to indicate tags to remove)
and
http://pastebin.com/xbymCFi9 (function to allow tags to keep)
I pretty much copied and pasted from the latter.
If I pull the 'br' from the code, then the regex is ignored and all html is stripped. If I leave it, nothing gets pasted.
Here is what I've pieced together (and I feel silly for not being able to figure this out!).
String.prototype.stripTags = String.prototype.stripTags.wrap(
function(proceed, allowTags) {
if (allowTags) {
if (Object.isString(allowTags)) allowTags = $w(allowTags)
this.gsub(/(<\/?\s*)([^\s>]+)(\s[^>]*)?>/, function(match) {
if (allowTags.include(match[2].toLowerCase()))
return match[1] + match[2] + match[3] + '>'
})
} else {
// proceed using the original function
return proceed();
}
});
WysiHat.Commands.promptLinkSelection = function() {
if (this.linkSelected()) {
if (confirm("Remove link?"))
this.unlinkSelection();
} else {
var value = prompt("Enter a URL", "http://www.alltrips.com/");
if (value)
this.linkSelection(value);
}
}
document.on("dom:loaded", function() {
var editor = WysiHat.Editor.attach('event_desc');
var toolbar = new WysiHat.Toolbar(editor);
editor.observe("paste", function(event) {
var el = $(this);
setTimeout(function() {
var pText = el.innerHTML.stripTags('br');
//alert(pText);
$('event_desc_editor').update(pText);
$('event_desc').setValue(pText);
}, 0);
});
(You may recognize the WysiHat code from 37Signals text editor)
note: you can see the alert commented out. If I do alert the ptext, I get 'undefined' returned.
So I've given up on and moved to a regex solution:
el.innerHTML.replace(/<(?!\s*\/?\s*p\b)[^>]*>/gi,'')

Is There an Editable File in Cognos For Importing Stylesheets or Javascript?

I have recently asked where global stylesheets are for editing Cognos 10 styles (Here).
After some discussions with our team we would like to find the CGI or base imported file that Cognos uses to construct it's report viewer pages and dashboard widget holders.
The reason we want to do this is so that we can include all our custom style and javascript in one location. When/If we upgrade Cognos we can be sure of one point of failure with our reports. This would solve our problem of having to re-edit multiple stylesheets (and javascript).
I'm normally familiar with ASP.NET and not CGI-BIN. Is there something akin to a Master page where styles and basic imports are done for a Cognos page? Ideally editing this file would allow us to continue our customizations.
Can this be done? Or are we just insane? We understand the risks concerning upgrades, but are OK with the risks (unless someone can provide a good example of how this technique would not be replicated via version changes).
I think it's fairly common that BI professionals with more traditional web development backgrounds like me and you have no qualms with making changes to the global CSS files and bringing in more JS.
I've explained to you how I run JS in a report - I'd love to add jQuery to our global libraries, but I haven't drummed up enough support for it yet. I can help with the CSS portion though.
In 8.4.1, there's a ton of CSS files referenced by the report viewer. If I were you, I'd render a sample report with the default styling and use Firebug or similar to trace the CSS files being called. You'll find that server/cognos8/schemas/GlobalReportStyles.css is commonly referenced, with some help from server/cognos8/skins/corporate/viewer/QSRVCommon.css - there's also some other files in there that are imported.
I'd imagine you could grep -R '<link rel=\"stylesheet\" type=\"text/css\" href=\"../schemas/GlobalReportStyles.css\"> in the COGNOS directory to see where the file is being called, and either edit that file directly, or create a link to your own JS. Personally, I'd just backup the existing stylesheet and modify the one that is already there.
I'd imagine you could do something similar for the JS - find where it's being called in the template (using grep) and just create a new reference to the file you'd like to create. In my case, I'd do a backflip if I could get jQuery loaded into every report.
Just realized this is a year old. :-( Sorry, first time here. I'll leave it in case anyone is still interested in the topic.
Here is the documentation on customizing Cognos on several levels:
We used an alternative to modifying the system files. We have a shared component "report" containing an HTML object with our particular CSS overrides on it, and/or a link to a custom stylesheet. We then add this on each report with a "Layout Component Reference" from the toolbox. If we want a global change, just change the one item in the component report or custom stylesheet. This works very well for us.
I up-voted both the previous answers to this question. I'll admit I kind of forgot about this question till someone put some activity on it.
We ended up doing a combination of the above techniques. I was able to find the global stylesheets as suggested. What I ended up doing was copying out all the styles that were in that stylesheet and created a new sheet suffixed with *_SystemSytles.css*. I created a second sheet and suffixed it with *_Custom.css*. Then in the original sheet I placed two imports, first importing the system styles and then the custom styles.
For certain reports we have a custom object that is dropped on that brings in its own styles (and JavaScript). This utilizes a similar technique to the second question.
However, what I had to do for import the JavaScript for general use within the entire Cognos site was difficult.
In the core webcontent folder I created a js folder that contained the jQuery and our custom JavaScript files. Then in a series of JavaScript files I included code similar to the following:
/************************
JQUERY UTIL INCLUDE
************************/
function loadjscssfile(filename, filetype, id) {
if (filetype == "js") { //if filename is a external JavaScript file
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
if (id)
fileref.setAttribute("OurCompanyNameAsAnID", id)
}
else if (filetype == "css") { //if filename is an external CSS file
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined") {
var headTag = document.head || document.getElementsByTagName('head')[0];
headTag.appendChild(fileref);
}
}
function _PortalLoadJS() {
if (!window._PortalScriptsLoaded) {
var pathParams = [];
var path = location.href;
(function () {
var e,
r = /([^/]+)[/]?/g,
p = path;
while (e = r.exec(p)) {
pathParams.push(e[1]);
}
})();
var baseURL = location.protocol + '//';
for(var i = 1; i < pathParams.length; i++) {
if(pathParams[i] == 'cgi-bin')
break;
baseURL += pathParams[i] + '/';
}
loadjscssfile(baseURL + "js/jquery-1.6.1.min.js", "js");
loadjscssfile(baseURL + "js/Custom.js?pageType=COGNOS_CONNECTION", "js", "SumTotalUtil");
window._PortalScriptsLoaded = true;
}
}
if(!window.$CustomGlobal) {
window.$CustomGlobal= function(func) {
if (!window.$A) {
if (!window.__CustomExecStack) {
window.__CustomExecStack= new Array();
}
window.__CustomExecStack.push(func);
}
else
$A._executeCustomItem(func);
}
}
try {
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if (document.readyState === "complete") {
// Handle it asynchronously to allow scripts the opportunity to delay ready
setTimeout(_PortalLoadJS, 10);
}
// Mozilla, Opera and webkit nightlies currently support this event
if (document.addEventListener) {
// Use the handy event callback
document.addEventListener("DOMContentLoaded", function() { _PortalLoadJS(); }, false);
// A fallback to window.onload, that will always work
window.addEventListener("load", _PortalLoadJS, false);
// If IE event model is used
} else if (document.attachEvent) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function() { _PortalLoadJS(); });
// A fallback to window.onload, that will always work
window.attachEvent("onload", _PortalLoadJS);
}
}
catch (ex) { }
The $A item is an item that I create when the Custom.js file is loaded.
Here are the list of files that I've included this code (at the vary end of the JavaScript):
webcontent\icd\bux\js\bux\bux.core.js
webcontent\ps\portal\js\cc.js
webcontent\rv\CCognosViewer.js
webcontent\rv\GUtil.js
webcontent\rv\viewer.standalone.core.js
These files should cover the Cognos Connection, Report Viewer, and the Dashboards area. If any more are found please let me know and I can update this list.
When linking to the Custom.js file I put a query string on the external resource that the Custom.js file picks up: pageType=COGNOS_CONNECTION. This allows me to do specific load code for the Cognos Connection, Report Viewer, or the Dashboards.
Here is the code in the Custom.js class that inits the $A object:
function _CustomUtilInit() {
try {
if (!window.$j) {
window.setTimeout(_CustomUtilInit, 1);
return;
}
var jScriptTags = $j('SCRIPT[' + Analytics.SCRIPT_ATTR_NAME + '= ' + Analytics.SCRIPT_ATTR_VALUE + ']');
jScriptTags.each( function(i, scriptElem) {
var tag = $j(scriptElem);
if(tag.attr(Analytics.LOADED_SCRIPT_KEY))
return;
var scriptURL = new URI(tag.attr('src'));
var analyticsPageType = scriptURL.getQueryStringValue(Analytics.PAGE_TYPE_QUERY_KEY, Analytics.PageType.REPORT_VIEWER);
if(!window.$A) {
window.$A = new Analytics();
}
window.$A.init(analyticsPageType);
tag.attr(Analytics.LOADED_SCRIPT_KEY, 'true');
});
} catch (e) {
}
}
_CustomUtilInit();
Of course this expects that the jQuery libraries were included before the Custom.js files in each of the previously mentioned JavaScript files.
The URI class is something that I've found on the internet and tweaked for our use. If you have any questions regarding the custom JavaScript loading please leave a comment and I'll do my best to elaborate some more.

MVC2 Client-Side Validation for injected Ajax content

I am making an Ajax call and adding content to a form inside a MVC2 app.
I need to update the Client Validation Metadata with the validation for my new content.
<script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"
...
</script>
Is there a way to generate this metadata for a partial view ?
Thanks in advance.
I was banging my head against a wall for a few days on this too and was going to go down the route of removing the form tag, but have just got it working in a slightly less hacky way if you are still interested. My scenario was similar in that I have a form with a collection of elements to validate initially, but users can dynamically add new rows via ajax.
I'll break it down so hopefully it'll be easier to see what is going on. Looking at the MVC source code, the form and validation works roughly as so:
Html.BeginForm() outputs the opening form tag then creates and returns a new instance of MvcForm, which doesn't outwardly do much except make the scope of the form easier to manage for you.
It does however create a new FormContext and stores this within ViewContext.FormContext. It is this FormContext that tracks the client validation.
The last thing Html.BeginForm() does is set the FormId property of the new FormContext, using the id of the form tag. This is required so the client script can match up forms and validation rules.
Html.EndForm() disposes the MvcForm. This Dispose method outputs the form closing tag and then calls ViewContext.OutputClientValidation() which is resposible for outputting the javascript. Lastly it removes the current FormContext and sets it back to the parent FormContext or null if there isn't one.
So to not output the form tag we somehow need to take some of the FormContext management out of the MvcForm constructor/destructor.
So within my Partial View I did the following:
At the top I check if the ViewContext.FormContext has a value. If so we we are in the initial load so no need to mess around. If not, it is an ajax call, so I enable client validation, create a new MvcForm directly (not with BeginForm) - this causes a FormContext to be created - and set the FormContext.FormId to the same as my parent page
At the end of the view, I check if I have a form instance and if so, call ViewContext.OutputClientValidation() and reset the ViewContext.FormContext to null. I do not Dispose() the MvcForm as this would output the closing tag and MvcForm does not contain disposable objects.
The skeleton of the view looks as so:
<%
MvcForm dummyForm = null;
if (this.ViewContext.FormContext == null)
{
Html.EnableClientValidation();
dummyForm = new MvcForm(this.ViewContext);
this.ViewContext.FormContext.FormId = "mainform";
}
%>
// standard partial view markup goes here
<%
if (dummyForm != null)
{
this.ViewContext.OutputClientValidation();
this.ViewContext.FormContext = null;
}
%>
You could quite easily wrap this up into an extension method
Phil
Finally got it to work.
The answer is simple: don't waist time with MicrosoftMvcValidation.js. It is generated with Script# which makes it difficult to extend.
Switch to xVal and jQuery Validation.
It doesn't need a form to generate the client validation metadata.
Also in order to load validation for a AJAX request all you have to do is to call the following after you have the new Html:
lForm.find("#placeholder").empty();
lForm.valid();
lForm.find("#placeholder").html(responseHtml);
That does it. First you remove the old content. Than re-run validation to get rid of potentially obsolete validation errors. Than add the new content. Works like a cham.
Also jQuery Validation makes it really easy to enable or disable validation for a certain field (conditional validation).
I have the same problem and resolve using the Future files, and in MicrosoftMvcJQueryValidation.js I change the and of file, this:
$(document).ready(function () {
var allFormOptions = window.mvcClientValidationMetadata;
if (allFormOptions) {
while (allFormOptions.length > 0) {
var thisFormOptions = allFormOptions.pop();
__MVC_EnableClientValidation(thisFormOptions);
}
}
});
for:
function chargeValidation() {
var allFormOptions = window.mvcClientValidationMetadata;
if (allFormOptions) {
while (allFormOptions.length > 0) {
var thisFormOptions = allFormOptions.pop();
__MVC_EnableClientValidation(thisFormOptions);
}
}
}
and in content after close form using I call the 'chargeValidation()', this resolve for me the problem I have using $.get(action) containing a form validation.
I hope to help you!
Finally found it.
After content is loaded in dynamically you will need to register the new form.
Since I am using Facebox, I added it to the facebox code, however you can add it wherever you need, or in a callback if your modal or whatever you are loading into has an afterLoaded event.
I wrapped them in a try/catch just in case i ever use facebox without the validation stuff.
Just run these two lines AFTER your content has been loaded:
try {
Sys.Application.remove_load(arguments.callee);
Sys.Mvc.FormContext._Application_Load();
} catch (err) {/* MVC Clientside framework is likely not loaded*/ }
I made some progress but I am not quite happy.
Problem #1: The client validation metadata is not generated unless you have a Html.BeginForm() in your partial. Which in my case is false because I do not update the entire form, I update portions of it.
Solution for Problem #1: Add a form in the partial view, let MVC generate the client validation MetaData and remove the form tags with a action filter. Let's call this Hack #1.
public class RemoveFormFilterAttribute : ActionFilterAttribute
{
private static readonly MethodInfo SwitchWriterMethod = typeof(HttpResponse).GetMethod("SwitchWriter", BindingFlags.Instance | BindingFlags.NonPublic);
private TextWriter _OriginalWriter;
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
_OriginalWriter = (TextWriter)SwitchWriterMethod.Invoke(HttpContext.Current.Response, new object[] {new HtmlTextWriter(new StringWriter())});
}
public override void OnResultExecuted(ResultExecutedContext filterContext)
{
if (_OriginalWriter != null)
{
HtmlTextWriter lTextWriter =(HtmlTextWriter) SwitchWriterMethod.Invoke(HttpContext.Current.Response, new object[] {_OriginalWriter});
string lOriginalHTML = lTextWriter.InnerWriter.ToString();
string lNewHTML = RemoveFormTags(lOriginalHTML);
filterContext.HttpContext.Response.Write(lNewHTML);
}
}
Problem #2: The initial client validation metadata for the page is gone by the time I have the metaData for the new content.
Solution for Problem #2: Store the initial metadata (hard copy) and update it with the new fieds, than call the methods you mentioned to let MVC know new stuff arrived. Let's call this Hack #2.
<script type="text/javascript">
var pageMvcClientValidationMetadata;
$(document).ready(function() {
$("input[name='PaymentTypeName']").change(PaymentTypeChanged);
//create a back-up of the ValidationMetadata
pageMvcClientValidationMetadata = JSON.parse(JSON.stringify(window.mvcClientValidationMetadata));
});
function PaymentTypeChanged() {
var selectedPaymentType = $("input[name='PaymentTypeName']:checked").val();
$.ajax(
{
url: 'PersonalData/GetPaymentTypeHtml?&paymentType=' + selectedPaymentType,
type: "GET",
cache: false,
success: GetPaymentTypeHtml_Success
});
}
function GetPaymentTypeHtml_Success(result) {
$('#divPaymentTypeDetails').html(result);
UpdateValidationMetaData();
}
function UpdateValidationMetaData() {
//update the ValidationMetadata
for (i = 0; i < window.mvcClientValidationMetadata[0].Fields.length; i++) {
pageMvcClientValidationMetadata[0].Fields.push(window.mvcClientValidationMetadata[0].Fields[i]);
}
//restore the ValidationMetadata
window.mvcClientValidationMetadata = JSON.parse(JSON.stringify(pageMvcClientValidationMetadata));
//Notify the Validation Framework that new Metadata exists
Sys.Application.remove_load(arguments.callee);
Sys.Mvc.FormContext._Application_Load();
}
Now. Any improvements would be appreciated.
Hack #1: How can I generate the client validation metadata without having an actual form ?
HAck #2: How can I appent to the page validation metadata ?

AJAX Script Only Works in Firefox, But Not IE

My ajax script only works in Firefox and not ie why??
========================================
<html>
<head>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
setTimeout("dochange('showResult')",5000);
}
if (!req.responseXML.documentElement && req.responseStream)
req.responseXML.load(req.responseStream);
}
};
req.open("GET", "ajax.php"); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('showResult');
</script>
</head>
<body>
<div id="showResult"></div> <!–page result will be displayed here–>
</body>
</html>
Luke, use the Source! Better yet, use a proven JS library, e.g. jQuery. They deal with all of this cr*p and they do it better than you would ever have the time to do yourself.
Update:
Alex -- all kidding aside. The reason we are all telling you to use jQuery (or one of the other major Javascript libraries) is because getting this stuff to work on all (or even close to all) browsers is genuinely hard. As mangled as MS's handling of HTML and CSS is (and believe me, it sucks) their various implementations of JavaScript run the gamut from crap to huge-steaming-pile-of-crap. The various JS libraries give you standard, cross-browser ways of doing things -- stuff that it has taken real pros years to get right. You really, really don't want to waste your time on this stuff.
So, use a good library, get it working in Firefox using Firebug as your debugger, and you have a pretty good chance it will work in IE.

Resources