Develop Reference

ASP.Net WebForms not firing UI events from codebehind file

I have simple UI in aspx file, with aspx.cs codebehind. No matter what kind of control I use, events from this file wont fire - the only ones that are working are events like Init, PageLoad.
Events are created via designer.
What I tried:
Basic OnClick on markup page
OnClick in designer
Inline c# Code in markup page via javascript
PageMethods
Pure javascript click
Whole new page
When I add for example alert for click event in javascript, it works. But Im not able to run my c# code after user clicks on button.
I have also removed everything from file (validation, other controls...), but not even then my code works.
There are also no errors in console
Markup Page
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Views/Shared/Site.Master" EnableEventValidation="false" CodeBehind="Report.aspx.cs" Async="true" Inherits="App.Web.Views.Besparingen.Report" %>
<%# Register Assembly="Microsoft.ReportViewer.WebForms" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<asp:Content runat="server" ContentPlaceHolderID="Content" ID="Content1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id*=selectYear]').multiselect({
includeSelectAllOption: true
});
});
</script>
<script type="text/javascript">
$(function () {
$('[id*=selectPortfolio]').multiselect({
includeSelectAllOption: true
});
});
</script>
<script type="text/javascript">
$(function () {
$('[id*=selectSector]').multiselect({
includeSelectAllOption: true
});
});
</script>
<form runat="server" id="form">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" ScriptMode="Release" ClientIDMode="Static" ViewStateMode="Enabled">
</asp:ScriptManager>
<div style="margin: 10px;">
<asp:Label Style="margin-right: 40px;" ID="YearLabel" Text="Year:" runat="server" AssociatedControlID="selectYear"></asp:Label>
<asp:ListBox ID="selectYear" runat="server" DataValueField="Value" DataTextField="Text" SelectionMode="Multiple" CausesValidation="false"></asp:ListBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ForeColor="Red"
ControlToValidate="selectYear"
ValidationGroup="yearGroup"
ErrorMessage="Select year."
runat="server">
</asp:RequiredFieldValidator>
</div>
<div style="margin: 10px;">
<asp:Label Style="margin-right: 12px;" ID="PortfolioLabel" Text="Portfolio:" runat="server" AssociatedControlID="selectPortfolio"></asp:Label>
<asp:ListBox ID="selectPortfolio" runat="server" DataValueField="Value" DataTextField="Text" CausesValidation="false"></asp:ListBox>
</div>
<div style="margin: 10px;">
<asp:Label Style="margin-right: 25px;" ID="SectorLabel" Text="Sector:" runat="server" AssociatedControlID="selectSector"></asp:Label>
<asp:ListBox ID="selectSector" runat="server" DataValueField="Value" DataTextField="Text" CausesValidation="false"></asp:ListBox>
</div>
<div>
<asp:Button ID="reportButton" runat="server" OnClick="reportButton_Click" ClientIDMode="Static" Text="Create report" CausesValidation="true" ValidationGroup="yearGroup" />
</div>
<div style="margin-top: 40px;">
<rsweb:ReportViewer runat="server" ID="reporter" Width="100%" ClientIDMode="AutoID" ProcessingMode="Local" BackColor="White" BorderStyle="None" ToolBarItemBorderStyle="None" InternalBorderStyle="None" BorderColor="White" InternalBorderColor="White" ToolBarItemBorderColor="White" AsyncRendering="false"></rsweb:ReportViewer>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
//$("#reportButton").click(function () {
// event.preventDefault();
// alert("Handler for .click() called.");
//});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Title" runat="server">
Besparingen
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ValidationSummary" runat="server">
</asp:Content>
Code Behind file
public partial class Report : System.Web.Mvc.ViewPage<model>
{
List<string> years = new List<string>();
string sector;
string portfolio;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
selectPortfolio.DataSource = Model.List[0].Portfolios;
selectPortfolio.DataBind();
selectYear.DataSource = Model.List[0].Years;
selectYear.DataBind();
selectSector.DataSource = Model.List[0].Sectors;
selectSector.DataBind();
}
}
protected void reportButton_Click(object sender, EventArgs e)
{
foreach (ListItem item in selectYear.Items)
{
if (item.Selected)
{
years.Add(item.Text);
}
}
sector = selectSector.SelectedItem?.Text ?? string.Empty;
portfolio = selectPortfolio.SelectedItem?.Text ?? string.Empty;
if (years.Count > 0)
{
BesparingenDS.DataTable1DataTable table = new BesparingenDS.DataTable1DataTable();
DataTable1TableAdapter adapter = new DataTable1TableAdapter();
adapter.Fill(table, sector, portfolio, string.Join(",", years));
ReportDataSource datasource = new ReportDataSource("DataSource", (DataTable)table);
System.Security.PermissionSet sec = new System.Security.PermissionSet(System.Security.Permissions.PermissionState.Unrestricted);
reporter.LocalReport.SetBasePermissionsForSandboxAppDomain(sec);
reporter.LocalReport.ReportPath = "Views\\Besparingen\\BesparingenReport.rdlc";
reporter.LocalReport.DataSources.Clear();
reporter.LocalReport.DataSources.Add(datasource);
reporter.LocalReport.Refresh();
reporter.DataBind();
}
}
}
Thank you for help and sorry for my bad english

How to call an asp control using getElementById() in a javascript function that is included in ScriptManager.RegisterStartupScript

I'm required to use ScriptManager.RegisterStartupScript to run a javascript function while using asp.net's update panel.
My goal is to run my javascript function named Top10 with json parameter called jsonTable, in this function everything is working well aside from var hfield = document.getElementById("<%=hf.ClientID%>"); which is supposedly get the asp.net's hiddenfield control but it keeps returning null.
I reduced the code so that I can get to the point.
c#:
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
dtCurrentTop1O = dsCurrentTop10Winners.Tables["Top 10 Winners"];
string strCurrentTop1O = serializer(dtCurrentTop1O);
ScriptManager.RegisterStartupScript(this.updatePanel1, GetType(), "Javascript",
"javascript:Top10(" + strCurrentTop1O + ");", true);
}
}
Markup:
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="head">
<title></title>
<script src="Scripts/Top10.js" type="text/javascript"></script>
</asp:Content>
<asp: Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<asp: ScriptManager ID="scriptManager1" runat="server"></asp: ScriptManager>
<asp: UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp: Panel ID="Panel1" runat="server">
<asp: HiddenField ID="hf" runat="server" />
</asp: Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
javascript: Top10.js
function Top10(jsonTable) {
var chartImg;
var hfield = document.getElementById("<%=hf.ClientID%>");
};

According to your description, the function you're calling is located in the file 'Top10.js'. AFAIK, ASP.NET won't resolve definitions like "<%=hf.ClientID%>" outside of ASP.NET specific files - .js files are delivered to the webclient 'as is' (static content) and not rendered server-side like .aspx files. You'll be able to confirm this when looking at the delivered source in your browsers dev-tools.
You could either place the javascript code directly inside your markup so that the ClientId will be resolved, add an additional hiddenFieldId-parameter to the TopFiveOutsagesCurrentLC function or directly set the HiddenFields content in your Page_Load method.
Example for direct js code in Markup:
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="head">
<title></title>
<script type="text/javascript">
function TopFiveOutagesCurrentLC(jsonTable) {
var chartImg;
var hfield = document.getElementById("<%=hf.ClientID%>");
};
</script>
</asp:Content>
<asp: Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<asp: ScriptManager ID="scriptManager1" runat="server"></asp: ScriptManager>
<asp: UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp: Panel ID="Panel1" runat="server">
<asp: HiddenField ID="hf" runat="server" />
</asp: Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

I've answered my question by finding the hiddenfield control and then added it to parameters for the javascript function.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
HiddenField hf = (HiddenField)this.updatePanel1.FindControl("hf");
dtCurrentTop1O = dsCurrentTop10Winners.Tables["Top 10 Winners"];
string strCurrentTop1O = serializer(dtCurrentTop1O);
ScriptManager.RegisterStartupScript(this.updatePanel1, GetType(),
"Javascript",
"javascript:Top10(" + strCurrentTop1O + ","+hf.ClientID+");", true);
}
}

Data set from javascript getting cleared after postback

The values set from javascript is getting cleared after postback, I'm setting value to gridview process column from setdata button client click but when the button in start column is clicke the value set previously is cleared. Please see the code below and suggest a solution.
<%# 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>
<script type="text/javascript">
function SetData(name, name2) {
document.getElementById(name).innerHTML = 'data.d.Name';
document.getElementById(name2).innerHTML = 'data.d.Name2';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:GridView ID="gvMonitoring" runat="server" Width="100%" AllowPaging="false" PageSize="10"
AutoGenerateColumns="false" DataKeyNames="Id"
EnableViewState="true" OnRowDataBound="gvMonitoring_OnRowDataBound">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name 2">
<ItemTemplate>
<asp:Label ID="lblName2" runat="server" EnableViewState="True" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Set Data">
<ItemTemplate>
<asp:Button ID="btnSetData" runat="server" Text="Set Data" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Start">
<ItemTemplate>
<asp:Button ID="btnStartTime" runat="server" Text="Postback" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
public partial class ProcessDetail
{
public long Id { get; set; }
public string Name { get; set; }
}
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var details = new List<ProcessDetail>();
for (var i = 1; i <= 5; i++)
{
details.Add(new ProcessDetail() { Name = "Process " + i});
}
gvMonitoring.DataSource = details;
gvMonitoring.DataBind();
}
}
protected void gvMonitoring_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var lblName = ((Label)e.Row.FindControl("lblName"));
var lblName2 = ((Label)e.Row.FindControl("lblName2"));
((Button)e.Row.FindControl("btnSetData")).Attributes.Add("onclick", string.Format("SetData('{0}','{1}');return false;", lblName.ClientID, lblName2.ClientID));
}
}
}

To clarify #Imad, a postback is a complete page reload. Thus if you have any javascript it will also be reloaded. Which will clear out any values you stored. If you have to mix javascript with web forms there are two ways that I would recommend.
1) Your javascript will need to use ajax calls and update controls. Only using postback on a complete save. Meaning if you have a form and it takes Someones name/address. I would validate the data through ajax. And then, when it is all correct I would trigger a postback for save.
2) Create some Hidden Fields, that would hold the important var's that you need to save, and access those through server tags <%= =>. This way is pretty terrible but it can be done.

Trigger postback on value change in GridView

I'm using dyndatetime as in this link DyntimeSample
This is used in a gridview, Whenever the user selects a new date or time I want to trigger a postback using update panel.I have tried tracking the value assigned textbox change event but it was not working.Please suggest a solution.
In the below code I want to trigger textbox on change event.
EDIT: Added code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"> </script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<script type = "text/javascript">
$(document).ready(function () {
$(".Calender").dynDateTime({
showsTime: true,
ifFormat: "%Y/%m/%d %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: false,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Person" />
<asp:TemplateField HeaderText="Date Of Birth">
<ItemTemplate>
<asp:TextBox ID="txtDOB" style="border: 0px solid #505050;" AutoPostBack="True" OnTextChanged="txtDOB_OnTextChanged" runat="server" ReadOnly="true" class = "Calender" />
<img src="calender.png" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
</div>
</form>
</body>
Code behind
using System;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindGridWithDummyData();
}
}
private void BindGridWithDummyData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("DateOfBirth");
dt.Rows.Add();
dt.Rows[0]["Name"] = "John";
dt.Rows.Add();
dt.Rows[1]["Name"] = "Sam";
dt.Rows.Add();
dt.Rows[2]["Name"] = "Tommy";
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void btnSave_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
DateTime dob = DateTime.Parse(Request.Form[row.FindControl("txtDOB").UniqueID]);
//Save the date to Database here
}
}
protected void txtDOB_OnTextChanged(object sender, EventArgs e)
{
}
}

Note: If you set updateMode to conditional in the update panel, in that case you need to add Triggers. In the code behind file under TextBox1_TextChanged event, you can get the latest value using sender.text property.
Try using the following:
<asp:ScriptManager ID="scrManager" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:GridView ID="grdNumber" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtNumber" runat="server" OnTextChanged="TextBox1_TextChanged" AutoPostBack="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ddlNumber" runat="server" OnSelectedIndexChanged="ddlNumber_SelectedIndexChanged"
AutoPostBack="true">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>For</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
In the code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Rows.Add();
dt.Rows.Add();
dt.Rows.Add();
dt.Rows.Add();
grdNumber.DataSource = dt;
grdNumber.DataBind();
}
}
protected void ddlNumber_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
var value = (sender as TextBox).Text;
}
For more, check this link: http://www.aspsnippets.com/Articles/Assign-PostBack-Trigger-Full-PostBack-for-LinkButton-inside-GridView-within-AJAX-UpdatePanel-in-ASPNet.aspx

having issue with updating label asynchronously

I am trying a simple ajax form where it will update a label on button click.
I get the below error:
Microsoft JScript runtime error:
Sys.WebForms.PageRequestManagerParserErrorException: The message
received from the server could not be parsed.
at below function on line : "throw error;"
function Sys$WebForms$PageRequestManager$_endPostBack(error, executor, data) {
if (this._request === executor.get_webRequest()) {
this._processingRequest = false;
this._additionalInput = null;
this._request = null;
}
var handler = this._get_eventHandlerList().getHandler("endRequest");
var errorHandled = false;
if (handler) {
var eventArgs = new Sys.WebForms.EndRequestEventArgs(error, data ? data.dataItems : {}, executor);
handler(this, eventArgs);
errorHandled = eventArgs.get_errorHandled();
}
if (error && !errorHandled) {
***throw error;***
}
}
Here is my form code:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Hello";
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Test Form
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="form1" runat="server">
<div style="text-align: left; height: 395px;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" style="margin-left: 66px" Text="Button" Width="176px" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</asp:Content>
Am I missing something?

I inserted the code above into empty aspx page, removed reference to masterpage and asp:Content and it worked for me. The label changed its text.
If it still doesn't work for you you may use Firefox+Firebug to see the actual server response after clicking on a button. It may contain detailed exception that will give you a hint.