Is it possible to use web CRUD matrix in one page using Ajax
I would like to get an idea of what is the fastest and safest way to do CRUD (Update-Edit-insert) operations on the same page with Ajax in Razor WebMatrix syntax. Is it possible to do this CRUD operation on one razor page using ajax without a GET-POST webservice or another razor page?
I tried using jquery ajax to post data from other Razor pages using Json output type as well as WCF Webservice. But they really didn't satisfy me because in everything I need a different page to serve my data.
source to share
Yes, you can do it. Each individual CRUD operation must be wrapped in its own conditional block. The condition can check if a specific name / value pair was sent to the server via AJAX (for example, action=delete
or action=update
). When returning values back to the AJAX call, make sure the ContentType
response parameter is set correctly.
Here is a working example -
@{
if(IsAjax){
switch(Request["action"]){
case "create" :
Response.Write("You are trying to create something");
Response.End();
break;
case "read" :
Response.Write("What would you like to read?");
Response.End();
break;
case "update" :
Response.Write("Something is being updated");
Response.End();
break;
case "delete" :
Response.Write("This is a delete");
Response.End();
break;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="~/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(function () {
$('.crud').click(function () {
$.get('/SinglePage/?action=' + $(this).attr('id'), function (message) {
alert(message);
})
})
})
</script>
</head>
<body>
<button id="create" class="crud">Create</button>
<button id="read" class="crud">Read</button>
<button id="update" class="crud">Update</button>
<button id="delete" class="crud">Delete</button>
</body>
</html>
Anyway, this illustrates how bad this approach can be in terms of maintenance, etc. I would always use separate cshtml files for each data operation,
source to share