Professional Documents
Culture Documents
Best Way of Learning Is Sharing PDF
Best Way of Learning Is Sharing PDF
Search
CRUD operation using MVC3 and Jquery
About Me
Frnds, Binod Mahto
In this post I am gonna write code which is explaining CRUD operation using MVC WebGrid and
Jquery.
Follow 60
Below Image Gallary shows Grid Data with Paging and Sorting functionality.
https://www.linkedin.com/pub/binod-
mahto/18/995/705
View my complete profile
Blog Posts
► 2017 (1)
► 2016 (2)
► 2015 (8)
► 2014 (3)
► 2013 (4)
▼ 2012 (9)
► December (1)
▼ August (8)
Custom Handle Error Attribute
to handle exception ...
CRUD operation using MVC3
and Jquery
Generic class for caching in
windows application f...
Generic class for caching in
windows application f...
Get Columns Name as First
Row of Result Table usin...
Upload File to the Azure blob in
chunks using Para...
Schedule an ASP page to run
through task scheduler...
Use Windows Azure Storage in
your classic asp appl...
In this post I am gonna write code which is explaining CRUD operation using MVC WebGrid and
Jquery.
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 1/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
Before proceeding further we need to have our model class. Here is the our model class.
StateModel.cs
namespace MyMVC3WebApp.Models
{
public class StateModel
{
[ScaffoldColumn(false)]
public int StateID { get; set; }
[Required]
[StringLength(10)]
[Remote("StateNameExist","State")]
public string StateName { get; set; }
[Required]
[StringLength(10)]
public string CountryName { get; set; }
}
}
In our above model class I have implemented basic validation including Custom Remote validation which actually checks
State Name existence into the DB before submitting form. Here Remote attribute has two parameters, first one is action method name and the second one is the Controller name
Above code will help you to understand the basic CRUD operation for data. Please give your feedback if you really like it or if you have any suggestion here.
Now let’s create our controller class which will have the code for the database operation.
StateController.cs
namespace MyMVC3WebApp.Controllers
{
public class Country
{
public string Name { get; set; }
}
//Method to check state name existence being called by Remote attribute implemented in Model class for validation.
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 2/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
if (count > 0)
return Json(string.Format("State name {0} already exists.", stateName), JsonRequestBehavior.AllowGet);
else
return Json(true, JsonRequestBehavior.AllowGet);
}
//Method returns list of states.
public ActionResult Index()
{
IEnumerable<StateModel> states = from st in db.GetAllStates()
select new StateModel() { StateID = st.StateID, StateName = st.StateName, CountryName = st.CountryName };
return View(states.ToList<StateModel>());
}
//
// GET: /State/Details/5
//
// GET: /State/Create
//
// POST: /State/Create
[AcceptVerbs(HttpVerbs.Post)]
public void AddNewState(string stateName, string countryName)
{
db.AddState(stateName, countryName);
}
[AcceptVerbs(HttpVerbs.Post)]
public void UpdateState(int id, string stateName, string countryName)
{
StateMaster state = db.StateMasters.Single(s => s.StateID == id);
state.StateName = stateName;
state.CountryName = countryName;
db.SaveChanges();
}
[HttpPost]
public ActionResult Create(StateModel stateModel)
{
try
{
if (ModelState.IsValid)
{
int result = Convert.ToInt32(db.AddState(stateModel.StateName, stateModel.CountryName));
}
return RedirectToAction("Index");
}
catch
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 3/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
{
return View();
}
}
Now this is the right time to create our view as we have ready with our model and controller class.
Index.cshtml
@model IEnumerable<MyMVC3WebApp.Models.StateModel>
@{
ViewBag.Title = "Index";
}
<h2>
Index</h2>
<link href="http://1.cdn.blog.com/wp-admin/../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="http://1.cdn.blog.com/wp-admin/../../Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="http://1.cdn.blog.com/wp-admin/../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<style>
body
{
font-size: 82.5%;
}
label, input
{
display: block;
}
input.text
{
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset
{
padding: 0;
border: 0;
margin-top: 25px;
}
h1
{
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain
{
width: 350px;
margin: 20px 0;
}
div#users-contain table
{
margin: 1em 0;
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 4/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
border-collapse: collapse;
width: 100%;
}
div#users-contain table td, div#users-contain table th
{
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error
{
padding: .3em;
}
.validateTips
{
border: 1px solid transparent;
padding: 0.3em;
}
.odd
{
background-color: #FFF;
}
.even
{
background-color: #E8E8E8;
}
.grid
{
margin: 4px;
border-collapse: collapse;
width: 600px;
}
.head
{
background-color: #E8E8E8;
font-weight: bold;
color: #FFF;
}
.grid th, .grid td
{
border: 1px solid #C0C0C0;
padding: 5px;
}
.alt
{
background-color: #E8E8E8;
color: #000;
}
.gridItem
{
width: auto;
font-weight: normal;
font-style: normal;
}
.gridHiddenItem
{
visibility: hidden;
}
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 5/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
.img
{
width: 20px;
height: 20px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function () { //$(document).ready(function () {
//Start-get controls
var state = $("#stateName"),
country = $("#countryName"),
btnDel = $('#deleteRecord'),
allFields = $([]).add(state).add(country),
tips = $(".validateTips");
//End-get controls
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 6/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
return true;
}
}
//End-length check validation
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 7/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
}
$(this).dialog("close");
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
//End-Convert div form to model dialog
});
function ConfirmDelete() {
return confirm('Do you want to delete this record');
}
</script>
<p>
<a id="create-state" href="#">Create New</a>
</p>
<div>
<table>
<tr>
<td>
@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
}
<div id="grid">
@grid.GetHtml(
tableStyle: "grid",
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 8/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(null, null, format: @<input type="hidden" name="ID" value="@item.StateID"/>),
grid.Column("StateName", "State", style: "gridItem", canSort: true),
grid.Column("CountryName", "Country", style: "gridItem", canSort: true),
grid.Column("Edit", format: @<text><a id="editRecord" href="#"><img alt="" src="../../Content/images/Edit.jpg"
style="height: 20px; width: 20px" /></a></text>, style: "imgstyle"),
grid.Column("Delete", format: @<text><a href="@Url.Action("Delete", "State", new { id = item.StateID })" onclick="javascript:return ConfirmDelete();"><img
alt="" src="../../Content/images/delete.png" style="height: 20px; width: 20px" /></a></text>, style: "imgstyle")
)
)
</div>
</td>
</tr>
</table>
</div>
<div>
<div id="dialog-form" title="State">
<p>
All form fields are required.</p>
<form>
<fieldset>
<input id="stateID" type="text" style="visibility: hidden" />
<label for="stateName">
State</label>
<input type="text" name="stateName" id="stateName" />
<label for="country">
Country</label>
<select id="countryName" style="width: 95%">
</select>
</fieldset>
</form>
</div>
</div>
Above view has style, script and html code for the view. starting of this post, post has the output images for the above code. Enjoy!
No comments:
Post a Comment
Publish Preview
Follow by Email
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 9/10
8/7/2017 Best way of learning is Sharing.: CRUD operation using MVC3 and Jquery
http://binodmahto.blogspot.in/2012/08/crud-operation-using-mvc3-and-jquery.html 10/10