on my view I have this code
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
function showContent() {
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"preventDuplicates": false,
"positionClass": "toast-top-right",
"showDuration": "400",
"hideDuration": "1000",
"timeOut": "7000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
toastr["success"]("This is a message");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn btn-primary" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
But i like to start the toastr function from controller.
For example the user fill out the form. Click on the "Safe" button and will redirect from the controller to the startpage
return RedirectToAction("Index", "Home");
now I like to show up the toastr notification on the startpage (with the message comes also from the controller).
Thanks for your help
You can use AddNodeServices in asp.net core like this
Add below line in the ConfiguraServices() in Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddNodeServices();
}
Add constructor in the Controller
public class HomeController : Controller
{
private readonly INodeServices _nodeServices;
public HomeController(INodeServices nodeServices)
{
_nodeServices = nodeServices;
}
Call NodeServices as shown below
public async Task<IActionResult> About()
{
var msg = await nodeServices.InvokeAsync<string>(“./hello.js”,1);
return View();
}
Add following code to js file
module.exports = function (callback)
{
var message = ‘Hello world’;
callback(null, message);
};
Related
I am unable to get the AlertifyJS messagebox to work with my asp.net project.
I'm trying to make a reasonably simple website and would like to improve the default alert functionality.
I've viewed a number of other forums on this but unfortunately have not been able to figure out my issue.
Here is my .aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="Test.WebForm4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="Scripts/alertify.js" type="text/javascript"></script>
<link href="Content/alertifyjs/alertify.css" rel="stylesheet" />
<link href="Content/alertifyjs/themes/default.css" rel="stylesheet" />
<script type="text/javascript">
function Confirm() {
alert("here");
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
alert("here2");
alertify.confirm('Do it', function (e) {
if (e) {
$('#PrchBtnHiddenYes').click();
confirm_value.value = "Yes";
} else {
$('#PrchBtnHiddenNo').click();
confirm_value.value = "No";
}
}).set('labels', { ok: 'Yes', cancel: 'No' });
//alertify.confirm('Title', 'Message', function () { $('#PrchBtnHiddenYes').click(); confirm_value = "Yes"; }, function () { $('#PrchBtnHiddenNo').click(); confirm_value = "No"; }).set('labels', { ok: 'Yes', cancel: 'No' });
alert("here3");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="PrchBtn" runat="server" class="PrchBtn" Text="Click Here" OnClientClick="Confirm(); return false;" />
<asp:Button runat="server" ID="PrchBtnHiddenYes" ClientIDMode="Static" Style="display: none;" />
<asp:Button runat="server" ID="PrchBtnHiddenNo" ClientIDMode="Static" Style="display: none;" />
</form>
</body>
</html>
Here is my cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Test
{
public partial class WebForm4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
PrchBtnHiddenNo.Click += PrchBtnHiddenNo_Click;
PrchBtnHiddenYes.Click += PrchBtnHiddenYes_Click;
}
void PrchBtnHiddenYes_Click(object sender, EventArgs e)
{
string Success = "Success";
}
void PrchBtnHiddenNo_Click(object sender, EventArgs e)
{
string Failure = "Failure";
}
}
}
I'm not getting any error messages. For testing purposes, I have put 3 alerts in the javascript code. I get the first and second one but the alertify script doesn't fire and therefore neither does 3rd alert.
Thanks in advance.
seems your local alertify is not working. try this instead.
<script src="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/alertify.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/css/alertify.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/css/themes/default.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs#1.11.4/build/css/themes/bootstrap.min.css"/>
In webforms I'd do
<script type="text/JavaScript">
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);", timeoutPeriod);
}
</script>
<body onload="JavaScript:timedRefresh(5000);">
or codebehind Page_Load
Response.AddHeader("Refresh", "5");
Question How to make the screen refresh every 5 seconds in ASP.NET MVC3
You could do the same in MVC:
<script type="text/javascript">
function timedRefresh(timeoutPeriod) {
setTimeout(function() {
location.reload(true);
}, timeoutPeriod);
}
</script>
<body onload="JavaScript:timedRefresh(5000);">
...
</body>
or using a meta tag:
<head>
<title></title>
<meta http-equiv="refresh" content="5" />
</head>
<body>
...
</body>
or in your controller action:
public ActionResult Index()
{
Response.AddHeader("Refresh", "5");
return View();
}
I am new to C# and JQuery. I try to add jquery to a C# WebForm project.
What I want to do is this:
Add a button to a webform.
If that button is clicked serverside then display a JQuery dialogbox
This is the code that I have - if I click the button nothing happens.
I wonder where the problem is....
.aspx file:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="frmMain.aspx.cs" Inherits="Dialog_YES_NO_mit_JQuery.frmMain" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
</div>
</form>
</body>
</html>
.aspx.cs file :
public partial class frmMain : System.Web.UI.Page
{
protected void btnDemo1_Click(object sender, EventArgs e)
{
string message = "Message from server side";
//ClientScript.RegisterStartupScript (this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
ClientScript.RegisterClientScriptBlock(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}
}
}
Here's a complete example that works:
You need to add a reference to jQuery UI library after the reference to jQuery as this is where the dialog logic is defined
You need to add a reference to the jQuery UI CSS file to enable the modal popup styling.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
<div id="dialog"></div>
</div>
</form>
</body>
Output:
here an example that works for me :
code behind :
protected void ShowDialogClick(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), Guid.NewGuid().ToString(), "ShowDialogJS();", true);
}
aspx :
<script type="text/javascript">
function ShowDialogJS() {
jQuery("#dialog").dialog();
}
</script>
<asp:Button runat="server" ID="btnShowDialog" Text="Show Dialog"
OnClick="ShowDialogClick"></asp:Button>
EDIT :
I have two js files for jQuery :
<script src="ressources/jQuery/scripts/jquery-1.11.4.js" type="text/javascript"></script>
<script src="ressources/jQuery/scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
try this
aspx
`
<form id="form1" runat="server">
<div>
Dialogbox using JQuery<br />
<div id="dialog"></div>
<br />
<asp:Button ID="btnDemo1" runat="server" OnClick="btnDemo1_Click" Text="Demo1" />
<br />
</div>
</form>
`
added
<div id="dialog"></div>
i also added javascirpt files
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
There are two pages: Login.aspx and Profile.aspx, which are built using HTML and AngularJS.
The login.aspx page uses ng-view to get the template of Login-view or Signup View.
The code used is:
<head>
<title></title>
<base href="/Login.aspx" />
<link href="StyleSheet/Login_css.css" rel="stylesheet" />
<script src="JscriptVendors/angular.min.js"></script>
</head>
<body ng-app="JouralApp_login">
<div ng-view></div>
<script src="Jscript_Angular/Model.js"></script>
<script src="Jscript_Angular/Controllers/LoginPageController.js"></script>
<script src="JscriptVendors/angular-route.min.js"></script>
<script src="JscriptVendors/angular-animate.min.js"></script>
<script src="JscriptVendors/jquery.min.js"></script>
</body>
The views are stored in Template folder with the names as: loginTemplate.html, and signupTemplate.html.
The module used for handling the login.aspx page is:
var app_login = angular.module('JouralApp_login', ['ngRoute','ngAnimate']);
var app_profile = angular.module('GameApp', []);
app_login.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/login', {
templateUrl: 'Jscript_Angular/Templates/loginTemplate.html',
controller: 'loginController'
})
.when('/signup', {
templateUrl: 'Jscript_Angular/Templates/signupTemplate.html'
}).otherwise({
redirectTo:'/login'
})
}]);
Now a created my Profile.aspx, with the HTML code as:
<head>
<script src="Scripts/angular.js"></script>
</head>
<body ng-app="app_profile">
<div ng-controller="chatController">
<div>
<div ng-repeat="chat in messages">{{chat}}</div>
<div>
<input type="text ng-model="message" />
<input type="button" ng-click="newMessage()" />
</div>
</div>
</div>
<script src="Jscript_Angular/Model.js"></script>
<script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.js"></script>
<script src="signalr/hub"></script>
<script src="Jscript_Angular/Controllers/ChatController.js"></script>
</body>
Every thing was working fine until I try to integrate SignalR into my project.
I made two classes:
CLASS 1:
[assembly: OwinStartup(typeof(Startup))]
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
CLASS 2:
public class ChatHub : Hub
{
public void SendMessage(string name, string message)
{
Clients.All.broadcastMessage(name, message);
}
}
I also made the following controller in order to access my javascript function:
app_profile.controller('chatController',['$scope', function ($scope) {
$scope.name = 'Guest';
$scope.message = '';
$scope.messages = [];
$scope.chatHub = null;
$scope.chatHub = $.connection.chatHub;
$.connection.hub.start();
$scope.chatHub.client.broadcastMessage = function (name, message) {
var newMessage = name + " " + message;
$scope.messages.push(newMessage);
$scope.$apply();
};
$scope.newMessage = function () {
$scope.chatHub.server.sendMessage($scope.name, $scope.message);
$scope.message = '';
}
}]);
Now when I try to access my profile page, it show the error
angular.js:13550 Error: SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. .
Also when i try to access, localhost:5136/signalr/hubs, it redirects me to my login page, i.e: localhost:5136/login
I think the problem is that, it cannot access the hub which I created because of the routing which i did using angularJS for the login page.
Please help me find the solution.
I read some forums and found an easier way to call a C# Method from JavaScript but it's not working. I did it in my live app and it didn't work so I took a fresh project and used the code as below:
ASPX Mark-up
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div>
<asp:Button ID="btnMe" runat="server" OnClientClick="jsfun()" />
</div>
</form>
</body>
</html>
Javascript
<script type="text/javascript">
function jdfun() {
PageMethods.CSFun(onSucess, onError);
}
function onSucess(result) {
alert(result);
}
function onSucess(result) {
alert(result);
}
</script>
C#
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string CSFun()
{
string result = "Hey Yeah";
return result;
}
}
No Error No Exception. The Debugger is not even going into the C# code.
Can anyone help me out.
Thanks.
Edit
I didn't really know about this, but I read a little and fixed your code.
Here is the code that works:
js:
<script type="text/javascript">
function jsfun() {
PageMethods.CSFun(onSuccess, onError);
}
function onSuccess(result) {
alert(result);
}
function onError(result) {
alert(result);
}
</script>
aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" OnClientClick="jsfun()" />
</div>
</form>
</body>
</html>
Basic Example to do the same
aspx page
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"
EnablePageMethods="true" />
<fieldset id="ContactFieldset">
<label>
Your Name
<input type="text" id="NameTextBox" /></label>
<label>
Email Address
<input type="text" id="EmailTextBox" /></label>
<label>
Your Message
<textarea id="MessageTextBox"></textarea></label>
<button onclick="SendForm();">
Send</button>
</fieldset>
</form>
Page Method (.cs)
using System;
using System.Web.Services;
public partial class ContactUs : System.Web.UI.Page
{
[WebMethod]
public static void SendForm(string name, string email, string message)
{
if (string.IsNullOrEmpty(name))
{
throw new Exception("You must supply a name.");
}
if (string.IsNullOrEmpty(email))
{
throw new Exception("You must supply an email address.");
}
if (string.IsNullOrEmpty(message))
{
throw new Exception("Please provide a message to send.");
}
// If we get this far we know that they entered enough data, so
// here is where you would send the email or whatever you wanted
// to do :)
}
}
javascript function
function SendForm() {
var name = $get("NameTextBox").value;
var email = $get("EmailTextBox").value;
var message = $get("MessageTextBox").value;
PageMethods.SendForm(name, email, message,
OnSucceeded, OnFailed);
}
function OnSucceeded() {
// Dispaly "thank you."
$get("ContactFieldset").innerHTML = "<p>Thank you!</p>";
}
function OnFailed(error) {
// Alert user to the error.
alert(error.get_message());
}