show data table in web grid using mvc 5

i am using mvc 5, in that i am trying to show the custom columns details in webgrid but runtime error is generate below i show that error,

The model item passed into the dictionary is of type 'NewAuthentication.Models.DataModel', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[NewAuthentication.Models.DataModel]'.

then please tell me how can i solve that problem.

 

below is my view code and server side code ,

view code ,

 

@model IEnumerable

@{
ViewBag.Title = "myprof";
Layout = "~/Views/Shared/UserMaster.cshtml";
WebGrid grid = new WebGrid(Model);
}

myprof

@grid.GetHtml( columns:new[] { grid.Column("Firstname"),
grid.Column("Gender")
})

 

and server side code ,

 

SqlConnection con = new SqlConnection("Data Source=JAGDISH;Database=Hmarasmaj;Integrated Security=SSPI");
//SqlDataAdapter da = new SqlDataAdapter("Select * from Usercredentials where id=" + 1 + "", con);
SqlCommand cmd = new SqlCommand("Select * from Usercredentials where id=" + 1 + "", con);
List data = new List();
DataTable dt = new DataTable();
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
DataModel dm = new DataModel();
dm.Firstname = "j";
dm.Gender = "male";
dt.Columns.Add("Firstname", typeof(string));
dt.Columns.Add("Gender",typeof( string));
dt.Rows.Add(dm.Firstname,dm.Gender);
return View(dt.AsEnumerable().ToList());