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>
Related
I am back to C# after roaming around with other languages.
I am facing an issue after the file has been moved to the 2 locations successfully.
Issue:
I can't see the Thumbnail uploaded.
The issue is on the CS code when listing the images exactly here I assume, I don't know how to call the file to read, using which path...
string fileName = Path.GetFileName(filePath);
files.Add(new ListItem(fileName, "C:/Image_folder/" + fileName));
Any help is welcome
ASPX
<%# Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false">
<Columns>
<asp:BoundField DataField="Text" />
<asp:ImageField DataImageUrlField="Value" ControlStyle-Height="100" ControlStyle-Width="100" />
</Columns>
</asp:GridView>
</form>
</body>
</html>
CS
using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Collections.Generic;
public partial class CS : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string[] filePaths = Directory.GetFiles("C:\\Image_folder\\");
List <ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
files.Add(new ListItem(fileName, "C:/Image_folder/" + fileName));
}
GridView1.DataSource = files;
GridView1.DataBind();
}
}
protected void Upload(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
FileUpload1.PostedFile.SaveAs("C:\\Image_folder\\" + fileName);
File.Copy("C:\\Image_folder\\" + fileName, "\\\\192.168.1.1\\shared_image_folder\\" + fileName, true);
Response.Redirect(Request.Url.AbsoluteUri);
}
}
}
SOURCE FROM THE GRID
<!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><title>
</title></head>
<body>
<form method="post" action="./CS.aspx" id="form1" enctype="multipart/form-data">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMTcxNDg1MzIPZBYCAgMPFgIeB2VuY3R5cGUFE211bHRpcGFydC9mb3JtLWRhdGEWAgIFDzwrABEDAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIDZAEQFgAWABYADBQrAAAWAmYPZBYKZg8PFgIeB1Zpc2libGVoZGQCAQ9kFgRmDw8WAh4EVGV4dAUZMjg0NHgxNjAwLWJhY2tncm91bmRzLnBuZ2RkAgEPZBYEZg8PFgIeDUFsdGVybmF0ZVRleHRlZGQCAQ8PFgIfA2hkZAICD2QWBGYPDxYCHwQFFWJhY2tncm91bmRfc2t5ZWVlLmpwZ2RkAgEPZBYEZg8PFgIfBWVkZAIBDw8WAh8DaGRkAgMPZBYEZg8PFgIfBAUWYmFja2dyb3VuZF9za3llZWVlLmpwZ2RkAgEPZBYEZg8PFgIfBWVkZAIBDw8WAh8DaGRkAgQPDxYCHwNoZGQYAQUJR3JpZFZpZXcxDzwrAAwBCAIBZPplLAL2cXZ3yOS32KPXgASprFrPV/4fflzzREt6LxQN" />
</div>
<input type="file" name="FileUpload1" id="FileUpload1" />
<input type="submit" name="btnUpload" value="Upload" id="btnUpload" />
<hr />
<div>
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
<td>2844x1600-backgrounds.png</td><td><img src="" style="height:100px;width:100px;" /></td>
</tr><tr>
<td>background_skyeee.jpg</td><td><img src="" style="height:100px;width:100px;" /></td>
</tr><tr>
<td>background_skyeeee.jpg</td><td><img src="" style="height:100px;width:100px;" /></td>
</tr>
</table>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="17CECB09" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAJ1o9wC/FD3hrc5v52GfoAN5vhDofrSSRcWtmHPtJVt4Nr3LRFm+giVnIqfnqj9kuxQ47Dj1gv1HmdZrTjLiXPV" />
</div></form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"336b94aad34847b39a4af20e67138af9"}
</script>
<script type="text/javascript" src="http://localhost:60480/011c96c87fbd421fa3485ec4702d5c1b/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
The problem is you are using an absolute path for the images. You have to use a relative path to your application. For this you can copy the original folder to your project folder. It is not necessary to include this folder to your project. Then just change the code like below
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Image_folder"));
List<ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
files.Add(new ListItem(fileName, "~/Image_folder/" + fileName));
}
GridView1.DataSource = files;
GridView1.DataBind();
You have to change your upload code as well to use the folder in your project. Use the following code
FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Image_folder/") + fileName);
File.Copy(Server.MapPath("~/Image_folder/") + fileName, "\\\\192.168.1.1\\shared_image_folder\\" + fileName, true);
The following .NET 4.0 code functions perfectly in IE9, Chrome 20 and Opera 12 but fails miserably in Firefox 13. All the browsers are default installs without plugins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="Treeview1" Runat="server"
onclick="javascript:postBackByObject()"
ontreenodecheckchanged="Treeview1_TreeNodeCheckChanged"
ShowCheckBoxes="All" >
<Nodes>
<asp:TreeNode Value="Child1" Expanded="True" Text="1">
<asp:TreeNode Value="Grandchild1" Text="A" />
<asp:TreeNode Value="Grandchild2" Text="B" />
</asp:TreeNode>
<asp:TreeNode Value="Child2" Text="2" />
<asp:TreeNode Value="Child3" Expanded="True" Text="3">
<asp:TreeNode Value="Grandchild1" Text="A" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<asp:TextBox ID="TextBox1" runat="server" Height="156px" TextMode="MultiLine"
Width="295px"></asp:TextBox>
</div>
</form>
</body>
<script language="javascript" type="text/javascript">
function postBackByObject() {
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
</script>
</html>
I am trying to catch the TreeNode checkbox events with the following code behind:
protected void Treeview1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
{
TextBox1.Text += e.Node.Text;
}
This is quite annoying - any solution is welcome!
try handling the event more generically, so it works in both FF and other browsers.
e.g.
onclick="javascript:postBackByObject(event)"
function postBackByObject(e) {
var evt = e || window.event;
var o = evt.target || evt.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
edit i forgot to add a line for target / srcElement
How can I use NameSpace Manager or XsltContent to parse aspx page?
I am using HtmlAgilityPack.
I am trying to parse aspx page to get Button and Label controls IDs. I am getting the following error when I try to select node with asp:Button element.
Here is the error message:
Namespace Manager or XsltContext needed. This query has a prefix, variable, or user-defined function.
HtmlAgilityPack.HtmlDocument htmlDoc = new HtmlAgilityPack.HtmlDocument();
string filePath = #"C:\webform4.aspx";
htmlDoc.Load(filePath);
foreach (HtmlNode div in htmlDoc.DocumentNode.SelectNodes("//div"))
{
Response.Write(div.Id);
foreach (HtmlNode asp in div.SelectNodes("asp:Button"))
{
Response.Write(asp.Id);
}
}
My aspx page looks as follows:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div id="mydiv">
<asp:Button ID="Button1" runat="server" Text="Button on page4" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label on page 4"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="second button page 4" />
<br />
<asp:Button ID="Button3" runat="server" Text="second button page 4" />
</div>
</form>
</body>
</html>
I use Linq with the Agility Pack myself, rather than XPath, how about this?
HtmlAgilityPack.HtmlDocument htmlDoc = new HtmlAgilityPack.HtmlDocument();
string filePath = #"C:\webform4.aspx";
htmlDoc.Load( filePath );
var aspNodes = htmlDoc.DocumentNode.Descendants().Where( n => n.Name.StartsWith( "asp:" ) );
foreach ( var aspNode in aspNodes ) {
Console.WriteLine( "Element: {0} Id: {1}", aspNode.Name, aspNode.Attributes["Id"].Value );
}
I am considering the feasibility of using jQuery UI themes to my ASP.NET website.
I found following issues. How do we correct them?
Internet Explorer (IE 8) --> The gridline is not visible at the bottom
(when there is no multiple pages)
Mozilla --> Gridline is not available for header
Chrome --> Working fine
Is it compatible with asp.net controls?
Can you please direct me to some examples that shows correct use of these jQuery classes with asp.net controls (without side effects)?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AllowPaging="True" PageSize="4">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="ProductName" ReadOnly="true"
SortExpression="ProductName" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="Qty" ReadOnly="true" SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="true" SortExpression="CategoryName" />
</Columns>
</asp:GridView>
</div>
<br />
</form>
</body>
</html>
--Code Behind
using System;
using System.Web.UI.WebControls;
using System.Data;
public partial class MyGridTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ProductName"), new DataColumn("QuantityPerUnit"), new DataColumn("CategoryName") });
dt.Rows.Add("Shirt", 200);
dt.Rows.Add("Football", 30);
dt.Rows.Add("Bat", 22.5);
//dt.Rows.Add("Football", 30);
//dt.Rows.Add("Bat", 22.5);
//dt.Rows.Add("Football", 30);
//dt.Rows.Add("Bat", 22.5);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
GridView1.CssClass = "ui-widget-content";
if (GridView1.Rows.Count > 0)
{
//To render header in accessible format
GridView1.UseAccessibleHeader = true;
//Add the <thead> element
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.HeaderRow.CssClass = "ui-widget-header";
//Add the <tfoot> element
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
if (GridView1.TopPagerRow != null)
{
GridView1.TopPagerRow.TableSection = TableRowSection.TableHeader;
}
if (GridView1.BottomPagerRow != null)
{
GridView1.BottomPagerRow.TableSection = TableRowSection.TableFooter;
}
}
}
}
Just out of interest. What happens on when you add this meta tag.
<meta http-equiv="x-ua-compatible" content="IE=8" />
.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");