Develop Reference

MaintainScrollPositionOnPostback is not working?

I have a page with two drop down lists (ddlA and ddlB)
Once the user selects an item from ddlA, it will populate items in ddlB
I have auto post-back turned on for ddlA.
and since I wanted to maintain the scroll position, i turned on the MaintainScrollPositionOnPostBack to true like this in the page load method. :
this.MaintainScrollPositionOnPostBack = true;
But this doesn't seem to fix the issue.
Is there a workaround to fix the problem.?
-- UPDATE --
I added this js code to the page and now the problem is that the autopost back is never happening..
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('scrollDiv').scrollLeft;
yPos = $get('scrollDiv').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('scrollDiv').scrollLeft = xPos;
$get('scrollDiv').scrollTop = yPos;
}
</script>
Am i adding the js code incorrectly? I found it here

Try to add this to the Page directive in your ASPX file and test it that route.
<%# Page Title="" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" MaintainScrollPositionOnPostback="true" Inherits="_Default" %>

I couldn't get MaintainScrollPositionOnPostback to work for me no matter what I tried. Based on this answer (https://stackoverflow.com/a/27505983) and a comment underneath it, I tried the following code which worked for me. This will only work if you have an ASP.NET ScriptManager (i.e. MicrosoftAjax.js) on your page. You also need JQuery added to your page. Add the below code to your .aspx file somewhere underneath asp:ScriptManager tag.
<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
$(function () {
var positionField = $("#<%=hfPosition.ClientID%>");
window.onscroll = function () {
var position = $(window).scrollTop();
positionField.val(position);
};
});
function pageLoad() {
var positionField = $("#<%=hfPosition.ClientID%>");
var position = parseInt(positionField.val());
if (!isNaN(position)) {
$(window).scrollTop(position);
}
};
</script>
Basically we are holding the scroll position inside the value of a hidden field called hfPosition. Whenever the page is scrolled, the value will be updated. Then when a postback happens pageLoad() will automatically be called and will get the value of hfPosition and scroll to that value.
Including the ScriptManager and JQuery, my final code snippet looked something like this:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script src="../Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
$(function () {
var positionField = $("#<%=hfPosition.ClientID%>");
window.onscroll = function () {
var position = $(window).scrollTop();
positionField.val(position);
};
});
function pageLoad() {
var positionField = $("#<%=hfPosition.ClientID%>");
var position = parseInt(positionField.val());
if (!isNaN(position)) {
$(window).scrollTop(position);
}
};
</script>/>

Is it possible to get value from Summernote editor in asp.net web forms?

I'm using summernote editor, and I want to retrieve its content in code behind.
I tried to use the following ways , but it returns empty(null)
1-
default.aspx
<div class="summernote" id="txtTest" runat="server"></div>
Code behind:
string content= txtTest.InnerText;
2-
default.aspx
<div class="summernote" id="txtTest" ></div>
Code behind:
string name = Request.Form["txtTest"];
Any suggestions?

Here is My code Working Perfectly
<div class="form-group">
<asp:Label ID="lblSummernote" runat="server" Text="Image" AssociatedControlID="txtSummernote" CssClass="control-label col-md-3"></asp:Label>
<div class="col-md-8">
<asp:TextBox ID="txtSummernote" runat="server" TextMode="MultiLine" Rows="2"></asp:TextBox>
<asp:Label ID="lblSum" runat="server" Text="Summernote"></asp:Label>
</div>
</div>
JavaScript
<script src="/Content/SummerNote/summernote.js"></script>
<script>
$(function () {
// Set up your summernote instance
$("#<%= txtSummernote.ClientID %>").summernote();
focus: true
// When the summernote instance loses focus, update the content of your <textarea>
$("#<%= txtSummernote.ClientID %>").on('summernote.blur', function () {
$('#<%= txtSummernote.ClientID %>').html($('#<%= txtSummernote.ClientID %>').summernote('code'));
});
});
</script>
<script type="text/javascript">
function funcMyHtml() {
debugger;
document.getElementById("#<%= txtSummernote.ClientID %>").value = $('#<%= txtSummernote.ClientID %>').summernote('code');
}
</script>
C# Code behind
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSum.Text = txtSummernote.Text;
}

Have you considered using a <textarea> to handle this as opposed to a <div>? Usually they are a bit easier to use with respect to storing values (as they are designed to do so) :
<textarea id="txtTest" runat="server"></textarea>
One of the ways that you might handle this would be to register an event using Summernote's available API to set the HTML content for your <textarea> element whenever focus was lost (e.g. the onblur) :
<script>
$(function () {
// Set up your summernote instance
$("#txtTest").summernote();
// When the summernote instance loses focus, update the content of your <textarea>
$("#txtTest").on('summernote.blur', function () {
$('#txtTest').html($('#txtTest').summernote('code'));
});
});
</script>
Since you are likely going to be storing HTML content within the element, you'll likely want to ensure that .NET doesn't think you are trying to exploit it. You can do this by either explicitly setting this page to ignore that process by updating the ValidateRequest property of your page :
<%# Page ... ValidateRequest = "false" %>
Or you could try simply escaping the content that is being set :
$('#txtTest').html(escape($('#txtTest').summernote('code')));

Here is how I got it working.
ref it as a class
class="summernote"
$(document).ready(function () {
$('.summernote').summernote();
});

Disabling backbutton of browser in C#

<script type="text/javascript">
{
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function (evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function () { void (0) }
}
</script>
I am using the following code in the master page to diable the back button.
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1));
Response.Cache.SetNoStore();
Response.ExpiresAbsolute = DateTime.Now.AddDays(-1d);
Response.Expires = -1500;
Response.CacheControl = "no-cache";
Page.Response.Cache.SetCacheability(HttpCacheability.NoCache);
I have a master page in that logout button is there once user click on that user will be redirected to logout page. This is working fine and once I am clicking on back button it is taking me to the last page I browsed. Even I tried with JavaScript.
I am creating timing out the session after 5 minutes. When session expires user will be redirected to session expiry page there also backbutton is taking me to the last page browsed.

Here this JavaScript functionality will work in all browsers and prevent users navigating back to previous page by hitting on browser back button check below piece of JavaScript code
<script type="text/javascript" language="javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function() { void (0) }
</script>
We need to place above script in header section of a page wherever we need to prevent users navigate back to another page by using browser back button.
I will explain our requirement with an example I have two pages Defaul1.aspx and Default2.aspx now I will redirect from Default1.aspx page to Defaul2.aspx page. After come from Defaul1.aspx page to Default2.aspx if I try to navigate back to Default1.aspx page from Defaul2.aspx then I want prevent user navigate back to previous page (Defaul1.aspx). To achieve this functionality place above JavaScript function in header section of required page.
After add our JavaScript functionality to our page that code will be like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Disable Browser Back buttons</title>
<script type="text/javascript" language="javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function() { void (0) }
</script>
</head>
<body >
<form id="form1" runat="server">
<div>
First Page
</div>
<div>
<asp:Button id="btnFirst" runat="server" Text="Go to First Page" PostBackUrl="~/Default.aspx" />
<asp:Button ID="btnSecond" runat="server" Text="Go to Second Page" PostBackUrl="~/Default2.aspx" />
<asp:Button ID="btnThree" runat="server" Text="Go to Third Page" PostBackUrl="~/Default3.aspx" />
</div>
</form>
</body>
</html>
We can also achieve this by disabling browser caching in code behind write the following lines of code in Page_Init event or Page_Load event and don’t forgot to add namespace using System.Web; because HttpCacheability related to that namespace.
protected void Page_Init(object sender, EventArgs e)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.Now.AddSeconds(-1));
Response.Cache.SetNoStore();
}
We need to place this code in a page wherever we need to disable browser back button

<script type="text/javascript" language="javascript">
window.onload = function () {
noBack();
}
function noBack() {
window.history.forward();
}
</script>
<body onpageshow="if (event.persisted) noBack();">
</body>
Hello,
You can do it like this,
Implement this code in master page
I have implemented this and it worked for me..

<script language="JavaScript">
this.history.forward(-1);

Redirect to Logout.aspx page on clicking "logout"
Add a new page as Logout.aspx with following body content.
Please wait. You are Logging out.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
add javascript as below
function noBack() {
window.history.forward()
}
noBack();
window.onload = noBack;
window.onpageshow = function (evt) { if (evt.persisted) noBack(); }
window.onunload = function () { void (0); }
Logout.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Response.Redirect("Login.aspx"));
}
Source : http://geekswithblogs.net/Frez/archive/2010/05/18/back-button-issue-after-logout-in-asp.net.aspx

When user clicks logout button, you should write single line to clear the session.
Session.Abondon();
and navigate to logout page or login page. So that once user clicks logout button, he cannot go back becaause his session was cleared.

To disable the back button of the browser write the below code at master page header part as
<script language="JavaScript" type="text/javascript">
window.history.forward();
</script>

<script type="text/javascript">
function DisableBackButton() {
window.history.forward()
}
DisableBackButton();
window.onload = DisableBackButton;
window.onpageshow = function (evt) { if (evt.persisted) DisableBackButton() }
window.onunload = function () { void (0) }
</script>

Async postback not working

I'm using this gauge in my contentplaceholder.
http://www.dariancabot.com/projects/jgauge_wip/
MyControl.ascx:
<link rel="stylesheet" href="Scripts/jgauge.css" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.8.0.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jgauge-0.3.0.a3.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jQueryRotate.2.2.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/excanvas.min.js"></script>
<div id="<%=this.ClientID%>_ctl" class="jgauge" ></div>
<script type="text/javascript">
$(document).ready(function () {
var isPostBack = <%= Page.IsPostBack ? "true" : "false" %>;
if(isPostBack == "true")
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
prm.add_endRequest(onEndRequest);
}
else{
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
}
});
function EndRequestHandler(sender, args){
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
}
</script>
In MyPage.aspx: (Contains dynamically created table having several such controls. putting the generated table on placeholder)
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:PlaceHolder id="phMain" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="myBtn" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="myBtn" runat="server" Text="Refresh" />
I have script manager on master page:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
But after async postback (hitting 'myBtn'), gauge disappears. Please Help. Trying to solve it since couple of days.

I was able to solve this with by going:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance()
.add_endRequest(<%=this.ClientID%>_ctlEndRequestHandler);
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
});
function <%=this.ClientID%>_ctlEndRequestHandler(sender, args){
var <%=this.ClientID%>_ctl;
<%=this.ClientID%>_ctl = new jGauge();
<%=this.ClientID%>_ctl.id = '<%=this.ClientID%>_ctl';
<%=this.ClientID%>_ctl.init();
}
The only real difference is that the postback checks are no longer taking place. Your underlying problem is that $(document).ready will not fire on partial postbacks, which means that isPostBack is never actually getting set to true. Because of this, Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); was never executing, meaning that your EndRequestHandler never ran.
Edit
The other issue is that naming the method EndRequestHandler is guaranteed to cause problems if you have more than one of the control at the same time. To get around this, I appended <%=this.ClientID%>_ctl to the name of EndRequestHandler to ensure it was unique.
More info:
How do I use a jQuery $(document).ready and an ASP.NET UpdatePanel together?
http://encosia.com/document-ready-and-pageload-are-not-the-same/

Apply Jquery DataTables plugin to ASP GridView

I've used this plugin before in PHP so I thought I'll use it again for my ASP project.
For some reason it doesn't work with my GridView control.
javascript block:
<link type="text/css" href="../scripts/demo_table.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" language="javascript" src="../scripts/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(".gvv").dataTable();
});
</script>
Gridview code:
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False"
DataKeyNames="Prop_No" DataSourceID="testtt" CssClass="gvv">
Am I doing something wrong or DataTables can't be used for ASP controls?

The problem is that GridView control doesn't add <thead> element but just put the header row into <body> section of generated table whereas the Data Table plugin requires a <thead> section in a table. Try to use following script:
$(function () {
$(".gvv").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).dataTable();
});
P.S. also you can use controls those don't rendering with default layout like Repeater or ListView

You can add thead, tbody and tfoot tags using GridView Prerender event try this code
protected void GridView1_PreRender(object sender, EventArgs e) {
// You only need the following 2 lines of code if you are not
// using an ObjectDataSource of SqlDataSource
GridView1.DataSource = Sample.GetData();
GridView1.DataBind();
if (GridView1.Rows.Count > 0) {
//This replaces <td> with <th> and adds the scope attribute
GridView1.UseAccessibleHeader = true;
//This will add the <thead> and <tbody> elements
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
//This adds the <tfoot> element.
//Remove if you don't have a footer row
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
Don't forget to add the event handler on source page as below
<asp:GridView ID="GridView1" runat="server" CssClass="gvv"
OnPreRender="GridView1_PreRender">
</asp:GridView>
Now you can simply call JQuery function as usual to render it
$(document).ready(function () {
$(".gvv").dataTable();
});

Please try below code.