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

Unable to call JavaScript Function From CodeBehind

I have gridView were if the user clicks on a button I want to give its informations to popup.
Here is the javascript to open and close the popup
<script type="text/javascript">
function ShowModalPopup() {
$find("mpe").show();
return false;
}
function HideModalPopup() {
$find("mpe").hide();
return false;
}
Here is were my button is
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ImageUrl="~/Images/shopping.png" runat="server" ToolTip="Shopping" Width="20px" Height="20px" OnClick="makePurchaseOrder" />
</ItemTemplate>
</asp:TemplateField>
here is what happens when I call the button
protected void makePurchaseOrder(object sender, EventArgs e)
{
ImageButton btn = (ImageButton)sender;
GridViewRow gvr = (GridViewRow)btn.NamingContainer;
int rowindex = gvr.RowIndex;
var idrow = (Control)sender;
GridViewRow row = (GridViewRow)idrow.NamingContainer;
componenteID = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[0]);
proveedor_id = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[2]);
Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup();", false);
}
This is what my modual popup looks like
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" style="display: none">
<div >
<div class="modal-content">
<asp:Button ID="btnHide" runat="server" OnClientClick="return HideModalPopup()" />
<a class="close" href="#" >×</a>
<h2>Here i am</h2>
<div class="content">
<asp:Label ID="Label17" runat="server" Text="Comprar" CssClass="second-menu-title"></asp:Label>
<br/>
<b><asp:Label ID="Label18" runat="server" Text="Proveedor: "></asp:Label></b>
<asp:Label ID="Label19" runat="server" Text=""></asp:Label>
<br/>
<b><asp:Label ID="Label20" runat="server" Text="Tipo: "></asp:Label></b>
<asp:Label ID="Label21" runat="server" Text=""></asp:Label>
<asp:Label ID="Label22" runat="server" Text=""></asp:Label>
<br/>
<b><asp:Label ID="Label23" runat="server" Text="Cantidad pedida: "></asp:Label></b>
<asp:TextBox width="50px" ID="TextBox2" runat="server" TextMode="Number" min="0" step="1" Value="0"></asp:TextBox>
<br/>
</div>
</div>
</div>
</asp:Panel>
The probelm is the modual popup does not appear on the button click. I am unsure why. Any help would be verry appreciated.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function ShowModalPopup() {
$('#<%= pnlPopup.ClientID %>').toggle();
}
function HideModalPopup() {
$('#<%= pnlPopup.ClientID %>').toggle();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClick="Unnamed_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Panel ID="pnlPopup" runat="server" style="display:none;">
<asp:ImageButton ID="btnTest" ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClientClick="HideModalPopup(); return false;" />
<p>Content Goes here</p>
</asp:Panel>
</div>
</form>
</body>
</html>
public partial class _testPWforSO : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
int rowcount = 0;
Collection<Product> products = InternalProduct.FindAll(0, 10, ref rowcount);
gvTest.DataSource = products;
gvTest.DataBind();
}
}
protected void Unnamed_Click(object sender, ImageClickEventArgs e)
{
// code to find out which one was clicked
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup()", 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.

How to clear textbox using jquery(with ConfirmButtonExtender)?

I have mentioned my code below, the problem is I am unable to clear textbox. Kindly see my javascript code for textbox clearing and piont out the error?
<script type="text/javascript">
function CancelClick() {
document.getElementById("<%=txtname.ClientID %>").innerHTML =txtname.Text='';
}
</script>
<asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel2" runat="server">
</asp:UpdatePanel>
<asp:Button ID="btnConfirm" runat="server" Text="Confirm" onclick="btnConfirm_Click" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID ="btnConfirm"
ConfirmText ="Are you sure you want to click this?" OnClientCancel ="CancelClick"
ConfirmOnFormSubmit="false" runat="server">
</asp:ConfirmButtonExtender>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>

With jQuery (as you asked for)
<script type="text/javascript">
function CancelClick() {
$("#<%=txtname.ClientID %>").val("");
}
</script>

You need to set the value not the innerHtml:
document.getElementById("<%=txtname.ClientID %>").value = '';

<script type="text/javascript">
function CancelClick() {
var textBoxId = '<%= #txtname.ClientID %>';
$(textBoxId).val('');
}
</script>

AJAX UpdatePanel.Visible Property not working with Javascript

I have code below. I want to hide the update panel by using Javascript (without going to server) when the user clicks Hide button. Although javascript funciton seems to be working fine in debugging, it does not hide!
<script type="text/javascript" language="javascript">
function Show() {
document.getElementById("UpdatePanel1").Visible = true;
}
function Hide() {
document.getElementById("UpdatePanel1").Visible = false;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show" OnClientClick="Show(); return false;" />
<asp:Button ID="BtnHide" runat="server" Text="Hide" OnClientClick="Hide(); return false;" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Gönder"
onclick="btnSubmit_Click" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

you need to use the UpdatePanel1's client id so
document.getElementById('<%=UpdatePanel1.ClientID%>');