How To Upload Video In Database And Play In GridView Using ASP.NET

Farhan Ahmed

8y57.1k15100Article

ASP.NETGridview Using ASP.NETUpload Video In Database

15 Comments

Join the conversation! Your thoughts help the community grow.

Shreya Kulkarni5y ago
Error 9 The name 'BundleConfig' does not exist in the current context Error 7 The name 'FilterConfig' does not exist in the current context Error 8 The name 'RouteConfig' does not exist in the current context I' m getting this error in Global.asax.cs file. Please suggest me the solution for this..?
amir ansari6y ago
SqlCommand cmd = new SqlCommand("spGetAllVideos", con); going to error . Error is Could not find stored procedure 'spGetAllVideos'. how to solve this problem. please solve that problem.
- Farhan Ahmed6y ago
  You need to create stored procedure spGetAllVideos CREATE procedure spGetAllVideos ( select ID,Name,Video_Path from Videos )
amir ansari6y ago
Missing stored procedure : spGetAllVideos
Natasha Singh7y ago
Missing stored procedure : spGetAllVideos
Anurag Dixit8y ago
Audio Not Playing.
Bhavesh Jadav8y ago
Very nice...............
uma8y ago
Thanks Your code is working
Hiten Pandya8y ago
Good Article sir..
- Farhan Ahmed8y ago
  Thank you.........
Tridip Bhattacharjee8y ago
What is the meaning of this line $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable(); ?
- Farhan Ahmed8y ago
  This will append (apply) jquery datatable for search short and paging.
- Anurag Dixit8y ago
  If we implementing with MasterPage then Jquery Search Is not working ?
Bhavesh Jadav8y ago
A very good concept, thanks to share.
- Farhan Ahmed8y ago
  Thank you for your comment

Introduction

In this article we are going to learn how to upload a video in a project folder and save its path in a SQL server database table. We will bind that table to gridview and play audio using html5 video element.

Step 1

Create database in the SQL server of your choice.

CREATE TABLE [dbo].[Videos](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[Video_Path] [nvarchar](max) NULL,
CONSTRAINT [PK_Videos] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
CREATE procedure [dbo].[spInsertVideo]
(
@Name nvarchar(50),
@Video_Path nvarchar(50)
)
as
begin
insert into Videos(Name,Video_Path)
values(@Name,@Video_Path)
end

Step 2

Create an empty project in Visual Studio. Double click on webconfig file and add connect.

<connectionStrings>
<add name="DBCS" connectionString="data source=FARHAN\SQLEXPRESS; database=simpleDB; integrated security=true;"/>
</connectionStrings>

Add the below line of code to allow up to 50MB file upload.

<httpRuntime executionTimeout="3600" maxRequestLength="51200" enable="true"/>
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="104857600" />
</requestFiltering>
</security>
</system.webServer>

Step 3

Add web form by right clicking on project, adding new item, choosing web form and giving it a name. Add script and style cdn link in web from the head section.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>

Write script to apply Jquery data table with Gridview:

<script type="text/javascript">
$(document).ready(function () {
$("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
});
</script>

Step 4

Design HTML web form, drag and drop file upload control, button control, and grid view control, and use Bootstrap 4 class.

<body>
<form id="form1" runat="server">
<div class="container py-3">
<h2 class="text-center text-uppercase">How to upload video in database and play using asp.net</h2>
<div class="row">
<div class="form-group">
<label>Choose Video:</label>
<div class="input-group">
<div class="custom-file">
<asp:FileUpload ID="FileUpload1" CssClass="custom-file-input" runat="server" />
<label class="custom-file-label"></label>
</div>
<div class="input-group-append">
<asp:Button ID="btnUpload" CssClass="btn btn-outline-secondary" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</div>
</div>
</div>
</div>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<asp:GridView ID="GridView1" ShowHeaderWhenEmpty="true" HeaderStyle-CssClass="bg-primary text-white" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered">
<EmptyDataTemplate>
<div class="text-center">No Data Found <strong>Upload New Video</strong></div>
</EmptyDataTemplate>
<Columns>
<asp:BoundField HeaderText="ID" DataField="ID" />
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:TemplateField HeaderText="Videos">
<ItemTemplate>
<video width="130" height="130" controls>
<source src='<%#Eval("Video_Path")%>' type="video/mp4">
</video>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>

<script type="text/javascript">
$(document).ready(function () {
$("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
});
</script>