
MVC CRUD(Create, Read, Update, Delete)
step : 1 Open My SQL Server and Create new database like as video
Create database Login;
create table LoginPanel(
ID int not null primary key
Username nvarchar(50) null
Password nvarchar(50) null
);
Step : 2
- Open Visual studio
- Click on “File”>New>Project>Visual c#>Web> then provide your project name> then select “ok”> then click “MVC”>ok.
- delete default controller and view
- Create new controller name “Register”
Step : 3 Add view and write this code in your view (for input data from user)
SetDataInDataBase.cshtml
@model WebApplication.Models.LoginPanel
@using (Html.BeginForm())
{
<div class="container">
<div class="form-group">
<label>Username:</label>
<input class="form-control" name="Username" placeholder="Enter Name" />
</div>
<div class="form-group">
<label>Password:</label>
<input class="form-control" name="Password" placeholder="Enter Password" />
</div>
<div class="button">
<button>Submit</button>
</div>
</div>
}
step : 4 change your defaults Routeconfig like as video.
defaults: new {controller = "Register", action = "SetDataInDataBase", id = UrlParameter.Optional }
step : 5 Connect your database using entity framework like as video.
setp : 6 add this code in your controller (for set data in database)
RegisterController.cs
public class RegisterController : Controller
{
TofaelAhmedEntities db = new TofaelAhmedEntities();
// GET: /Register/
public ActionResult SetDataInDataBase()
{
return View();
}
[HttpPost]
public ActionResult SetDataInDataBase(LoginPanel model)
{
LoginPanel tbl = new LoginPanel();
tbl.Username = model.Username;
tbl.Password = model.Password;
db.LoginPanels.Add(tbl);
db.SaveChanges();
return View();
}
}
Step : 7 Add method in your controller for (pass the database record view for user)
public ActionResult ShowDataBaseForUser()
{
var item = db.LoginPanels.ToList();
return View(item);
}
Step : 8 Add view and write this code in your view (show data for user from database)
ShowDataBaseForUser.cshtml
@model List<WebApplication.Models.LoginPanel>
<div class="container">
<table class="table table-bordered" >
<thead>
<tr>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>@Model[i].Username</td>
<td>@Model[i].Password</td>
<td>
<a href="@Url.Action("Delete", new { id = Model[i].ID})"><i class="glyphicon glyphicon-trash"></i></a>
<a href="@Url.Action("Edit", new { id = Model[i].ID})"><i class="glyphicon glyphicon-edit"></i></a>
</td>
</tr>
}
</tbody>
</table>
</div>
Step : 9 Add a new method in your controller (for delete data from your database)
public ActionResult Delete(int id)
{
var item = db.LoginPanels.FirstOrDefault(x => x.ID == id);
if(item != null)
{
db.LoginPanels.Remove(item);
db.SaveChanges();
}
var item2 = db.LoginPanels.ToList();
return View("ShowDataBaseForUser", item2);
}
Step : 10 Add a new method in your controller (for edit data from your database)
public ActionResult Edit(int id)
{
var item = db.LoginPanels.Where(x => x.ID == id).First();
return View(item);
}
[HttpPost]
public ActionResult Edit(LoginPanel model)
{
var item = db.LoginPanels.Where(x => x.ID == model.ID).First();
item.Username = model.Username;
item.Password = model.Password;
db.SaveChanges();
var item2 = db.LoginPanels.ToList();
return View("ShowDataBaseForUser", item2);
}
Step : 11 Add a view (for show edit panel with data)
@model WebApplication.Models.LoginPanel
@using (Html.BeginForm())
{
<div class="container">
<div class="form-group">
<label>Username:</label>
@Html.TextBoxFor(x => x.Username, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Password:</label>
@Html.TextBoxFor(x => x.Password, new { @class = "form-control" })
</div>
<div class="button">
<button>Submit</button>
</div>
</div>
}
Now run this application