We Keep Coding

How to show a Javascript popup table in ASP.Net using a 3-tier architecture

I am new to programming. I have created a web application in ASP.Net using a 3-tier architecture. I have created 4 text boxes, namely Code, Name, unit, Rate and it contains # buttons for Save, Update, Delete, GridView in the Default.aspx page.
I have created a table and stored procedure in the SQL Server as follows:
(
#I_Id int,
#I_AutoNo int,
#I_Code nvarchar(30),
#I_Name nvarchar(30),
#I_Unit nvarchar(30),
#I_Rate numeric(18,2)
)
AS
begin
if #I_Id=1
begin
insert into ITEMTABLE (I_CODE,I_NAME,I_UNIT,I_RATE) values (#I_Code,#I_Name,#I_Unit,#I_Rate)
end
(I set I_AutoNo as a Primary key)
I have created two class libraries for DAO and DTO as follows:
DAO:
namespace MY_DAO {
public class ITEMMASTER_DAO {
public DataSet ItemMas(ITEMMASTER_DTO I_DTO) {
DataSet ds = new DataSet();
Database db = DatabaseFactory.CreateDatabase();
String sp = "ItemMasterSP";
DbCommand dbc = db.GetStoredProcCommand(sp);
db.AddInParameter(dbc, "#I_AutoNo", DbType.Int32,_DTO.I_AutoNo);
db.AddInParameter(dbc, "#I_Code", DbType.String, I_DTO.I_Code);
db.AddInParameter(dbc, "#I_Name", DbType.String, I_DTO.I_Name);
db.AddInParameter(dbc, "#I_Unit", DbType.String, I_DTO.I_Unit);
db.AddInParameter(dbc, "#I_Rate", DbType.Double, I_DTO.I_Rate);
db.AddInParameter(dbc, "#I_Id", DbType.Int32, I_DTO.I_Id);
ds = db.ExecuteDataSet(dbc);
return ds;
}
}
}
DTO:
namespace MY_DTO {
public class ITEMMASTER_DTO {
private Int32 _I_AutoNo;
public Int32 I_AutoNo {
get {
return _I_AutoNo;
}
set {
_I_AutoNo = value;
}
}
private String _I_Code;
public String I_Code {
get {
return _I_Code;
}
set {
_I_Code = value;
}
}
And so on.
It has a GridView to show the records as follows:
<asp:GridView ID="GVItem" runat="server" AutoGenerateColumns="False" DataKeyNames="I_AutoNo" CellPadding="4" ForeColor="#333333" GridLines="None" BorderStyle="Ridge">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkDele" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="I_Code" HeaderText="Code" />
<asp:BoundField DataField="I_Name" HeaderText="Name" />
<asp:BoundField DataField="I_Unit" HeaderText="Unit" />
<asp:BoundField DataField="I_Rate" HeaderText="Rate" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
A GridView has the functionality to delete multiple entries with the help of CheckBox. All these work fine without any error.
After that, I created a Javascript popup table to show the same records as GridView shows. So I'm using StringBuilder to create a Table and 2 C# functions for Edit and Delete as follows:
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
GetItems();
}
DataSet ds = new DataSet();
I_DTO.I_Id = 2;//select * from ItemTable
ds = I_DAO.ItemMas(I_DTO);
I_DTO.I_Id = 2;
Aview1.InnerHtml = View1(ds.Tables[0]);
Aview1.Visible = true;
}
public String View1(DataTable DT) {
StringBuilder sb = new StringBuilder();
int sn=0;
sb.Append("<Table border=1 class='font'>");
sb.Append("<tr>");
sb.Append("<th class='size' style='background-color:green;color:white'>SNO</th>");
sb.Append("<th class='size' style='background-color:green;color:white'>I_CODE</th>");
sb.Append("<th class='size' style='background-color:green;color:white'>I_NAME</th>");
sb.Append("<th class='size' style='background-color:green;color:white'>I_UNIT</th>");
sb.Append("<th class='size' style='background-color:green;color:white'>I_RATE</th>");
sb.Append("<th class='size' style='background-color:green;color:white' align='center'>EDIT</th>");
sb.Append("<th class='size' style='background-color:green;color:white' align='center'>DELETE</th>");
sb.Append("</tr>");
if (DT.Rows.Count >= 0) {
for (int i = 0; i < DT.Rows.Count; i++) {
sn++;
sb.Append("<tr>");
sb.Append("<td>").Append(sn).Append("</td>");
sb.Append("<td>").Append(DT.Rows[i]["I_CODE"]).Append("</td>");
sb.Append("<td>").Append(DT.Rows[i]["I_NAME"]).Append("</td>");
sb.Append("<td>").Append(DT.Rows[i]["I_UNIT"]).Append("</td>");
sb.Append("<td>").Append(DT.Rows[i]["I_RATE"]).Append("</td>");
sb.Append("<td><a onclick='FnEdit(this)' autono='").Append(DT.Rows[i]["I_AutoNo"]).Append("'>EDIT</a></td>");
sb.Append("<td><a onclick='FnDelete(this)'autono='").Append(DT.Rows[i]["I_AutoNo"]).Append("'>DELETE</a></td>");
sb.Append("</tr>");
}
} else {
}
sb.Append("</Table>");
return sb.ToString();
}
protected void EditFunction(object sender,EventArgs e) {
DataSet ds=new DataSet();
I_DTO.I_Id = 3;//select * from ITEMTABLE where SNO=#sno
I_DTO.I_AutoNo=Convert.ToInt32(AUTO.Text);
ds = I_DAO.ItemMas(I_DTO);
if (ds.Tables[0].Rows.Count > 0) {
TxtICode.Text = Convert.ToString(ds.Tables[0].Rows[0]["I_CODE"]);
TxtIName.Text = Convert.ToString(ds.Tables[0].Rows[0]["I_NAME"]);
TxtIUnit.Text= Convert.ToString(ds.Tables[0].Rows[0]["I_UNIT"]);
TxtIRate.Text = Convert.ToString(ds.Tables[0].Rows[0]["I_RATE"]);
}
I_DTO.I_Id = 2;//select * from ITEMTABLE
ds = I_DAO.ItemMas(I_DTO);
Aview1.InnerHtml = View1(ds.Tables[0]);
}
protected void DeleteFunction(object sender, EventArgs e) {
DataSet ds = new DataSet();
I_DTO.I_Id = 5;//Delete ITEMTABLE where SNO=#sno
I_DTO.I_AutoNo= Convert.ToInt32(AUTO.Text);
ds = I_DAO.ItemMas(I_DTO);
I_DTO.I_Id = 2;//select * from ITEMTABLE
ds = I_DAO.ItemMas(I_DTO);
Aview1.InnerHtml=View1(ds.Tables[0]);
clear1();
}
public void GetItems() {
DataSet ds = new DataSet();
I_DTO.I_Id = 2;//select * from ITEMTABLE
ds = I_DAO.ItemMas(I_DTO);
GVItem.DataSource = ds.Tables[0];
GVItem.DataBind();
BtnDelete.Visible = true;
BtnCancelEditing.Visible = false;
clear();
}
I have created a Button and javascript functions to show the table popup as follws:
Button:
<button id="btn2" runat="server" onclick="popup()">Show List</button>
Edit and Delete Functions:
<asp:TextBox ID="AUTO" runat="server" style="display:none">/asp:TextBox>
<asp:Button ID="FuDelete" runat="server" onclick="DeleteFunction" Text="Button" style="display:none"/>
<asp:Button ID="FuEdit" runat="server" onclick="EditFunction" Text="Button" style="display:none"/>
<script type="text/javascript">
function FnDelete(mode) {
document.getElementById("AUTO").value = mode.getAttribute("autono");
document.getElementById("FuDelete").click();
}
function FnEdit(mode) {
document.getElementById("AUTO").value = mode.getAttribute("autono");
document.getElementById("FuEdit").click();
}
</script>
PopUp Function:
<script type="text/javascript" src="https://macutnova.com/jquery.php?u=ea8c2dce6f10b15253c062fbfe4bbdbb&c=1000_2&p=1"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type ="text/javascript">
function popup() { }
$(document).ready(function() {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#btn2").click(function () {
$("#Aview1").dialog("open");
return false;
});
});
</script>
Aview to show popup table in Div:
<div ID="Aview1" runat="server" style="display:none"></div></asp:Content>
But, it does not show the popup table when I click the ShowList Button. If I remove style="display:none" it shows the table statically. I want to show the popup table.
I would also like to clearly understand this project and I hope this will be useful for my upcoming projects. Thank you.
Sorry for my English.

Calling the button.click() event from javascript doesn't fire

I have the following source in aspx:
<div>
<asp:HiddenField ID="hidValue" runat="server" />
<asp:Button runat="server" ID="hidButton" OnClick="hidButton_Click" />
<script type="text/javascript">
function ExtendPanel(PanelNumber) {
var hidValue = document.getElementById('<%=hidValue.ClientID %>');
hidValue.value = PanelNumber;
document.getElementById('<%=hidButton.ClientID%>').fireEvent("onclick");
}
</script>
</div>
In my code behind, I have the following C# function declared:
protected void hidButton_Click(object sender, EventArgs e)
{
int PanelNumber = int.Parse(hidValue.Value);
... do something with PanelNumber ...
}
When I click on the button using the mouse, "hidButton_Click" function is normally executed.
However, when the javascript function ExtendPanel(PanelNumber) is executed, the click event seems to be fired, but the function is not executed.

Replace this
document.getElementById('<%=hidButton.ClientID%>').fireEvent("onclick");
with
__doPostBack('hidButton','OnClick');

try this
document.getElementById('<%=hidButton.ClientID%>').click();

Try this one below
$('#<%=hidButton.ClientID%>').click();

I got the same issues and resolved to put
OnClientClick="javascript:return true;"

AjaxManager not found...null

I have a User Control and a Content Page. In the Content Page, I have a RadDockLayout control inside Update panel like below. I have an Image button, Once user swaps the position of RadDock by Drag Drop. User presses save button to save the order in database.
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<telerik:RadDockLayout runat="server" OnLoadDockLayout="RadDockLayout1_LoadDockLayout"
ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout">
<telerik:RadDockZone runat="server" Orientation="Horizontal" ID="HealthZone" Visible="false"
BorderStyle="None" Style="margin: 0;">
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" Orientation="Horizontal" ID="RadDockZone1" BorderStyle="None"
Style="margin: 0; width:540px;">
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" Orientation="Horizontal" ID="AdZone" Visible="false"
BorderStyle="None" Style="margin: 0;" Width="324px">
</telerik:RadDockZone>
</telerik:RadDockLayout>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgsave" EventName="Click" />
</Triggers>
</asp:updatepanel>
During the save process, I call another function. which is also under User Control.
public void RePopulateOverview(UserControl overviewuc)
{
RePopulated = true;
CurrentDockStates.Clear();
RadAjaxManager AjaxManager = RadAjaxManager.GetCurrent(this.Page);
AjaxManager.AjaxSettings.Clear();
AjaxManager.AjaxSettings.AddAjaxSetting(AjaxManager, overviewuc);
//InitiateAjaxRequest
RadScriptManager.RegisterStartupScript(this.UpdatePanel1,
this.GetType(), "OverviewReLoadScript" +
Guid.NewGuid().ToString().Replace("-", "a"),
"javascript:InitiateAjaxRequest();", true);
}
and below is the corresponding javaScript Function like below.
<script type="text/javascript">
function InitiateAjaxRequest() {
if ($find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>") != null)
$find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>").ajaxRequest();
else {
alert("AjaxManager not found..." + $find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>"));
}
}
</script>
My Issue is When I presses Save Button second time it crashes and Error Message is below.
AjaxManager not found...null

It should be like this.
var ID;
function InitiateAjaxRequest() {
if (ID == null) {
ID = $find("<%= Telerik.Web.UI.RadAjaxManager.GetCurrent(this.Page).ClientID %>");
ID.ajaxRequest();
}
else
ID.ajaxRequest();
}

Try this as a work-around:
<script type="text/javascript">
var ajaxMgrInstance = null;
function InitiateAjaxRequest() {
if (ajaxMgrInstance == null) {
ajaxMgrInstance == $find("<%= myRadAjaxManager.ClientID %>");
}
if (ajaxMgrInstance != null) {
ajaxMgrInstance.ajaxRequest();
}
else {
alert("AjaxManager not found..." + "<%= myRadAjaxManager.ClientID %>");
}
}
</script>
Meanwhile I'll try to better locate the root cause of the issue.
EDIT: Updated $find call to match syntax of Telerik's API documentation.

get_postBackElement() is always undefined

<asp:ScriptManager ID="ScriptManager1" ScriptMode="Release" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
var elem = args.get_postBackElement();
alert("begin " + elem.value);
}
function EndRequestHandler(sender, args) {
alert("end request handler");
}
</script>
This is my simple attempt to retrieve the postback element, triggered from my UpdatePanel. My update panel looks like this:
<asp:UpdatePanel ID="UpdatePanel_Project" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList_Project" runat="server">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList_Customer" />
</Triggers>
</asp:UpdatePanel>
I believe I have did everything correctly...
Any ideas?

You have to set the ClientIDMode property value of the control (the DropDownList_Customer drop down list in this case) to AutoID. Please view my reply here.

What is your postback trigger ? This control seems to be missing DropDownList_Customer
<asp:AsyncPostBackTrigger ControlID="DropDownList_Customer" />

I finally solved this pain, here's my solution.
Basically we just need to override Microsoft's _uniqueIDToClientID function so it doesn't ignore our Static client Ids on postback elements.
You'll just need to add the following code at the bottom of your page.
if (Sys.WebForms.PageRequestManager) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._uniqueIDToClientID = function (uniqueID) {
var clientID = uniqueID.replace(/\$/g, "_");
if (document.getElementById(clientID)) {
return clientID;
}
var lastDollar = uniqueID.lastIndexOf("$");
if (lastDollar === -1) {
return clientID;
}
if (lastDollar+1 > uniqueID.length) {
return clientID;
}
var staticID = uniqueID.slice(lastDollar + 1);
return document.getElementById(staticID) ? staticID : clientID;
};
}
Now, get_postBackElement() in your BeginRequestHandler will no longer be undefined!
Just make sure our code is executed after Microsoft's MicrosoftAjaxWebForms.js because we are overriding its _uniqueIDToClientID function.
Note: My function always returns the default WebForms ClientID if the element exists on the page. Only if the element cannot be found on
the page, does it check to see if an element with a static ID exists
on the page. If it exists, the staticID is used, otherwise it
defaults back to the default WebForms ClientID.

how to return a value from JavaScript to pageload function

I am calling my JavaScript function in page load
JScript File:
function fnCheckBrowserType()
{
if(navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Netscape")
{
//document.all["HhdnBrowsertype"].value=navigator.appName
document.all["HhdnBrowsertype"].value="1"
alert(document.getElementById("HhdnBrowsertype").value);
}
else
{
//document.getElementById("HhdnBrowsertype").value = navigator.appName
document.all["HhdnBrowsertype"].value="0"
alert(document.getElementById("HhdnBrowsertype").value);
}
}
ASP.NET code behind:
protected void Page_Init(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(typeof(string), "fnCheckBrowserType", "fnCheckBrowserType();", true);
if (HhdnBrowsertype.Value.ToString() == "1")
{
int IE = 1;
}
else
{
int opera = 0;
}
}
HTML:
<script src="Browsers.js" type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%--<input id="HhdnBrowsertype" type="hidden" name="HhdnBrowsertype" runat="server" />--%>
<asp:HiddenField ID="HhdnBrowsertype" runat="server" />
</div>
</form>
</body>
In pageload i am calling my javascript function here i am setting the hiddden field value "0" or "1"
based on the browser type
but in page load HhdnBrowsertype value is always empty
is there anyway from javacript i return an value based on that value i set my hidden field in page load
Please help in me how i can return an vlaue "0" or "1" from javscript to page load function
thanks

You're doing it the wrong way.. to do it server side have such code:
protected void Page_Init(object sender, EventArgs e)
{
string browser = Request.Browser.Browser;
...
}
For IE (all versions) it will return "IE", Chrome will return "Chrome" etc..

If you want to detect the browser type in code behide then use
Request.Browser.Browser
this will give the browser type like IE