I have been stuck on this for a few weeks, any help is very much appreciated!
I am building an MVC5 web application (This is my first C# & ASP.NET project). The model of this application is a web service. There is a page with a checkbox, and when clicked, this calls a bit of jQuery that uses AJAX to call a method in one of my controllers. This method calls a web service and updates a boolean value. This all seems to be working... my issue is that I need checkbox to be sent with the AJAX call, so that I can update a label on the page associated with the checkbox.
Is there a better way to accomplish this? (It seems rather hack-ish to me, using javascript to call my code). My question, though, is this: How can I pass the sender with an AJAX call?
CSHTML Page:
#Html.CheckBox("checkbox_subscribe", new{#id = "subscribeBox"})
#Html.Label("subscribebox", "Please notify me via email of any changes in lead times.")
<script>
$(document).ready(function () {
$("#subscribeBox").change(function (event) {
$.ajax({
type: "POST",
url: "#Url.Action("SubscribeClick", "Home")",
success: function (result) {
alert(result);
}
});
});
});
</script>
Controller Method:
public string SubscribeClick(object sender, EventArgs e)
{
String flag;
if (sender == checked)
{
flag = "Y";
}
else
{
flag = "N";
}
websecurity.n_securitySoapClient proxy = new websecurity.n_securitySoapClient();
String result = proxy.setsubscribeflag("11", flag, "leadtimes");
if (result.StartsWith("<success>"))
{
if (flag == "Y") result = "Successfully subscribed for email.";
else result = "Successfully unsubscribed from email.";
}
return result;
}
Just a side note: When I try casting the sender object to a CheckBox object type, I get the error: "InvalidCastException was unhandled by use code"
Ajax is client side code and has no concept of c# code such as object sender, EventArgs e. Change you method to accept a boolean
[HttpPost]
public ActionResult SubscribeClick(bool isChecked)
{
if(isChecked)
{
....
}
else
{
....
}
return Json(result,
}
and then in the script, pass true or false based on the state of the checkbox
$("#subscribeBox").change(function (event) {
var isChecked = $(this).is(':checked');
$.ajax({
type: "POST",
url: "#Url.Action("SubscribeClick", "Home")",
data: { isChecked: isChecked },
success: function (result) {
alert(result);
}
});
});
I have knockout doing validation on this input.. I think. I'm unable to set any breaks but it sends the static text from $root.ValidationMessages.Object
Here's the input element below.
<input id="objectNumber" name="objectNumber" class="setsize ats-ccnumber valid"
type="text" placeholder="Number"
data-bind="value: PaymentOptions.Object.Number>
What I'd like to do is somehow send an async ajax call when validation fails passing the input ID and the invalid text that was entered before the text gets wiped out for failing validation. Here' is the KO Handler for the validateObject
ko.bindingHandlers.validateObject = {
'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
var message = value;
var when = function () { return true; };
if (value != null && typeof value == "object") {
if (value.when != null) {
when = function () {
if (typeof value.when == 'function') return value.when();
return value.when;
};
}
message = value.message;
}
addObjectValidation(when, getValueFor(message), element);
},
'update': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
};
And here is the addObjectValidation Javascript
function addObjectNumValidation(callback, message, element) {
$(element).rules("add", { required: function (x) { return !$(x).attr('disabled') && callback(); }, number2 : function () { return { objectType: $('#objectType').val(), required: !$(x).attr('disabled') && callback() }; }, messages: { required: message, creditcard2: message} });
var messages = $.data(element, 'validationMessages') || [];
messages.push(message);
$.data(element, 'validationMessages', messages);
}
I don't see where this is being validated at. First exposure to Knockout. Can anyone explain what's going on if possible and how to send out an ajax call right after validation fails but before the field is cleared?
The validation is done by JQuery Validation. It is totally independent from and not related to KnockoutJS.
To get the validation failures everytime the form is validated, listen to invalid-form event then access JQuery Validation's errorList member
$("form").on("invalid-form", function (e) {
console.log($(e.target).validate().errorList);
});
By the way, if possible, I suggest you to replace JQuery Validation with Knockout Validation.
Using Knockout-Validation plugin would be much better option rather than using JQuery Validation itself. It has support for remote validation with AJAX call. It also based on JQuery Validation so most validation rules are the same
I do something to pass Facebook ressponse by post the value to currentpage
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
$.post('http://localhost:50790/TestPage.aspx',
{ fbid: response.id, firstname: response.first_name, lastname: response.last_name, email: response.email, bday: response.birthday },
function (result) {
});
console.log('Good to see you, ' + response.name + response.id + response.email + response.gender + response.birthday + '.');
});
}
and I do some checkin on my code behind :
protected void Page_Load(object sender, EventArgs e)
{
var fbid = Request.Form["fbid"];
var fname = Request.Form["firstname"];
var lname = Request.Form["lastname"];
var email = Request.Form["email"];
var bday = Request.Form["bday"];
if (!Page.IsPostBack)
{
if (fbid != null)
{
CheckFBLogin(fbid.ToString());
}
}
}
my testing is on CheckFBLogin if the result okay, It'll make the user login to website, else it should redirect to others page / registration page.
public void CheckFBLogin(string Fbid)
{
CustomerSelfCareSoapClient service = new CustomerSelfCareSoapClient();
service.ClientCredentials.UserName.UserName = _Username;
service.ClientCredentials.UserName.Password = _Password;
GResult result = service.CheckFBLogin(Fbid.ToString(), "");
if (result != null)
{
if (result.Code == 100)
{
//login
}
else
{
Response.Redirect("~/callback.aspx", true);
}
}
}
I dont know what happen, I usually do something like this to check login but pure asp and c#. any I idea why the page wont redirect ?
I'm able to duplicate this behavior with Mono. On my system, the problem is that the jquery $post() method actually enables the Page.IsPostBack property in code behind so that all logic in the if (!Page.IsPostBack) {} condition fails to run.
My advice would be use ASP.NET's [WebMethod] attribute alongside jquery. Dave Ward has documented this well. If you're doing a lot of asynchronous client side JSON calls, you might consider ASP.NET's MVC implementation if the scope of your project allows it.
This is with ASP.NET Web Forms .NET 2.0 -
I have a situation that I am not sure how to fulfill all the requirements. I need to update an img source on the page if selections are made from a drop down on the same page.
Basically, the drop downs are 'options' for the item. If a selection is made (i.e. color: red) then I would update the img for the product to something like (productID_red.jpeg) IF one exists.
The problem is I don't want to do post backs and refresh the page every time a selection is made - especially if I do a check to see if the image exists before I swap out the img src for that product and the file doesn't exist so I just refreshed the entire page for nothing.
QUESTION:
So I have easily thrown some javascript together that formulates a string of the image file name based on the options selected. My question is, what options do I have to do the following:
submit the constructed image name (i.e. productID_red_large.jpg) to some where that will verify the file exists either in C# or if it is even possible in the javascript. I also have to check for different possible file types (i.e. .png, .jpg...etc.).
not do a post back and refresh the entire page
Any suggestions?
submit the constructed image name
(i.e. productID_red_large.jpg) to some
where that will verify the file exists
either in C# or if it is even possible
in the javascript. I also have to
check for different possible file
types (i.e. .png, .jpg...etc.).
not do a post back and refresh the
entire page
If you wish to not post back to the page you will want to look at $.ajax() or $.post() (which is just short hand for $.ajax() with some default options)
To handle that request you could use a Generic Http Handler.
A simple outline could work like the following:
jQuery example for the post:
$("someButton").click(function () {
//Get the image name
var imageToCheck = $("#imgFileName").val();
//construct the data to send to the handler
var dataToSend = {
fileName: imageToCheck
};
$.post("/somePath/ValidateImage.ashx", dataToSend, function (data) {
if (data === "valid") {
//Do something
} else {
//Handle error
}
}, "html");
})
Then on your asp.net side you would create an http handler that will validate that request.
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
var fileName = context.Request["fileName"];
var fullPath = Path.Combine("SomeLocalPath", fileName);
//Do something to validate the file
if (File.Exists(fullPath))
{
context.Response.Write("valid");
}
else
{
context.Response.Write("invalid");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
Hope this helps, if I missed the mark at all on this let me know and I can revise.
We have an app of the same type, webforms .net 2, we do something similar with the following setup:
Using jQuery you can call a method in the page behind of the current page, for example, the following will trigger the AJAX call when the select box called selectBoxName changes, so your code work out the image name here and send it to the server.
$(document).ready(function () {
$('#selectBoxName').change(function (event) {
var image_name = 'calculated image name';
$.ajax({
type: "POST",
url: 'SomePage.aspx/CheckImageName',
data: "{'imageName': '" + image_name + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg);
},
error: function (a, b, c) {
alert("The image could not be loaded.");
}
});
});
});
Where SomePage.aspx is the current page name, and image_name is filled with the name you have already worked out. You could replace the img src in the success and error messages, again using jQuery.
The code behind for that page would then have a method like the following, were you could just reutrn true/fase or the correct image path as a string if needed. You can even return more complex types/objects and it will automatically send back the proper JSON resposne.
[System.Web.Services.WebMethod(true)]
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
public static bool CheckImageName(string imageName)
{
/*
* Do some logic to check the file
if (file exists)
return true;
return false;
*/
}
As it is .net 2 app, you may need to install the AJAX Extensions:
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en
Could you not use a normal ajax call to the physical path of the image and check if it returns a 404?
Like this:
http://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax
<script type="text/javascript">
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status != 404;
}
function ConstructImage() {
var e = document.getElementById("opt");
var url = '[yourpath]/' + e.value + '.jpg';
if (!UrlExists(url)) {
alert('doesnt exists');
//do stuff if doesnt exist
} else {
alert('exists');
//change img if it does
}
}
</script>
<select id="opt" onchange="ConstructImage()">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
Which is the easiest and most unobstrusive way to keep an ASP.NET session alive as long as the user has the browser window open? Is it timed AJAX calls? I want to prevent the following: sometimes users keep their window open for a long time, then enter stuff, and on submit nothing works anymore because the server side session expired. I don't want to increase the timeout value for more than 10 min on the server as I want closed sessions (by closing the browser window) to time out fast.
Suggestions, code samples?
I use JQuery to perform a simple AJAX call to a dummy HTTP Handler that does nothing but keeping my Session alive:
function setHeartbeat() {
setTimeout("heartbeat()", 5*60*1000); // every 5 min
}
function heartbeat() {
$.get(
"/SessionHeartbeat.ashx",
null,
function(data) {
//$("#heartbeat").show().fadeOut(1000); // just a little "red flash" in the corner :)
setHeartbeat();
},
"json"
);
}
Session handler can be as simple as:
public class SessionHeartbeatHttpHandler : IHttpHandler, IRequiresSessionState
{
public bool IsReusable { get { return false; } }
public void ProcessRequest(HttpContext context)
{
context.Session["Heartbeat"] = DateTime.Now;
}
}
The key is to add IRequiresSessionState, otherwise Session won't be available (= null). The handler can of course also return a JSON serialized object if some data should be returned to the calling JavaScript.
Made available through web.config:
<httpHandlers>
<add verb="GET,HEAD" path="SessionHeartbeat.ashx" validate="false" type="SessionHeartbeatHttpHandler"/>
</httpHandlers>
added from balexandre on August 14th, 2012
I liked so much of this example, that I want to improve with the HTML/CSS and the beat part
change this
//$("#heartbeat").show().fadeOut(1000); // just a little "red flash" in the corner :)
into
beatHeart(2); // just a little "red flash" in the corner :)
and add
// beat the heart
// 'times' (int): nr of times to beat
function beatHeart(times) {
var interval = setInterval(function () {
$(".heartbeat").fadeIn(500, function () {
$(".heartbeat").fadeOut(500);
});
}, 1000); // beat every second
// after n times, let's clear the interval (adding 100ms of safe gap)
setTimeout(function () { clearInterval(interval); }, (1000 * times) + 100);
}
HTML and CSS
<div class="heartbeat">♥</div>
/* HEARBEAT */
.heartbeat {
position: absolute;
display: none;
margin: 5px;
color: red;
right: 0;
top: 0;
}
here is a live example for only the beating part: http://jsbin.com/ibagob/1/
If you are using ASP.NET MVC – you do not need an additional HTTP handler and some modifications of the web.config file. All you need – just to add some simple action in a Home/Common controller:
[HttpPost]
public JsonResult KeepSessionAlive() {
return new JsonResult {Data = "Success"};
}
, write a piece of JavaScript code like this one (I have put it in one of site’s JavaScript file):
var keepSessionAlive = false;
var keepSessionAliveUrl = null;
function SetupSessionUpdater(actionUrl) {
keepSessionAliveUrl = actionUrl;
var container = $("#body");
container.mousemove(function () { keepSessionAlive = true; });
container.keydown(function () { keepSessionAlive = true; });
CheckToKeepSessionAlive();
}
function CheckToKeepSessionAlive() {
setTimeout("KeepSessionAlive()", 5*60*1000);
}
function KeepSessionAlive() {
if (keepSessionAlive && keepSessionAliveUrl != null) {
$.ajax({
type: "POST",
url: keepSessionAliveUrl,
success: function () { keepSessionAlive = false; }
});
}
CheckToKeepSessionAlive();
}
, and initialize this functionality by calling a JavaScript function:
SetupSessionUpdater('/Home/KeepSessionAlive');
Please note! I have implemented this functionality only for authorized users (there is no reason to keep session state for guests in most cases) and decision to keep session state active is not only based on – is browser open or not, but authorized user must do some activity on the site (move a mouse or type some key).
Whenever you make a request to the server the session timeout resets. So you can just make an ajax call to an empty HTTP handler on the server, but make sure the handler's cache is disabled, otherwise the browser will cache your handler and won't make a new request.
KeepSessionAlive.ashx.cs
public class KeepSessionAlive : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
context.Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
context.Response.Cache.SetNoStore();
context.Response.Cache.SetNoServerCaching();
}
}
.JS:
window.onload = function () {
setInterval("KeepSessionAlive()", 60000)
}
function KeepSessionAlive() {
url = "/KeepSessionAlive.ashx?";
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, true);
xmlHttp.send();
}
#veggerby - There is no need for the overhead of storing variables in the session. Just preforming a request to the server is enough.
Do you really need to keep the session (do you have data in it?) or is it enough to fake this by reinstantiating the session when a request comes in? If the first, use the method above. If the second, try something like using the Session_End event handler.
If you have Forms Authentication, then you get something in the Global.asax.cs like
FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(formsCookie.Value);
if (ticket.Expired)
{
Request.Cookies.Remove(FormsAuthentication.FormsCookieName);
FormsAuthentication.SignOut();
...
}
else
{ ...
// renew ticket if old
ticket = FormsAuthentication.RenewTicketIfOld(ticket);
...
}
And you set the ticket lifetime much longer than the session lifetime. If you're not authenticating, or using a different authentication method, there are similar tricks. Microsoft TFS web interface and SharePoint seem to use these - the give away is that if you click a link on a stale page, you get authentication prompts in the popup window, but if you just use a command, it works.
you can just write this code in you java script file thats it.
$(document).ready(function () {
var delay = (20-1)*60*1000;
window.setInterval(function () {
var url = 'put the url of some Dummy page';
$.get(url);
}, delay);
});
The (20-1)*60*1000 is refresh time, it will refresh the session timeout. Refresh timeout is calculated as default time out of iis = 20 minutes, means 20 × 60000 = 1200000 milliseconds - 60000 millisecond (One minutes before session expires ) is 1140000.
[Late to the party...]
Another way to do this without the overhead of an Ajax call or WebService handler is to load a special ASPX page after a given amount of time (i.e., prior to the session state time-out, which is typically 20 minutes):
// Client-side JavaScript
function pingServer() {
// Force the loading of a keep-alive ASPX page
var img = new Image(1, 1);
img.src = '/KeepAlive.aspx';
}
The KeepAlive.aspx page is simply an empty page which does nothing but touch/refresh the Session state:
// KeepAlive.aspx.cs
public partial class KeepSessionAlive: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Refresh the current user session
Session["refreshTime"] = DateTime.UtcNow;
}
}
This works by creating an img (image) element and forcing the browser to load its contents from the KeepAlive.aspx page. Loading that page causes the server to touch (update) the Session object, extending the session's expiration sliding time window (typically by another 20 minutes). The actual web page contents are discarded by the browser.
An alternative, and perhaps cleaner, way to do this is to create a new iframe element and load the KeepAlive.aspx page into it. The iframe element is hidden, such as by making it a child element of a hidden div element somewhere on the page.
Activity on the page itself can be detected by intercepting mouse and keyboard actions for the entire page body:
// Called when activity is detected
function activityDetected(evt) {
...
}
// Watch for mouse or keyboard activity
function watchForActivity() {
var opts = { passive: true };
document.body.addEventListener('mousemove', activityDetected, opts);
document.body.addEventListener('keydown', activityDetected, opts);
}
I cannot take credit for this idea; see:
https://www.codeproject.com/Articles/227382/Alert-Session-Time-out-in-ASP-Net.
Here is a alternative solution that should survive if the client pc goes into sleep mode.
If you have a huge amount of logged in users then use this cautiously as this could eat a lot of server memory.
After you login (i do this in the LoggedIn event of the login control)
Dim loggedOutAfterInactivity As Integer = 999 'Minutes
'Keep the session alive as long as the authentication cookie.
Session.Timeout = loggedOutAfterInactivity
'Get the authenticationTicket, decrypt and change timeout and create a new one.
Dim formsAuthenticationTicketCookie As HttpCookie = _
Response.Cookies(FormsAuthentication.FormsCookieName)
Dim ticket As FormsAuthenticationTicket = _
FormsAuthentication.Decrypt(formsAuthenticationTicketCookie.Value)
Dim newTicket As New FormsAuthenticationTicket(
ticket.Version, ticket.Name, ticket.IssueDate,
ticket.IssueDate.AddMinutes(loggedOutAfterInactivity),
ticket.IsPersistent, ticket.UserData)
formsAuthenticationTicketCookie.Value = FormsAuthentication.Encrypt(newTicket)
I spent a few days trying to figure out how to prolong a users session in WebForms via a popup dialog giving the user the option to renew the session or to allow it to expire. The #1 thing that you need to know is that you don't need any of this fancy 'HttpContext' stuff going on in some of the other answers. All you need is jQuery's $.post(); method. For example, while debugging I used:
$.post("http://localhost:5562/Members/Location/Default.aspx");
and on your live site you would use something like:
$.post("http://mysite/Members/Location/Default.aspx");
It's as easy as that. Furthermore, if you'd like to prompt the user with the option to renew their session do something similar to the following:
<script type="text/javascript">
$(function () {
var t = 9;
var prolongBool = false;
var originURL = document.location.origin;
var expireTime = <%= FormsAuthentication.Timeout.TotalMinutes %>;
// Dialog Counter
var dialogCounter = function() {
setTimeout( function() {
$('#tickVar').text(t);
t--;
if(t <= 0 && prolongBool == false) {
var originURL = document.location.origin;
window.location.replace(originURL + "/timeout.aspx");
return;
}
else if(t <= 0) {
return;
}
dialogCounter();
}, 1000);
}
var refreshDialogTimer = function() {
setTimeout(function() {
$('#timeoutDialog').dialog('open');
}, (expireTime * 1000 * 60 - (10 * 1000)) );
};
refreshDialogTimer();
$('#timeoutDialog').dialog({
title: "Session Expiring!",
autoOpen: false,
height: 170,
width: 350,
modal: true,
buttons: {
'Yes': function () {
prolongBool = true;
$.post("http://localhost:5562/Members/Location/Default.aspx");
refreshDialogTimer();
$(this).dialog("close");
},
Cancel: function () {
var originURL = document.location.origin;
window.location.replace(originURL + "/timeout.aspx");
}
},
open: function() {
prolongBool = false;
$('#tickVar').text(10);
t = 9;
dialogCounter();
}
}); // end timeoutDialog
}); //End page load
</script>
Don't forget to add the Dialog to your html:
<div id="timeoutDialog" class='modal'>
<form>
<fieldset>
<label for="timeoutDialog">Your session will expire in</label>
<label for="timeoutDialog" id="tickVar">10</label>
<label for="timeoutDialog">seconds, would you like to renew your session?</label>
</fieldset>
</form>
</div>
In regards to veggerby's solution, if you are trying to implement it on a VB app, be careful trying to run the supplied code through a translator. The following will work:
Imports System.Web
Imports System.Web.Services
Imports System.Web.SessionState
Public Class SessionHeartbeatHttpHandler
Implements IHttpHandler
Implements IRequiresSessionState
ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Session("Heartbeat") = DateTime.Now
End Sub
End Class
Also, instead of calling like heartbeat() function like:
setTimeout("heartbeat()", 300000);
Instead, call it like:
setInterval(function () { heartbeat(); }, 300000);
Number one, setTimeout only fires once whereas setInterval will fire repeatedly. Number two, calling heartbeat() like a string didn't work for me, whereas calling it like an actual function did.
And I can absolutely 100% confirm that this solution will overcome GoDaddy's ridiculous decision to force a 5 minute apppool session in Plesk!
Here JQuery plugin version of Maryan solution with handle optimization. Only with JQuery 1.7+!
(function ($) {
$.fn.heartbeat = function (options) {
var settings = $.extend({
// These are the defaults.
events: 'mousemove keydown'
, url: '/Home/KeepSessionAlive'
, every: 5*60*1000
}, options);
var keepSessionAlive = false
, $container = $(this)
, handler = function () {
keepSessionAlive = true;
$container.off(settings.events, handler)
}, reset = function () {
keepSessionAlive = false;
$container.on(settings.events, handler);
setTimeout(sessionAlive, settings.every);
}, sessionAlive = function () {
keepSessionAlive && $.ajax({
type: "POST"
, url: settings.url
,success: reset
});
};
reset();
return this;
}
})(jQuery)
and how it does import in your *.cshtml
$('body').heartbeat(); // Simple
$('body').heartbeat({url:'#Url.Action("Home", "heartbeat")'}); // different url
$('body').heartbeat({every:6*60*1000}); // different timeout