I have this function in.js file:
function setValue(amount) {
if (amount === 0) {
.....
loanDriver._mem.loanValue = amount;
}
I like to call this in my MVC view and send this value to it : Model.ApprovedAmount
I tried this:
<script type="text/javascript">
setValue(#Html.Raw(Model.ApprovedAmount))
</script>
it is not working.
How I can do that?
Your existing code likely doesn't need the Html.Raw() call, but besides that it at least appears to be correct :
<script type="text/javascript">
setValue(#Model.ApprovedAmount)
</script>
There are a few things that you may want to look into to further troubleshoot this issue :
Check Your References
Firstly, make sure that the Javascript file that defines your setValue() function is being referenced prior to your existing <script> tag shown in your example. This is important as otherwise your page won't know what setValue()
is:
<script src='your-file-with-setvalue-defined.js'></script>
<script>
setValue(#Model.ApprovedAmount);
</script>
Use the Developer Tools
Check the Developer Tools (F12) within your browser, specifically the Network and Console tabs. These will reveal additional details about what exactly is going wrong (i.e. 404 errors, undefined functions, bad arguments, etc.).
Use the debugger
Consider using the debugger keyword within your setValue() function to see if it's being called and what the value that is being passed in looks like :
<script>
// Run this with your Developer Tools open and step into the function to
// see more
debugger;
setValue(#Model.ApprovedAmount);
</script>
Example
You can see a complete example here and seen below that demonstrates the basic idea behind this working as expected :
// HomeController.cs
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new SampleViewModel(){ Amount = 42 });
}
}
// SampleViewModel.cs
public class SampleViewModel
{
public int Amount { get; set; }
}
// Index.cshtml
#model HelloWorldMvcApp.SampleViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Function From Model</title>
</head>
<body>
<script>
function setValue(amount) {
alert(amount);
}
setValue(#Model.Amount);
</script>
</body>
</html>
assuming you are just doing it on the view, you can do something like this:
<text><b>some text:</b> </text> #Html.TextBox("something", null, new { "callsomefunction"() })
Thanks guys, simply I had to use name of the file dot name of the function and it worked. jsfile.setValue(#Model.ApprovedAmount);
Related
I'm a newbie to reactjs and trying to test a very basic component, however it seems all my struggle is futile because its not showing up in the browser.
I'm using asp.net MVC 5 app and I've been following along this tutorial https://reactjs.net/getting-started/tutorial_aspnet4.html as the tutorial states you need to add React.Web.Mvc4 Nuget package which have some dependencies.
My simple React component (SimpleComponent.jsx)
var ComponentBox = React.createClass({
render: function() {
return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>);
}
});
ReactDOM.render(
<ComponentBox />,
document.getElementById('reactDiv')
);
and my razor view is pretty simple
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
</head>
<body>
<div id="reactDiv"></div>
<script src="#Url.Content("~/Scripts/SimpleComponent.jsx")"></script>
</body>
</html>
Did I miss something?
The Solution for my problem was to replace the style element in my jsx file as following
var ComponentBox = React.createClass({
render: function () {
return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>);
}
});
Based on react docs "using the style attribute as the primary means of styling elements is generally not recommended"
by using javascript object to store the style as properties and I hope this'll help someone.
I was doing some testing with MVC6 .net core, and did a quick hack to return a bootstrap html code by putting dirtyHTML directly inside a controller.
The HTML contains the official example of bootstrap inside a literal string.
Just a quick way of returning some bootstrap html, (as i experiment with controller functionality), to my surprise when i go to a page using a web browser, all html text is shown like plain text, its not rendered.
namespace WebApplication1.Controllers
{
public class MariaController
{
[HttpGet("/index")]
public string index()
{
string dirtyHtml;
dirtyHtml =
#"<!DOCTYPE html>
<html lang=""en"">
<head>
<title>Bootstrap Example</title>
<meta charset=""utf-8"">
<meta name=""viewport"" content=""width=device-width, initial-scale=1"">
<link rel=""stylesheet"" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"">
<script src=""https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js""></script>
<script src=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js""></script>
</head>
<body>
<div class=""container"">
<h1>My First Bootstrap Page</h1>
";
return dirtyHtml;
}
}
When going to debug mode, initially they show the same asci text, but using firefox i see there is a line inserted before my page code:
<HTML><head>
<link rel="alternate stylesheet" type="text/css"
href="resource://gre-resources/plaintext.css"
title="Wrap Long Lines">`
So then i thought, let's look around in the solution and search for "Wrap Long Lines".. as to see where it comes from,... this is however not found.
So where does that come from ? (as the solution doesnt contain plaintext.css either). And more important to me, can it be disabled?.
I am not sure what you want to achive but following thing is way to go.
"Wrap Long Lines" and css related to that are internal to firefox browser.
You are saying that you return html and it display like html but it does not render html and for that do following thing.
[HttpGet("/index")]
public IActionResult index()
{
string dirtyHtml;
dirtyHtml =
#"<!DOCTYPE html>
<html lang=""en"">
<head>
<title>Bootstrap Example</title>
<meta charset=""utf-8"">
<meta name=""viewport"" content=""width=device-width, initial-scale=1"">
<link rel=""stylesheet"" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"">
<script src=""https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js""></script>
<script src=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js""></script>
</head>
<body>
<div class=""container"">
<h1>My First Bootstrap Page</h1>
";
return Content(dirtyHtml,"text/html");
}
See I have return IActionResult and Use Content from return.
Reason for this is when you return string it will display as string and if it is html then it will become encoded as you did not tell browser content type so it consider "text/plain".
An alternative of #dotnetstep's way is using Produces attribute:
[HttpGet("/index")]
[Produces("text/html")]
public string Index()
{
...
}
I'm looking to create a test file (test.js). The Test.js file's purpose will be to perform unit tests for a particular controller (ie: Main.controller.js).
How can I load in this controller to an external js file?
I've tried using sap.require:
sap.ui.require(["/pricingTool/Controller/Main.controller"],
function(Main){
//Quint code
test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
});
But I get an error that says:
failed to load /Controller/Main.controller.js
This tells me I'm either structuring this wrong, using the wrong path, or both. Any suggestions would be helpful. I've attached my file tree below for reference.
Component.js
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("pricingTool.Component", {
metadata : {
metadata : {
maniest: "json"
},
rootView : "pricingTool.view.Main",
dependencies : {
libs : [
"sap.m",
"sap.ui.layout"
]
},
config : {
sample : {
files : [
"Main.view.xml",
"Main.controller.js"
]
}
}
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// additional initialization can be done here
}
});
return Component;
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Pricing Tool</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"pricingTool": "./"}'>
</script>
<script src='../pdfmake-master/build/pdfmake.min.js'></script>
<script src='../pdfmake-master/build/vfs_fonts.js'></script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Pricing Tool Rapid Prototype",
enableScrolling : true,
content: [ new sap.ui.core.ComponentContainer({
name : "pricingTool"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
initialTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="allTests.js"></script>
<script src="/Controller/Main.controller.js"></script>
<script>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
You do not need to reference the controller file directly inside the .html file.
The problem is that UI5 does not know where to find your resources. The resolution process is the following:
All standard resources are loaded from a path relative to where your sap-ui-core.js was loaded from.
All resources with custom namespaces are loaded based on the resource roots definition.
Basically, in the resource roots you define a map between a namespace prefix and the location where to find the resources starting with that prefix. If you use relative paths, then the locations are resolved relative to your html file.
In your index.html you have done this: data-sap-ui-resourceroots='{"pricingTool": "./"}' which is perfectly fine. Because your index.thml is located at the root of the project, requesting the pricingTool/Controller/Main.controller will lead to making a request at ./Controller/Main.controller which is actually our file.
But in your initialTest.html you failed to specify any resource root at all. Moreover, you referenced your controller directly and the path seems to not be right (note that a path starting with a leading / is considered an absolute path on the current host; depending on the server you are using, this might not be correct, as usually each application has its own subpath in the server).
You should therefore include a data-sap-ui-resourceroots='{"pricingTool": "../"}' inside your initialTest.html. Notice that I have used .. because the html file is inside the Test folder (and the other stuff is in sibling folders).
I am experimenting with the JavaFX WebView control and I want to use the MathJax Javascript library to render mathematical content.
As a test I have created a basic JavaFX FXML project, added a WebView to the FXML and updated the controller code like so:
public class SampleController implements Initializable {
#FXML
private WebView webView;
#Override
public void initialize(URL url, ResourceBundle rb) {
webView.getEngine().load(
"file:///Users/benjamin/Desktop/Page.html");
}
}
The html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="/Users/benjamin/Downloads/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>
This works as expected and produces the following result:
Note that for the test, both the html and JavaScript file paths are hard coded to locations on my hard drive so the next step is to package the html as a resource that is bundled with the application so that it is not looking for local files.
I have updated the controller code to look up the page like this (the html has not been changed).
#Override
public void initialize(URL url, ResourceBundle rb) {
webView.getEngine().load(
this.getClass().getResource("Page.html").toExternalForm());
}
but this produces the following result:
As you can see, the mathematical content is no longer rendered.
If I change the html <script> tag to reference the JavaScript from a CDN, then everything works as in the original example but I would like to be able to reference the local JavaScript file (and eventually a version that is bundled with the application).
Is what I'm trying to achieve possible?
Add the MathJax.js file to the same package/folder of Page.html then reference to it as
<script type="text/javascript"
src="MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
I must be missing something very basic in the CSS. My jQuery anchor button is functional, but it's rendering as a simple underlined label, not asa rounded-corner UI button. I would be grateful if someone could point out the error in this simple example.
Thanks
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="en-US">
<HEAD>
<TITLE>button test</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="Sat, 22 May 2010 00:00:11 GMT">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(
function() {
$('a','.test').click(function(){showIntro();return false;});
});
function showIntro()
{
document.location.href="intro.htm";
}
</script>
<body>
<div class='test'>Button</div>
</body>
</html>
You need to actually make it a button using .button(), like this:
$(function() {
$(".test a").button();
});
You can see the jQuery UI demos here and a demo of your markup working here.
You need to add the proper class to the link, using jQuery or otherwise.
Try:
Button
You do not need to make it a button you just need
$(".test a").click(function(){showIntro();return false;});
What you are trying to do with your selector passing the second paramater is the Scope.
The second paramater is not mean to be a string (selector) it should be a jQuery Object.
So if you wanted to do it your way your would have to say
var test = $('.test');
$('a',test).click...
But the 1st method is prefered over doing it this way.
Sorry to be providing an answer, if not "the" answer, to my own question, but I have discovered a clue as to what's going on, if not the ultimate cause of the behavior. Below is code cut and pasted from the Button example on the jQuery website; take it to jsFiddle and run it: it works. But if you remove this line relating to the input-button:
$("button, input:submit, a", ".demo").button();
then the anchor-button fails to render properly. Why is the anchor-element's rendering dependent on the existence of the input-button?
<script type="text/javascript">
$(function() {
$("button, input:submit, a", ".demo").button();
$("a", ".demo").click(function() { return false; });
});
</script>
<style>
</style>
<div class="demo">
<button>A button element</button>
<input type="submit" value="A submit button">
An anchor
</div><!-- End demo -->