Creating CRUD In Single Page View

This article covers how to run CRUD (Create, Edit, Update, Delete, Details) operations in a Single View(page) using JavaScript and AJAX calls in MVC. And also, how to create a JSON file and filter (Search) data from that.

Also, I am using Entity Framework for this sample project.

So, create an ASP.NET project. For this, follow the given steps

1. Open Visual Studio. Select New Project.
2. In Visual C# tab, select ASP.NET Web Application.
3. Now, select an Empty Project. In "Add folders and core reference for:" section, select MVC and click OK.
4. Now, right click on your Solution and add another Project as Class Library (as I am using Entity Framework).
5. Add a Class in that Class Library, as shown below:

Now, right click on your Class Library and install Entity Framework via NuGet.

Now, add folder in Class Library, named as Context and add a Class in it, as shown below.

Now, in Web.Config file of Project, add the following Connection string.

Add the Class Library in a reference of your Project and build the Solution. Add the Empty Controller in controllers folder of the Project.

Now, Add the following ActionResult method to your Controller.

Now, in the View of the index method, write the following code for displaying the list of the users in a table with edit, delete, and details option for each.

Here, your users list would be empty. To create a user, update your View as the following.

Now, add a JavaScript to create a User.