access to model.Id on razor view page from javascript - javascript

on view page I have and inside javascript code I want to access to my Model.Id. How this can be done?
#model MyModel
<script type="text/javascript">
function initialize() {
var id = model.Id // this doesnt work
}
</script>
Thanks

You need to keep track of what's on the server and what's on the client. The #Model variable is only used on the server, Javascript has no notion of the model object, so you need to print the values out in the html.
<script type="text/javascript">
function initialize() {
var id = "#Model.Id"; // this will work
}
</script>

Make model.id to "#Model.id" Like :
#model MyModel
<script type="text/javascript">
function initialize() {
var id = "#Model.Id"
}
</script>

This should work. Still need to use the razor syntax..#.
#model MyModel
<script type="text/javascript">
function initialize() {
var id = "#Model.Id" // this doesnt work
}
</script>

Related

How to pass values to an external Javascript script from ASP.NET

I have a set of KPI data I need to pass over to a Javascript file from my ASP.NET project. I thought I could do so using a ViewBag... Here is what is in the controller:
public ActionResult KPI()
{
if (Session["OrganizationID"] == null)
{
return RedirectToAction("Unauthorized", "Home");
}
else
{
int orgId;
int.TryParse(Session["OrganizationID"].ToString(), out orgId);
var user = db.Users.Find(User.Identity.GetUserId());
var organization = user.Organizations.Where(o => o.OrganizationID == orgId).FirstOrDefault();
var reports = db.Reports.ToList();
try
{
var org_reports = (from r in reports
where r.OrganizationID == organization.OrganizationID
select r).ToList();
var kpi = new KPI(org_reports);
var jsonKPI = JsonConvert.SerializeObject(kpi);
ViewBag.orgData = jsonKPI;
}
catch (ArgumentNullException e)
{
return RedirectToAction("Unauthorized", "Home");
}
}
return View();
}
From the View I've tried using hidden values, and also just passing them in as parameters when calling the script:
<input type="hidden" id="orgData" value=#ViewBag.orgData>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="~/Scripts/KPIs.js">
orgData = #ViewBag.orgData;
</script>
I then want to read this value in my JS script and parse it into JSON from the string:
function myFunction(){
var test1 = JSON.parse(document.getElementById('orgData'); // Doesn't work
var test2 = JSON.parse(orgData); // Doesn't work
}
It doesn't appear that any of these methods are working. What is my mistake here?
You should use Html.Raw, to avoid ASP.NET to escape your value:
orgData = #Html.Raw(ViewBag.orgData);
Also, if this is a Json, it is also a valid JS object, so you don't need to parse, it already is a JS Object.
It looks like you forgot the quotes.
<input type="hidden" id="orgData" value=#ViewBag.orgData>
should be
<input type="hidden" id="orgData" value="#ViewBag.orgData">
Also the code inside your script tag will never get executed because the script tag has a src attribute on it. Code inside script tags with src attributes never gets executed.
<script type="text/javascript" src="~/Scripts/KPIs.js">
orgData = #ViewBag.orgData;
</script>
should be changed to
<script type="text/javascript" src="~/Scripts/KPIs.js" />
<script>
orgData = #ViewBag.orgData;
</script>
I solved it! Pass the KPI model through the view and then it's as easy as:
var orgData = #Html.Raw(Json.Encode(Model));
Thanks to all to offered help.

Using javascript & thyemleaf to manipulate a list

I want to use in javascript an object from a list coming from the controller.
I'm using Thymeleaf with Spring boot.
The list name is ${collaborateurs}.
The bellow code is working:
<script th:inline="javascript">
/*<![CDATA[*/
var user = /*[[${collaborateurs[0].email}]]*/;
alert(user);
/*]]>*/
</script>
But I want to use some variable as index :
<script th:inline="javascript">
/*<![CDATA[*/
var i = 1; // may be 0, 1, ....
var user = /*[[${collaborateurs[i].email}]]*/; // this code is not working
alert(user);
/*]]>*/
</script>
Thank you for your help!!
I found the solution by trying to assign directly the list ${collaborateurs to a javascript variable and access to my object directly from client side:
<script th:inline="javascript">
/*<![CDATA[*/
var i = 1
var users = /*[[${collaborateurs}]]*/;
alert(users[i].email);
/*]]>*/
</script>

Passing a variabe to jquery using Odometer

I would like to use a jquery odometer to display information on a master page. http://www.jqueryscript.net/animation/Smooth-Animated-Numbers-with-Javascript-CSS3-odometer.html
In order to do that I have to retrieve that value from SQL Server using C#. Then I have to pass it to the jscript odometer in the html() as shown below. If I get the valuje - how do Isend it to the javascript?
<script>
setTimeout(function(){
$('.odometer').html('123222');
}, 1000);
</script>
Try this html
</head>
<body>
<script src="https://rawgit.com/HubSpot/odometer/v0.4.6/odometer.min.js"></script>
<style src="https://rawgit.com/HubSpot/odometer/master/themes/odometer-theme-default.css"></style>
<script>
odometerOptions = {
auto: false
};
</script>
<script type = "text/javascript">
$(function(){
var exampleOdometerValue = 123456;
var exampleOdometer = new Odometer({ el: $('.odometer-example')[0], theme: 'digital', value: exampleOdometerValue });
exampleOdometer.render()
setTimeout(function(){
exampleOdometerValue = exampleOdometerValue+100.07;
exampleOdometer.update(exampleOdometerValue);
}, 2000);
});
</script>
<div class="odometer odometer-example">123</div>
</body></html>
You can use the below implementation to pass the value from code behind to Jquery
This is one example how to do it.
First Declare a Public Variable in code behind
//Declare a Public Variable in code behind
public string odometervalue = "667";
Read the value in Jquery Like given below
<script>
$(function () {
setTimeout(function () {
//Get the value from serverside
var uid = '<%=odometervalue %>';
odometer.innerHTML = uid;
}, 1000);
});
</script>

use java script variable in ActionLink mvc3 razor

I have a textbox where i must to write a value, how to pass this value in my controller if I call my controller using ActionLink, this is my code:
view:
#Html.TextBox("tisch", "", new { #class = "teschChange"})
#Html.ActionLink("Apply Command", "ApplyCommand", "Work")
and this is te script
<script type="text/javascript">
$(function test() {
$(".teschChange").change(function () {
var tisch = $(this).attr('value');
});
});
</script>
I must to send tisch in ApplyCommandController
Thanks
Instead of using an action link, use a standard link:
<a id="l" href="#Url.Action("ApplyCommand", "Work")">Apply Command</a>
Then, you can use this script:
<script type="text/javascript">
$(function test() {
$(".teschChange").change(function () {
var tisch = $(this).attr('value');
$("#l").attr("href", "#Url.Action("ApplyCommand", "Work")/" + tisch);
});
});
</script>
Which will assign a href of: /Work/ApplyCommand/tisch.
this was the correct script:
$("#l").attr("href", "#Url.Action("ApplyCommand", "Work")?tisch=" + tisch);

How to access javascript value in a4j

I need to set a Bean value with one javascript return value.
Something like:
<script type="text/javascript">
function getUserId(){
return 4;
}
</script>
<h:inputText name="lala" value="getUserId()"/>
Thanks
I solved it.
I was using a:jsFunction tag as it follows:
<script type="text/javascript">
function getUserId(){
var user = MyCompany.get_User();
return user;
}
</script>
<a:jsFunction action="#{user.performLogin()}" name="doSiteLogin" >
<a:actionparam name="uid" value="getUserId()"/>
</a:jsFunction>
If you use the property noEscape="true" on the a:actionparam ... it call your javascript code.

Categories