We have a web forms app asp.net page (see markup and code below) with an image control to display a .png file in the customers folder (network file system). If the .png file is updated the latest image is not displayed but the old image is displayed. This
happens for sometimes several reloads of the page. I have a feeling it may be a caching issue but I want it to refresh "every" time the page displays.
<script type="text/javascript">
var panel;
function signatureCapture() {
var canvas = document.getElementById("SigCnv");
var context = canvas.getContext("2d");
//canvas.width = 360;
canvas.width = window.innerWidth;
canvas.height = 84;
context.fillStyle = "#fff";
context.strokeStyle = "#444";
context.lineWidth = 1.5;
context.lineCap = "round";
context.fillRect(0, 0, canvas.width, canvas.height);
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
{ //functions
function remove_event_listeners() {
canvas.removeEventListener('mousemove', on_mousemove, false);
canvas.removeEventListener('mouseup', on_mouseup, false);
canvas.removeEventListener('touchmove', on_mousemove, false);
canvas.removeEventListener('touchend', on_mouseup, false);
document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);
}
function get_coords(e) {
var x, y;
if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;
x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
return {
x : x, y : y
};
};
function on_mousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas.addEventListener('mouseup', on_mouseup, false);
canvas.addEventListener('mousemove', on_mousemove, false);
canvas.addEventListener('touchend', on_mouseup, false);
canvas.addEventListener('touchmove', on_mousemove, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);
empty = false;
var xy = get_coords(e);
context.beginPath();
pixels.push('moveStart');
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;
};
function on_mousemove(e, finish) {
e.preventDefault();
e.stopPropagation();
var xy = get_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2
};
if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
} else {
calculate = true;
}
context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;
};
function on_mouseup(e) {
remove_event_listeners();
disableSave = false;
context.stroke();
pixels.push('e');
calculate = false;
};
}
canvas.addEventListener('touchstart', on_mousedown, false);
canvas.addEventListener('mousedown', on_mousedown, false);
}
function signatureSave() {
var canvas = document.getElementById("newSignature"); // save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png");
document.getElementById("saveSignature").src = dataURL;
};
function signatureClear() {
var canvas = document.getElementById("SigCnv");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
return false;
}
function signatureAction() {
//alert('signatureAction function');
var radioButtons = document.getElementsByName("ctl00$MainContent$RblSignatureAction");
for (var x = 0; x < radioButtons.length; x++) {
if (radioButtons[x].checked && radioButtons[x].value == 0) {
//Use existing signature image
document.getElementById('PanelUpload').className = 'hide';
document.getElementById('PanelSignature').className = 'hide';
}
if (radioButtons[x].checked && radioButtons[x].value == 1) {
//Enter new signature image
panel = document.getElementById('PanelSignature')
panel.className = 'show';
document.getElementById('PanelUpload').className = 'hide';
}
if (radioButtons[x].checked && radioButtons[x].value == 2) {
//Upload a signature
document.getElementById('PanelUpload').className = 'show';
document.getElementById('PanelSignature').className = 'hide';
}
}
}
function showUpload() {
document.getElementById('BtnUploadFile').className = 'show';
panel = document.getElementById('PanelSignature')
panel.className = 'hide';
}
function showPay() {
panel = document.getElementById('PanelPayments');
panel.className = 'hide';
}
</script>
<script type="text/javascript">
// Send the canvas image to the server.
$(function () {
$("#BtnSaveSignature").click(function () {
var vpath = document.getElementById('txtPhotoPath').value;
var image = document.getElementById("SigCnv").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'SaveSignature.aspx/SaveImage',
data: JSON.stringify({
imageData : image,
strSavePath: vpath
}),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Signature image saved successfully !')
},
error: function (msg) {
alert('save signature failed')
}
});
panel = document.getElementById('PanelSignature');
panel.className = 'hide';
panel = document.getElementById('PanelDocs');
panel.className = 'show';
//refresh page to get new signature
__doPostBack('','');
});
});
</script>
<hr style="border-color: #000000; width: 98%;" />
<asp:Panel ID="PanelSignatureOnFile" runat="server" CssClass="" ClientIDMode="Static">
<asp:Label ID="LblSignatureOnFile" runat="server" Text=""></asp:Label>
<asp:Image ID="saveSignature" runat="server" ClientIDMode="Static" />
<br />
<asp:RadioButtonList ID="RblSignatureAction" runat="server"
RepeatDirection="Horizontal" CellSpacing="5" CellPadding="5"
BorderWidth="1px" BorderStyle="Solid" onclick="signatureAction();" ClientIDMode="Static">
<asp:ListItem Value="0" Text="Use Above"></asp:ListItem>
<asp:ListItem Value="1" Text="Enter New"></asp:ListItem>
<asp:ListItem Value="2" Text="Upload New"></asp:ListItem>
</asp:RadioButtonList>
</asp:Panel>
<p> </p>
<asp:Panel ID="PanelUpload" runat="server" CssClass="hide" ClientIDMode="Static">
<asp:FileUpload ID="FileUpload1" runat="server" ToolTip="Browse for file" onchange="showUpload();" />
<asp:Button ID="BtnUploadFile" runat="server" Text="Click to Upload selected file" CssClass="hide" ClientIDMode="Static" ForeColor="#009900" />
</asp:Panel>
<asp:Panel ID="PanelSignature" runat="server" CssClass="hide" ClientIDMode="Static">
<div id="canvas">
<canvas class="" id="SigCnv"
style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;">
</canvas>
</div>
<script type="text/javascript">
signatureCapture();
</script>
<asp:Button ID="BtnSaveSignature" runat="server" Text="Save signature" UseSubmitBehavior="False" ClientIDMode="Static" />
<asp:Button ID="BtnClearSignature" runat="server" Text="Clear signature" OnClientClick="return signatureClear();" />
</asp:Panel>
<asp:Panel ID="PanelDocs" runat="server" CssClass="hide" ClientIDMode="Static">
<p> </p>
<asp:Button ID="BtnPrintDocs" runat="server" Text="Print Final Bill Documents"
ClientIDMode="Static" PostBackUrl="~/Repairs/FinalBillReports.aspx" OnClientClick="showPay();" />
</asp:Panel>
<asp:Panel ID="PanelPayments" runat="server" CssClass="" ClientIDMode="Static">
<asp:Button ID="BtnPayment" runat="server" Text="3. Enter Payment" PostBackUrl="~/Repairs/Payment.aspx" />
</asp:Panel>
The code-behind page is below:
Private Sub Repairs_FinalBill_Load(sender As Object, e As EventArgs) Handles Me.Load
If Request.Cookies("rid") Is Nothing Then
'no RecordID in cookie so send back to customer login
Response.Redirect("~/Default.aspx")
Exit Sub
End If
Dim strRONumber As String = ""
Dim strid As String = Request.Cookies("rid").Value
Dim bolROfound As Boolean = False
'Get Customer and Repair information for this job
Dim strSQL As String = "EXEC ms_selRepairOrderOne @RecordID=" & strid
BtnPrintDocs.PostBackUrl = "~/Repairs/FinalBillReports.aspx?rid=" & strid
Using conData As SqlConnection = New SqlConnection(DBClass.GetMgmtConnectionString)
conData.Open()
Dim cmdSelect As SqlCommand = New SqlCommand(strSQL, conData)
Dim dtr As SqlDataReader = cmdSelect.ExecuteReader()
If dtr.HasRows Then
bolROfound = True
While dtr.Read()
Dim lbl As Label = Page.Master.FindControl("LblOwner")
lbl.Text = dtr("Customer")
If Not IsDBNull(dtr("Vehicle")) Then
lbl = Page.Master.FindControl("LblVehicle")
lbl.Text = dtr("Vehicle")
If Request.Cookies("vehicle") Is Nothing Then
Response.Cookies("vehicle").Value = dtr("Vehicle")
Else
If Request.Cookies("vehicle").Value <> dtr("Vehicle") Then
Response.Cookies("vehicle").Value = dtr("Vehicle")
End If
End If
End If
strRONumber = dtr("RepairOrderID").ToString
txtRONumber.Text = strRONumber
txtRecordID.Text = dtr("RecordID").ToString
If Request.Cookies("customer") Is Nothing Then
Response.Cookies("customer").Value = dtr("Customer")
Else
If Request.Cookies("customer").Value <> dtr("Customer") Then
Response.Cookies("customer").Value = dtr("Customer")
End If
End If
If Not IsDBNull(dtr("OriginalTargetDate")) Then
lbl = Page.Master.FindControl("LblTDD")
If Convert.ToBoolean(dtr("TDDWeekOf")) = False Then
lbl.Text = dtr("OriginalTargetDate")
Else
lbl.Text = "Week Of " & Format(dtr("OriginalTargetDate"), "M/d/yyyy")
Dim ck As CheckBox = Page.Master.FindControl("ckTDDWeekOf")
ck.Checked = True
End If
If Request.Cookies("tdd") Is Nothing Then
Response.Cookies("tdd").Value = Format(dtr("OriginalTargetDate"), "M/d/yyyy")
Else
If Request.Cookies("tdd").Value <> dtr("OriginalTargetDate") Then
Response.Cookies("tdd").Value = Format(dtr("OriginalTargetDate"), "M/d/yyyy")
End If
End If
End If
Dim lbtn As LinkButton = Page.Master.FindControl("LBtnMnu3")
txtInsuranceID.Text = dtr("InsuranceID").ToString
If dtr("InsuranceID") = 0 Then
lbtn.Visible = False
End If
If Not IsDBNull(dtr("FolderName")) Then
txtFolderName.Text = dtr("FolderName").ToString
PanelSignatureOnFile.CssClass = "show"
LblSignatureOnFile.Text = "Signature On File"
Dim strVPath As String = UtilClass.GetPhotosPath(strid, True, True)
Dim strPath As String = Server.MapPath("~/Photos/" & dtr("FolderName").ToString & "/") & "Signature.png"
txtPhotoPath.Text = strPath
If File.Exists(strPath) Then
saveSignature.ImageUrl = strVPath & "/Signature.png"
txtPhotoPathV.Text = Replace(strVPath, "~", "..") & "/Signature.png"
RblSignatureAction.Items(0).Enabled = True
RblSignatureAction.Items(0).Selected = True
PanelDocs.CssClass = "show"
Else
RblSignatureAction.Items(0).Enabled = False
End If
Else
txtPhotoPath.Text = UtilClass.GetPhotosPath(strid)
End If
Exit While
End While
End If
dtr.Close()
conData.Dispose()
End Using
If saveSignature.ImageUrl <> "" Then
RblSignatureAction.Items(0).Selected = True
End If
End Sub
Private Sub BtnUploadFile_Click(sender As Object, e As EventArgs) Handles BtnUploadFile.Click
If FileUpload1.HasFile Then
Dim reg As Regex = New Regex("(?i).*\.(gif|jpe?g|png|tif)$")
Dim strFile As String = FileUpload1.FileName
Dim tx As TextBox = Page.Master.FindControl("txtMsg")
If reg.IsMatch(strFile) Then
Dim SavePath As String = txtPhotoPath.Text
Dim bmp As Bitmap = CType(Bitmap.FromStream(FileUpload1.PostedFile.InputStream), Bitmap)
bmp.Save(SavePath, ImageFormat.Png)
tx.Text = "Signature uploaded"
PanelSignatureOnFile.CssClass = "show"
saveSignature.ImageUrl = UtilClass.GetPhotosPath(txtRecordID.Text, True, True) & "/Signature.png"
RblSignatureAction.Items(0).Enabled = True
RblSignatureAction.Items(2).Selected = False
RblSignatureAction.Items(0).Selected = True
PanelDocs.CssClass = "show"
Else
tx.Text = "Upload failed. Invalid file type selected. Only allowed are gif, jpg, jpeg, png and tif."
End If
End If
End Sub
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
353 Points
1550 Posts
Image control not refreshing
Jul 13, 2020 09:11 PM|dlchase|LINK
We have a web forms app asp.net page (see markup and code below) with an image control to display a .png file in the customers folder (network file system). If the .png file is updated the latest image is not displayed but the old image is displayed. This happens for sometimes several reloads of the page. I have a feeling it may be a caching issue but I want it to refresh "every" time the page displays.
Participant
1061 Points
665 Posts
Re: Image control not refreshing
Jul 13, 2020 09:51 PM|jzero|LINK
A way to force browser load a fresh image can be using a dynamic parameter with image source.
If I get correct line you can set ImageURL as
saveSignature.ImageUrl = strVPath & "/Signature.png?q=" & now.ToString("HHmmss")
Contributor
2870 Points
843 Posts
Re: Image control not refreshing
Jul 14, 2020 02:54 AM|Sean Fang|LINK
Hi dlchase,
I can see that you always assign the .png with the same name which would make the browser using the cache.
Adding unique identifier for the image would be the simplest way to force the browser reload the image, e.g. timestamp, guid.
There are some other solutions you might be interested in:
Refresh image with a new one at the same url
Hope this can help you.
Best regards,
Sean