Show a div in asp.net on condition - asp.net

Is it Possible to show/notshow a div in asp.net depending if cookies are set or not?
Note: the div is an html form invoked with javascript in asp.net.
Here the code in asp.net
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<script type="text/javascript">
$(document).ready(function () { $('#'<%= webform.ClientID %>).load('popup.html');
</script><div id="webform" runat="Server">
</div>
</asp:Content>
And in code behind:
protected void Page_Load(object sender, EventArgs e)
{ webform.Visible= true;}
Note that the webform is visible when the code is: (nothing is code behind)
<script type="text/javascript">
$(document).ready(function () { $('#webform').load('popup.html'); })
</script>
<div id="webform" >
</div>
</asp:Content>
The goal is to make this visible or not depending if cookie has been set or not.
I already tested that the form (in HTML) is setting the cookies(with javascript through webform)

Here's the logic for you to try
Make your DIV a server control by adding runat="server" property
Also have an ID property for your DIV tag
set this DIV's visibility from your code behind based on the Cookie values
E.g.
Markup code
<div id="MyDiv" runat="server"></div>
Code behind
MyDiv.Visible = true; // set this based on the cookie value
UPDATE 1
This is how you'd use your DIV in Scripts
<script type="text/javascript">
$(document).ready(function () { $('#'<%= MyDiv.ClientID %>).load('popup.html'); })
</script>
UPDATE 2
I made a mistake in my UPDATE 1. You should write the JQuery selector like '#<%= MyDiv.ClientID %>' and not like '#'<%= MyDiv.ClientID %> (Note the ' marks).
And, you also made a mistake in your script. You've missed a }) at the end of the script.
Anyway, here's the working solution. (I tried it so don't tell it's not working :-))
<script type="text/javascript">
$(document).ready(function () { $('#<%= webform.ClientID %>').load('popup.html');} )
</script>
<div id="webform" runat="Server"></div>
Hope you could understand this.

Related

Display SqlDataSource data in HTML table (DataTables Plugin)

I want to display SQL Server data in a table <td> so I can use the plugin at https://datatables.net/ I am able to bind the data to things such as
<asp:PlaceHolder ID = "PlaceHolder1" runat="server" />
such as in this tutorial: https://www.aspsnippets.com/Articles/Display-data-from-database-in-HTML-table-in-ASPNet.aspx
However, the plugin needs a class and id from a table, and therefore doesn't work. I tried inserting class and id that the plugin needs like this but did not work
// Table start.
html.Append("<table border = '1'>");
html.Append("<table class = "display" id = "example">");
Is there a way of inserting a class and id to the table through html.append?
Thanks
If you have a GridView, you need to use the ClientID. Place the below GridView and JavaScript on the same aspx page.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<asp:GridView ID="GridView1" runat="server"
OnRowDataBound="GridView1_RowDataBound">
</asp:GridView>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= GridView1.ClientID %>').DataTable();
});
</script>
However, for a GridView to work with DataTables, you need to add a OnRowDataBound event. Then in code behind add the following code.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.TableSection = TableRowSection.TableHeader;
}
}
This add the <thead> and <tbody> tags to the generated html, which is needed by datatables.net.
I found this that also explained that i needed <thread> tags which i was missing.
Apply Jquery DataTables plugin to ASP GridView

Asp.net auto response to client

I have this table on my sql server database:
name
family
address
and i have a 2 user's:
User A
User B
i want to when User B insert new record into the table,show in User A gridView.
i use this solution:
User A web browser has a this code:
<script type="text/javascript">
$(document).ready(function () {
setTimeout("RefreshPage()", 5000);
});
function RefreshPage() {
/* var url = "GetOrder.aspx";
$(location).attr("href", url);
*/
location.reload();
};
</script><br/>
that code refresh User A webpage every 5 second and in page load event i write a simple code to run select query and show in gridview.
this method very crazy solution to do this.
can i use other solution and how?
Your code Refresh whole page. Use below code, it will refresh only contain. :)
<asp:ScriptManager ID="scp1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:GridView ID="yourGrid" runat="server"></asp:GridView>
<asp:Button id="btnAutoRefresh" runat="server" style="display:none"
onclick="btnAutoRefresh_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
setInterval("RefreshPage()", 5000);
});
function RefreshPage() {
$("#<%=btnAutoRefresh.ClientID %>").trigger("click");
};
</script>
// code behind
protected void btnAutoRefresh_Click(object sender, EventArgs e)
{
// code for Bind Grid
}
You need to use client notification technique, for example SignalR. You can read more about it here

ASP.NET Gridview with JQuery Mobile Dialog

I've been struggling trying to link an ASP.NET Gridview to a JQuery Mobile dialog, which would be used to edit data in the Gridview.
My goal was to use the GridView to display the data. The user would click on a row, and a dialog would open a dialog with a FormView, which the user could edit the data for the selected row. I got this to work fine with a JQuery UI dialog, but when I switched to Jquery Mobile, things fell apart.
Right now the dialog flashes on the screen for a second if I run it on an iOS device, or a Blackberry. It works okay if I run it in Windows. I'm not sure what I'm doing wrong.
Here is my code for the aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="MyTest.aspx.cs" Inherits="MySite.MyTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<style type="text/css">
.hover
{
background-color: Gray;
}
</style>
<script type="text/javascript">
function clickRow() {
//Had to put in $(document).ready or I got PostBack errors.
$(document).ready(function () {
$.mobile.changePage("#dialogPage", 'pop', true, true);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div data-role="page" id="mainpage">
<div data-role="content">
...GridView goes here...
Click Me
</div>
</div>
<div data-role="dialog" id="dialogPage">
<div data-role="content">
... FormView goes here....
</div>
</form>
</body>
</html>
And here is some of the code behind:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//Allows user to click/tap anywhere on gridview row to trigger SelectIndexChange
e.Row.Attributes["onmouseover"] = "this.oldClass = this.className;this.className='hover';";
e.Row.Attributes["onmouseout"] = "this.className=this.oldClass;";
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex.ToString());
}
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
//This should open dialog
ClientScript.RegisterStartupScript(typeof(Page), "test", "clickRow()",true);
}
I think the problem is with the way I wrapped the $.mobile.changePage() function in the $(document).ready() function. If I didn't do that, I got postback errors. I'm not sure the right way to do this.
If I try to open the dialog using a <a data-rel="dialog"></a> link, it works fine on all devices.
Thanks for any advice.
I remember encountering a similar situation. The thing to remember is that when dealing with jQuery mobile, the script tags located within the head are not loaded on subsequent pages. Try moving your script block to within the tag that serves as the page.

User Controls and JavaScript and Master Pages

Consider the following situation:
There is a master page with a contentPlaceHolder for all javascript...
for speed issuses this section is at the bottom of the page.
my user control generates some javascript that make use of some references in the master page javascript (Jquery library)
so, if my user control is rendered before the master page javascript, it won't work.
and this is my question:
how do I make some javascript code block inside my .ascx file to be rendered to the asp:Content JavaScript in the .aspx page
or maybe my all thinking is worng?
Thanks!
See if this works for you:
Where in the "bottom" of the Master Page? If you move it inside the closing server-side form control and use ClientScript.RegisterStartupScript in your user control, it will inject that script of your control "before the closing <form/> tag" (which will be after your your static script call).
Master Page - right above the closing server-side ASP.Net </form>:
....
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "></script>
</form>
Content Page (nothing special):
<%# Register src= ....
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<uc1:jscript_inject ID="jscript_inject1" runat="server" />
</asp:Content>
User Control:
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "foo", #"alert('foo');", true);
}
This is how its rendered (HTML view source in browser):
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "></script>
<script type="text/javascript">
//<![CDATA[
alert('foo');//]]>
</script>
....
</form>
As advertised, alert('foo'); is below the "pre-defined" jq cdn call....
Cheers useful.
Interestingly this works for Page.ClientScript.RegisterStartupScript but not Page.ClientScript.RegisterClientScriptInclude, and instead the 'include' gets added to the top of the form.

jquery ui datepicker inside asp.net UpdatePanel

I have a web page, where I'm using a jQuery UI datepicker on an asp.net textbox, which is located inside an UpdatePanel. Here is a description of what I do roughly
<script type="text/javascript">
$(document).ready( function() { $(".datepicker").datepicker(); } );
</script>
<asp:UpdatePanel ... >
...
<asp:TextBox runat="server" CssClass="datepicker" />
<asp:Button runat="server" />
...
</asp:UpdatePanel>
When I first load the page, everything works fine. When clicking inside the textbox, the datepicker pops up. But when I click the button, and an async postback is executed, the datepicker no longer pops up, when I click the field again.
I know that the problem is because the UpdatePanel completely replaces all the contained HTML when it is updated, so in effect, it is a new text field, which has not been initialized with the datepicker functionality.
I guess that I should not use $(document).ready() here to initialize my datepickers, but where is a good place to place the initialization code? Or is there a way that I can retrigger the initialization code after an AJAX update?
add the script behind , that's what I do.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {
$(".datepicker").datepicker();
});
</script>
Add this script at the end of your page.
Replace the initialize() function with whatever code you want to run every time there is a partial postback from an updatepanel.
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
initialize();
}
}
</script>
Replaces the class name '.datepicker' by the name of the object within the page.
Example:
<script type="text/javascript">
$(document).ready( function() { $("#<%=DateTextBox.ClientID %>").datepicker(); } );
</script>
<asp:UpdatePanel ... >
...
<asp:TextBox runat="server" ID="DateTextBox"/>
<asp:Button runat="server" />
...
</asp:UpdatePanel>}
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler() { $(".datepicker").unbind().mask("99/99/9999").datepicker() };
$.getScript("../Scripts/jquery.maskedinput.min.js", function () {
$(".datepicker").mask("99/99/9999");
});
$.getScript("../Scripts/jquery-ui-1.11.3.min.js", function () {
$(".datepicker").datepicker()
});
});

Resources