Check ViewBag Value is present in javascript - asp.net-mvc-3

I am using razor template and following is the scenario
$(function(){
//if (ViewBag.IsCallFunction){
somefunction();
//
//do something else
});
If a viewBag variable is present, i.e. not null and if it is set to true, then I would like to call some javascript function. How do I do this?

#{if(ViewBage.somevalue!=null && ViewBage.somevalue=="true")
{
<script type="text/javascript">
somefunction();
</script>
}
}
but remember this will get called as rendered, as per OP, you can't call it, you can render it, so call it inside document.ready when document is loaded

<script type="text/javascript">
$(function() {
#if (ViewData.ContainsKey("IsCallFunction") && ViewBag.IsCallFunction)
{
<text>somefunction();</text>
}
});
</script>
But I would recommend you using a view model instead of ViewBag, because in this case your code could be simplified:
<script type="text/javascript">
$(function() {
#if (Model.IsCallFunction)
{
<text>somefunction();</text>
}
});
</script>

You don't call a JavaScript function from Razor code because Razor runs on the server and JavaScript runs on the client.
Instead, you can emit JavaScript code to the client that then runs once the browser loads the HTML code generated by Razor.
You could do something like
<script type="text/javascript">
#* The following line is Razor code, run on the Server *#
#if (ViewData.ContainsKey("IsCallFunction") && ViewBag.IsCallFunction) {
#* The following lines will be emitted in the generated HTML if the above condition is true *#
$(function(){
somefunction();
//do something else
});
#} #* This is the closing brace for the Razor markup, executed on the Server *#
</script>

Related

jQuery Mobile ajax request

I am trying to retrieve information from a javascript file in my jQuery mobile website. Ajax is enabled by default, yet when I try xmlHttpRequest.send(), the responseText is the source code for the page rather than a json structure. The initialize() function is run at pageinit, so my thinking is that the json it is retrieving should exist when called. Also, initialize() works fine on the non-mobile variant of the site so I think it has something to do with how JQM handles ajax requests. Thanks in advance for any assistance.
<!DOCTYPE html>
<html>
<head>
var xmlHttpRequest;
var json;
<script type="text/javascript">
function initialize()
{
xmlHttpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() :
new ActiveXObject("Msxml2.XMLHTTP");
if (xmlHttpRequest == null)
return;
xmlHttpRequest.open("GET", "pick.js", false);
xmlHttpRequest.send();
json = eval('('+ xmlHttpRequest.responseText +')');
}
</script>
......
</head>
<body>
<div data-role="page" id="map-page">
<script type="text/javascript">
$('#map-page').live('pageinit',function(){
initialize();
});
</script>
.....
</div>
</body>
</html>
Since you're using jQuery Mobile (and thusly, jQuery), you should consider using jQuery.ajax -- it handles all of the 'hard stuff' like creating XHR object for you.
For your situation your code would look like this:
function initialize() {
$.get("pick.js", function(data, status, jqXHR) {
//when the call succeeds, do something with the 'data' param
console.log(data);
}, "script");
}

Call function from external .js file

I have a draw.js file with me which has a function as
var drawArrow=function(x1,y1,x2,y2)
{
// some code
}
In my html page in head I wrote
<script type="text/javascript" src="draw.js"></script>
<script type="text/javascript">
function callme() {
// insert code here
}
</script>
Please tell me waht code do I need to write in callme() to call drawArrow function of draw.js.
Nothing is external when you call js file all methods are easily accessible as it is create on same page now simply do this
<script type="text/javascript">
function callme() {
drawArrow=function(x1,y1,x2,y2);
// insert code here
}
</script>

Getting Google Plus button to show after inserting markup with ajax

I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.
The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.
REFRESH
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$('#live-preview').empty();
$("#live-preview").load('/displaycode.php #code');
gapi.plusone.go();
return false;
});
gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>
A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.
Render method
Use explicit render: https://developers.google.com/+/plugins/+1button/#example-explicit-render
gapi.plusone.render('live-preview')
instead of:
gapi.plusone.go();
Also needs "{"parsetags": "explicit"}" set:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
Edit
You further have to make sure to call render after the jQuery load is complete. So the element is really in the DOM.
$(function() {
$("#btn").click(function(e) {
e.preventDefault();
$('#live-preview').empty(); // Not necessary
$("#live-preview").load('/displaycode.php #code', function() {
gapi.plusone.render('live-preview');
});
});
gapi.plusone.render('live-preview');
});

MVC Condition Compilation Symbols Debug - Release

It is my understanding that under the Project->Properties->Build settings there is a 'Define DEBUG constant'. By default the "Debug" configuration has this option checked, which means that '#if DEBUG' should evaluate to try. Also by default the "Release" configuration has this option not checked.
I am programming under vs2010 sp1 in a MVC 3 application and the following is what i have done:
#{
#if DEBUG
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// put all your jQuery goodness in here.
alert('Debug Build');
});
</script>
#else
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// put all your jQuery goodness in here.
alert('Release Build');
});
</script>
#endif }
My problem is that regardless of the build type, Release or Debug, i am getting the alert for 'Debug Build'.
What am i doing wrong?
#{
if(System.Diagnostics.Debugger.IsAttached)
{
<script type="text/javascript">
</script>
}
}
Will work, but isn't optimized like #DEBUG and will be hit even if being debuged outside VS
That will never work unfortunately. You will need to put something in the viewbag that you set from your controller.

Using Jquery in Controller Page-ASP.NET MVC-3

Could any one give an example, how to use Jquery in Controller Page. MVC3 -ASP.NET(How To put various tags like )
I want to show a simple alert before rendering a view in Controller.
Thank you.
Hari Gillala
Normally scripts are part of the views. Controllers shouldn't be tied to javascript. So inside a view you use the <script> tag where you put javascript. So for example if you wanted to show an alert just before rendering a view you could put the following in the <head> section of this view:
<script type="text/javascript">
alert('simple alert');
</script>
As far as jQuery is concerned, it usually is used to manipulate the DOM so you would wrap all DOM manipulation functions in a document.ready (unless you include this script tag at the end, just before closing the <body>):
<script type="text/javascript">
$(function() {
// ... put your jQuery code here
});
</script>
If you are talking about rendering partial views with AJAX that's another matter. You could have a link on some page that is pointing to a controller action:
#Html.ActionLink("click me", "someAction", null, new { id = "mylink" })
and a div container somewhere on the page:
<div id="result"></div>
Now you could unobtrusively AJAXify this link and inject the resulting HTML into the div:
$(function() {
$('#mylink').click(function() {
$('#result').load(this.href, function() {
alert('AJAX request finished => displaying results in the div');
});
return false;
});
});

Resources