How to display video in browser using database in Asp.net MVC
1> Create a Table name Videos
CREATE TABLE [dbo].[Videos] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[Type] INT NULL,
[VideoUrl] VARCHAR (MAX) NULL,
[Status] BIT NULL,
CONSTRAINT [PK_Videos] PRIMARY KEY CLUSTERED ([Id] ASC)
);
2> Create Model of Videos Table
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
namespace ItsMe.Areas.Admin.Models
{
[Table("Videos")]
public class Videos
{
public int Id { get; set; }
public int Type { get; set; }
public string VideoUrl { get; set; }
public bool Status { get; set; }
}
}
3> Map with Dbset for Insert , update and delete operation..
3> Create a Controller for upload the video in folder (Videos)
Now we write a logic for video upload in create action.
as given :-
4> Now we create View for Create Action.
@model ItsMe.Areas.Admin.Models.Videos
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>
@using(Html.BeginForm("Create", "Videos", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Videos</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Type, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Type,new SelectList(ViewBag.Videos,"Text","Value") ,new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Type, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
Upload Videos
<div class="col-md-10">
<input type="file" name="file" id="file" value="Upload" />
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.Status)
@Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
5> Now we create a Index Action to view all data in list format using for each and Link with Detail Action with Id .
<a href="@Url.Action("Details","Videos",new{id=Model.Id})" value="Details"></a>
@model IEnumerable<ItsMe.Areas.Admin.Models.Videos>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Type)
</th>
<th>
@Html.DisplayNameFor(model => model.VideoUrl)
</th>
<th>
@Html.DisplayNameFor(model => model.Status)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Type)
</td>
<td>
@Html.DisplayFor(modelItem => item.VideoUrl)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
<td>
@Html.ActionLink("Details", "Details", new { id=item.Id })
</td>
</tr>
}
</table>
6> Now we create Details action in VideoController for display the video in browser.
public ActionResult Details(int id)
{
var model = new Videos();
var videos = db.videosContext.Find(id);
model.VideoUrl = videos.VideoUrl;
var nm = db.typeContext.Find(videos.Type).Name;
ViewBag.Type = nm;
return View(model);
}
7> After then we create a view for Display the video in browser.
@model ItsMe.Areas.Admin.Models.Videos
@{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Details</h2>
<video width="450px;" height="450px;" controls autoplay="autoplay">
<source src="@Url.Content(Model.VideoUrl)" type="@ViewBag.Type" />
</video>
9> Run the project. Click Details from Index page.
url:-http://localhost:37160/Admin/Videos/Details/3
