Fetch data from database and bind in marquee html tag

In this article, I will show you how to create html moving text, fetch the data from the database and bind in html marquee tag using asp.net mvc.

Here I am using Northwind database. You can download it from following link.

Download Northwind Database

Open Microsoft sql management studio and right click on the database and attach it.

Step 1: Create an asp.net mvc application and create an ado.net entity data model using table Customer in the model folder and generate entity for that.

Step 2: Create an asp.net mvc project and right click on the controller folder and create a new controller and name it as HomeController. Inside the HomeController copy and paste the following code.

public ActionResult Index()
        {
            models db = new models();
            return View(db.Customers.ToList());
        }

Step 3: Right click on the index view and create a razor view named as index. Copy and paste the html code for scrolling text.

@modelIEnumerable<MymvcApp.Models.Customer>
@{
    ViewBag.Title = "HTML marquee tag dynamical bind";
}
 
<h1 style="text-align:center;">Fetch data fromdatabase and bind in HTML marquee tag </h1>
 
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()"
    scrolldelay="300?" style="height: 213px">
   @foreach (var item in Model)
   {
       <h3 style="text-align:center;color:#055996">@Html.Raw(item.CompanyName)</h3>  
   }
        
</marquee> 

Description: When you run the application, the customer names are marquee from bottom to top. You can also set marquee right to left and also you can stop the marquee using the option onmouseover property by this.stop() and onmouseout by this.start().wherever the user hovers on the marquee tag, it will stop running and outside the marquee tag, the text will start to run.

Marquee html example: