We Keep Coding

ScriptManager not updating

Evening all I'm trying to create a page that will pull locations from a database and display it within a a gridview, this gridview then dictates some points that appear on a Google maps element. It works fine on start up but when I use the text box to refine the items in gridview the map disappears. I'm guessing it's an issue with my ScriptManager but I'm unsure exactly what the cause is. Any ideas would be greatly appreciated. Apologies for the wall of code I'm just a bit unsure what might be relevant at this stage.
<%# Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapTest.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function RefreshUpdatePanel() {
__doPostBack('<%= txtSearch.ClientID %>', '');
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA5U97yznzCvzDaUZjT3AydlQqyFBQVYc8&sensor=false">
</script>
<link href="App_Themes/Default/default.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="Wrapper">
<asp:ScriptManager ID="MasterScriptManger" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upanSearch" runat="server" UpdateMode="Conditional" OnPreRender="upanSearch_PreRender">
<ContentTemplate>
<div class="DataTable">
<span>Search</span>
<asp:TextBox ID="txtSearch" runat="server" onkeyup="RefreshUpdatePanel();" onfocus="this.value = this.value;" OnTextChanged="txtSearch_TextChanged" AutoPostBack="True" AutoCompleteType="Disabled"></asp:TextBox>
<asp:GridView ID="grdLocations" runat="server" AutoGenerateColumns="False" DataSourceID="sqldsLocations">
<AlternatingRowStyle BackColor="#F6F6F6" />
<Columns>
<asp:BoundField DataField="Location Name" HeaderText="Location Name" SortExpression="Location Name" />
<asp:BoundField DataField="Latitude" HeaderText="Latitude" SortExpression="Latitude" />
<asp:BoundField DataField="Longitude" HeaderText="Longitude" SortExpression="Longitude" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sqldsLocations" runat="server" ConnectionString="<%$ ConnectionStrings:MapTestGuestConn %>" SelectCommand="GetLocations(mySearch)" CancelSelectOnNullParameter="False" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="txtSearch" Name="mySearch" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
<div id="googleMap" style="width:500px;height:380px;"></div>
<script type="text/javascript">
initializeMap();
</script>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged"/>
</Triggers>
</asp:UpdatePanel>
</div>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Windows;
namespace MapTest
{
public partial class Default : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "Default";
}
protected void upanSearch_PreRender(object sender, EventArgs e)
{
//MessageBox.Show(BuildMapScript());
ScriptManager.RegisterClientScriptBlock(upanSearch, upanSearch.GetType(), "BuildMap", BuildMapScript(), false);
//ScriptManager.RegisterStartupScript(upanSearch, upanSearch.GetType(), "BuildMap", BuildMapScript(), false);
}
protected void txtSearch_TextChanged(object sender, EventArgs e)
{
txtSearch.Focus();
}
protected string BuildMapScript()
{
grdLocations.DataBind();
string markers = GetMarkers();
string myScript = #"
<script type='text/javascript'>
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(50.826108, -1.075011),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById('googleMap'),
mapOptions);"
+ markers +
#"}
</script>";
return myScript;
}
protected string GetMarkers()
{
string markers = "";
int c = 1;
foreach (GridViewRow grdRow in grdLocations.Rows)
{
markers +=
#"var marker" + c + #" = new google.maps.Marker({
position: new google.maps.LatLng(" + grdRow.Cells[1].Text.ToString() + ", " +
grdRow.Cells[2].Text.ToString() + ")," +
#"map: myMap,
title:'" + grdRow.Cells[0].Text.ToString() + "'});";
c++;
}
return markers;
}
}
}

The updatepanel updating would cause the issue you experience. You would need to reinitialize the google map on postback if within the updatepanel... to do that you can attach to Sys.Application's endRequest event, which fires when the updatepanel finishes, and reinitialize the map. Or pull the map out of the updatepanel.

How auto update pageload using Sqldependency

I am trying to create and run a sqldependency method from a web form class, where I have a "UpdateMethod", which I implemented using a window-form as reference.
However the web-form version of the method, does not update the page-load automatically on the client-side, when there is a change in the database, whereas window-form does.
Window form method version:
delegate void GridDelegate(DataTable table);
private void UpdateGrid()
{
string sql = "SELECT * FROM [dbo].[User]";
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(connectionstring))
{
using (SqlCommand cmd = new SqlCommand(sql, con))
{
con.Open();
dep = new SqlDependency(cmd); //Passing Command to SQL dependency
dep.OnChange += dep_OnChange;
using (SqlDataReader rdr = cmd.ExecuteReader())
{
dt.Load(rdr);
}
}
}
dataGridView1.Invoke((GridDelegate)delegate(DataTable table)
{ dataGridView1.DataSource = table; }, dt);
}
Web form version of the method:
private void UpdateGrid()
{
string sql = "SELECT * FROM [dbo].[User] order by uploadDate desc";
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(GetConnectionString()))
{
try
{
using (SqlCommand cmd = new SqlCommand(sql, con))
{
con.Open();
SqlDependency dep;
dep = new SqlDependency(cmd); //Passing Command to SQL dependency
dep.OnChange += dep_OnChange;
using (SqlDataReader rdr = cmd.ExecuteReader())
{
dt.Load(rdr);
// GridView1.DataSource = rdr;
}
}
}
catch (Exception ex)
{
throw ex;
}
}
GridView1.DataSource = dt;
GridView1.DataBind();
}
I tried adding in a try..Catch statement in the web form version, but I am getting no errors from it. Please advice, in how I can test this method further, in order to resolve this issue. Any hints/advice would be most appreciated. Thank you

This is a mockup. I do not have a sql server to work with; hence I've done my example with timers (threading). I have used SignalR for the purpose. Make sure the browser is also a bit modern (IE10 +, Chrome, Mozilla, etc which supports websockets).
Create your hub class with a constructor
The constructor initializes and fires the timer thread. The thread executes code which instructs the hub to call a particular js method on the client(s) (i.e. all those browsers that are connected to the hub).
This particular js method will host the logic to refresh our gridview which is inside an updatepanel.
Write the necessary javascript to do the refresh (aspx)
The aspx page is a simple in design. It has an updatepanel inside which you have a gridview bound to a sqldatasource, and a linkbutton whose main responsibility is to refresh the grid data (server-side). The code for this is very simple, and will be shown below later. You can notice that for the refresh to work we are simulating a manual click on the LinkButton control (hosted inside udpatepanel).
write necessary logic to connect with the hub (aspx)
This is code which connects to the hub, and writes the js method which should be called when you receive the server message.
Also make sure you have the owin startup class files added to the project. Refer SignalR tutorials for more signalr stuff.
DataHub.cs
using Microsoft.AspNet.SignalR;
using System.Threading;
using System.Diagnostics;
namespace WebApp.SignalR.GridUpdatePanel
{
public class DataHub : Hub
{
public DataHub()
{
Debug.Print("Ctor executed...");
Timer tmr = new Timer(new TimerCallback(this.RefreshThread), null, 1000, 5000);
}
//Method which invokes the client js code...
public void Refresh()
{
Clients.All.refreshData();
}
public void RefreshThread(object obj)
{
Debug.Print("RefreshThread Called...");
Refresh();
}
}
}
SignalRPage.aspx
<%# Page Title="SignalR Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SingalRPage.aspx.cs" Inherits="WebApp.SignalR.GridUpdatePanel.SingalRPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphPageHeadScripts" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphPageBody" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display.">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="PName" HeaderText="PName" SortExpression="PName" />
<asp:BoundField DataField="PAge" HeaderText="PAge" SortExpression="PAge" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PersonsDbConnectionString1 %>" DeleteCommand="DELETE FROM [Persons] WHERE [Id] = #Id" InsertCommand="INSERT INTO [Persons] ([Id], [PName], [PAge]) VALUES (#Id, #PName, #PAge)" ProviderName="<%$ ConnectionStrings:PersonsDbConnectionString1.ProviderName %>" SelectCommand="SELECT [Id], [PName], [PAge] FROM [Persons]" UpdateCommand="UPDATE [Persons] SET [PName] = #PName, [PAge] = #PAge WHERE [Id] = #Id">
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Id" Type="Int32" />
<asp:Parameter Name="PName" Type="String" />
<asp:Parameter Name="PAge" Type="Int32" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="PName" Type="String" />
<asp:Parameter Name="PAge" Type="Int32" />
<asp:Parameter Name="Id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-default" OnClick="LinkButton1_Click">Refresh</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphPageBottomScripts" runat="server">
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="signalr/hubs"></script>
<script>
function refreshGrid() {
console.log('grid refresh');
var lnk = document.getElementById('<%= LinkButton1.ClientID %>');
lnk.click();
}
</script>
<script>
$(function () {
var chat = $.connection.dataHub;
chat.client.refreshData = function () {
refreshGrid();
};
$.connection.hub.start().done(function () {
console.log('hub started...');
});
});
</script>
</asp:Content>
Here I have used the following master page.
Site.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApp.SignalR.GridUpdatePanel.Site" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="cphPageHeadScripts" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ContentPlaceHolder ID="cphPageBody" runat="server"></asp:ContentPlaceHolder>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/Scripts/bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="cphPageBottomScripts" runat="server"></asp:ContentPlaceHolder>
</body>
</html>
Finally the code-behind of the main aspx page will look as follows:
using System;
using System.Diagnostics;
namespace WebApp.SignalR.GridUpdatePanel
{
public partial class SingalRPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Label1.Text = DateTime.Now.ToLongTimeString();
}
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
Debug.Print("LinkButton1_Click");
Label1.Text = DateTime.Now.ToLongTimeString();
GridView1.DataBind();
}
}
}

Ext.NET ComboBox Databind from DataTable

I have an ext.net v2.5 combobox and im trying to databind the combobox in server side onload the asocieted store with .net datatable but is not working.
Any ideas how these can be done. databinding datatable to combobox?
<ext:ComboBox ID="ddlProduct" runat="server" ValueField="IDProduct" DisplayField="ProductName" FieldLabel="Product" LabelWidth="50" Width="250">
<Store>
<ext:Store runat="server" ID="ddlProductStore">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IDProduct" />
<ext:ModelField Name="ProductName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
Server Side Code:
ddlProductStore.DataSource = MyApp.Data.DataRepository.Provider.ExecuteDataSet("sp_GetSegmentProducts ", 1).Tables(0)
ddlProductStore.DataBind()

It appears to be working well with a DataTable in the test below. So, I assume the DataTable on your side doesn't have required Columns.
<%# Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
DataTable dataTable = new DataTable();
dataTable.Columns.AddRange(new DataColumn[] {
new DataColumn("IDProduct"),
new DataColumn("ProductName")
});
dataTable.Rows.Add(new object[] { "id1", "Name1" });
dataTable.Rows.Add(new object[] { "id2", "Name2" });
this.ddlProductStore.DataSource = dataTable;
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox
runat="server"
ValueField="IDProduct"
DisplayField="ProductName"
FieldLabel="Product"
LabelWidth="50"
Width="250">
<Store>
<ext:Store ID="ddlProductStore" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IDProduct" />
<ext:ModelField Name="ProductName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</form>
</body>
</html>

Display YouTube videos in a grid view?

I have displayed images in a grid view. But I don't understand how to display YouTube video in a grid-view?

Add a template column with literal control in it.
on itemdatabound fill the literal with the embed code of the YouTube video
Example:
((Literal)e.Item.FindControl("litvideo")).Text = "<iframe width=\"560\" height=\"315\" src=\"http://www.youtube.com/embed/r6BHyv6nkAs\" frameborder=\"0\" allowfullscreen></iframe>";

<asp:TemplateField ControlStyle-CssClass="Row" HeaderText="YouTube Video">
<ItemTemplate>
<asp:Label ID="lblYTVideoURL" runat="server" Text=<%# Eval("YTVideoUrl") %>></asp:Label>
</ItemTemplate>
<ControlStyle CssClass="Row"></ControlStyle>
</asp:TemplateField>
Then from the code behind:
protected void grvYoutubeVideo_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lbl = (Label)e.Row.Cells[0].Controls[1];
if (lbl.Text != "")
{
//string YTVideoURL = lbl.Text; //"http://www.youtube.com/v/AyPzM5WK8ys";
//string OBJYTVideo = "<object width=\"150\" height=\"150\">";
//OBJYTVideo += "<param name=\"movie\" value=\"" + YTVideoURL + "\"></param>";
//OBJYTVideo += "<param name=\"allowscriptaccess\" value=\"always\"></param>";
//OBJYTVideo += "<embed src=\"" + YTVideoURL + "\" type=\"application/x-shockwave-flash\"";
//OBJYTVideo += "allowscriptaccess=\"always\" width=\"100%\" height=\"100%\"></embed></object>";
//lbl.Text = OBJYTVideo;
}
}
}

try some thing like this, you can put all this in .html and open. After you will easy add this to asp.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/sSe_RmPlOLM" />
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/sSe_RmPlOLM" type="application/x- shockwave-flash"
wmode="transparent" width="425" height="355" />
</object>
</div>
</form>
</body>
</html>

<asp:TemplateField HeaderText="Video">
<ItemTemplate>
<iframe id="video" width="420" height="250" frameborder="0" allowfullscreen src='<%# "http://www.youtube.com/embed/" + Eval("VideoURL").ToString().Split(new string[] { "v=" }, StringSplitOptions.None)[1] %>' frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>

The footer CSS does not work when the page loads dynamic content at button click

.html
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
<link href="dark.css" rel="stylesheet" type="text/css" id="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Label ID="CaptionLabel" runat="server"></asp:Label>
<asp:TextBox ID="NumberTextbox" runat="server">(empty)</asp:TextBox>
<asp:Button ID="SquareButton" runat="server" Text="Square" style="background-color:Blue; color:White;" />
<asp:Label ID="ResultLabel" runat="server" Text="(empty)" CssClass="reverse"></asp:Label>
<p>
<asp:Label ID="Label1" runat="server" CssClass="footer1"
Text="Label Label Label Label LabelLabelLabel Label Label Label Label Label Label Label"></asp:Label>
</p>
<asp:RadioButton ID="radioDark" runat="server" AutoPostBack="True"
Checked="True" GroupName="grpSelectStylesheet"
oncheckedchanged="SwitchStylesheets" Text="Dark" />
<br />
<asp:RadioButton ID="radioLight" runat="server" AutoPostBack="True"
GroupName="grpSelectStylesheet" oncheckedchanged="SwitchStylesheets"
Text="Light" />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</form>
</body>
</html>
.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void SwitchStylesheets(object sender, EventArgs e)
{
if (radioDark.Checked)
stylesheet.Href = "dark.css";
if (radioLight.Checked)
stylesheet.Href = "light.css";
}
protected void Button1_Click(object sender, EventArgs e)
{
int count=DateTime.Now.Second;
for (int i = 0; i < count; i++)
{//for
Label q = new Label();
q.ID = DateTime.Now.Second.ToString();
q.Text = DateTime.Now.Second.ToString();
string spacee = "<br />";
Label space = new Label();
space.Text = spacee;
form1.Controls.Add(q);
form1.Controls.Add(space);
}//for
}
}
When the button is clicked, it works as it should but the footer does not register the expansion of the page.

Your code is completely wrong. you cannot change the stylesheet like this for a control even if the autopostback is set to true.
UPDATE: Here's how you should do it:
1- Remove the .css reference from your page.
2- Add this method to your page:
private void UpdateStylesheet(string filepath)
{
HtmlLink newStyleSheet = new HtmlLink();
newStyleSheet.Href = filepath;
newStyleSheet.Attributes.Add("type", "text/css");
newStyleSheet.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(newStyleSheet);
}
3- Add this line to your page_load event:
UpdateStylesheet("dark.css");
4- Handle the SwitchStylesheets like this:
if (radioDark.Checked)
UpdateStylesheet("dark.css");
if (radioLight.Checked)
UpdateStylesheet("light.css");