How To Select Insert, Update And Delete With ASP.NET MVC

How To Select Insert, Update And Delete With ASP.NET MVC

CheapASPNETHostingReview.com | Best and cheap ASP.NET MVC hosting. In all the above articles I have explained about ASP.Net MVC. Now I think you are clear about ASP.Net MVC and creating simple ASP.Net MVC applications. Whenever we are developing the applications we are related to a database and in the database driven applications we need to perform CRUD operations. On various blogs and sites you will find CRUD operation samples about ASP.Net MVC. But on many the sites I have seen they are all using Entity Framework to perform the CRUD. Since it is the standard, we have to follow it while developing ASP.Net MVC applications instead of using DataSet, Command, Connection, DataAdapter and DataReader. But in many cases we have to use these ADO.Net 2.0 operations. In this  article we will perform all the operations using ADO.NET instead of the ADO.NET Entity Framework. But use these ADO.Net only where you need to else use the ADO.Net Entity Framework only. So let’s start performing CRUD using ADO.Net.

Step 1 : Create the table in your database with the following script.

Step 2 : Now create a new ASP.Net MVC3 Web application with an empty template. This will create one predefined structure with Controllers, Modes and Views folders. All these folders are empty; now we have to add the content to these folders.

Step 3 : As you know, first we have to create a controller so let’s add a new controller with the name Home in the controllers folder. Now our empty controller is ready with an Index method. On the index method we will call the dataset from the database to display the existing Authors in our table. For this we will create a model which will return the dataset, then we will display this data on the view through the Index method of the Home controller. So let’s create one model i.e. class in Models folder with the name SelectModel and write the following code in it to retrieve the data from the database.

In the selectModel class we have one method called GetAllAuthors which returns the dataset of all authors. Now modify your Index method of Home Controller like Entity Framework.

In the above line of code we called the GetAllAuthors method from SelectModel which will return the dataset object and simply we put this dataset in the viewbag. As you know in C# 4.0 we have dynamic programming; you can see one excellent example with viewbag. Here we have written ViewBag.AuthorList which will create dynamically on Author list on runtime for us. Still now we are finished up to calling the dataset and transferring it to the view but still we don’t have any
view so right-click in the Index method and add a new empty view to display our authorlist and write the following markup to display the results.

In the above markup we are displaying our authorlist by creating a HTML table with having Edit and Delete links and lastly having one more ActionLink to add a new author record.

Step 4 : At this stage we are ready with our Index or select operation; now we can add more methods to our Home Controller to perform Edit, Update and Delete operation so let’s start with adding a new record i.e. inserting a new record in the database. In the last step we added an Add New Author ActionLink with Add method so we need to add two more methods in our Home Controller, one for displaying the fields and another for inserting the values; but before that we need to create our model. So add one Model class called InsertModel in your models folder and write the code like below.

The Above code contains some properties with attributes that are used for validation on our view as well as the InsertModel contains Insert method for inserting values in database. Now our InsertModel is ready, so you can add two methods for adding the record in the database add one ADD method with [HttpGet] and a second ADD method with [HttpPost] attributes. These attributes are all of you known. So create two add methods like below.

In the above code, first one add method simply returns the view to take some input from the user and the second add method gets the values from the view and validates it and inserts these values into the database by calling the Insert method of InserModel.

Step 5 : Still now we have only finished Select and Insert operations; now we will see Edit and update. In step3 we have added one edit link bind with AuthorId. On the basis of this AuthorId we will Edit the record and update the record in the database. As in previous steps we need one more Model class so add a Model class called UpdateModel and write the code like below.

In the above code we have properties and one Update method to update the record in the database. In all ModelClasses you can see I’m using ADO.Net only.
Now we have our model class ready so we can add some methods to perform Edit and update operations in our Home Controller so add two more methods called Edit for editing and updating the records like below.

In the above code you can see first the edit method performs some logic to call the specified id record from the database and display this record on the view and the second Edit method performs the update operations.

Step 6 : Now our last operation still remains, i.e. delete; so to delete, add one more model called DeleteModel and write the following code which contains only a delete method to delete the record of the specified AuthorId from the database

In Step3 we have added one ActionLink with delete and given the authorid to it for deleting the specified authorid record from the database. So now we can add one Delete Method in our Home Controller, so add it and write the following code to call the delete method of the DeleteModel to delete the record.

Now we have completed all our operations. Now you can run the application and can perform all the Select, Insert, Update and Delete operations.

Conclusion: In this article we have seen how to add, edit, update and delete the records using ADO.NET in ASP.Net MVC. I hope you enjoyed this article.

Cheap ASP.NET Hosting – How to Setting Up VS 2015 for ASP.NET Core RTM 1.0 and Angular 2 RC 3

Cheap ASP.NET Hosting – How to Setting Up VS 2015 for ASP.NET Core RTM 1.0 and Angular 2 RC 3

CheapASPNETHostingReview.com | Best and cheap ASP.NET hosting tutorial. In this post we will explain you about How to Setting Up VS 2015 for ASP.NET Core RTM 1.0 and Angular 2 RC 3. Of course read the quick start first.  You need to make sure to install VS 2015, you can use Community edition of you want.  You would also need to install ASP.NET Core.

Let’s get started.  Create new ASP.NET Core project.

vs1

Select empty template to keep everything simple for getting started demo.

vs2

Let’s add static files support to serve a plain vanilla HTML page.  Open project.json file and add the static files line from below.

Now we can add a page which will host our Angular app.  Again, add just a plain HTML page under wwwroot folder, since that is the root of our deployable Core application.  You can just right click on that folder, add new item, then pick HTML page template.  I am calling mine index.html.  In order to see this page we need to turn off preloaded startup code and replace it with static files server.  Open up Startup.cs file and replace Configure method with the following.

Now we can test the host page.  Open up VS command prompt and navigate to the project folder (NOT solution folder).  Type “dotnet run”.  Your app will compile and Kestrel web server with start.  Open browser and navigate to http://localhost:5000/index.html.  You will see the host page.  To make sure edit the index.html page and add some content to it.  It is time to start up Angular 2 portion.  I like adding NPM support to the project from command line.  From the same command prompt type “npm init” to initialize NPM file.  Follow the prompts, giving some meaningful answers.  Once this is done, switch to visual studio.  You will see that dependencies node in project explorer with have npm listed.  RIch click on that node and select open package.json. We need to add all Angular 2 scripts and dependencies by adding dependencies and devDependencies nodes as shown below.

All packages that start with @angular are angular core packages.  This is different from beta versions, which only had a single package.  Other packages are supporting packages for angular 2.  In order to proving TypeScript support, we will use typings NPM module, which is under devDependencies.  Give VS a minute to restore the packages after saving package.json file.

Now we need to install code JavaScript typings files for TypeScript.  At the same prompt type “typings install  dt~core-js –save –global”.  Once completed, you will see typings folder in project explorer, with core-js folder under it.

In the next step we will setup compilation options for TypeScript.  Add new item to the root of your project, selecting TypeScript Configuration File item template.  Change the content to look as follows

We are adding decorator options, which are required for Angular 2.  We are setting module to use systemjs, which is the default for all the demos I have seen.

Now I am going to setup gulp to make my development flow a bit smoother.  If you do not have gulp installed globally, type “npm install gulp”  at the command prompt.  After that you can add new item to the root of the project, selecting Gulp Configuration File item template.  Open gulpfile.js and replace the content with the following.

What is going on here?  Third party task copies necessary Angular 2 scripts from node_modules folder to the same folder under wwwroot.  Copy task copies our own application files, which will be placed under app folder under project root to wwwroot folder as well.  Finally, watch task will monitor the changes to app folder and re-copy the files wwwroot folder by firing copy task.  By default we will run all three tasks when we run gulp every time.

Time to write application code.  Create new folder called “app” under project root.  Create a subfolder called “shell”.  It will contain bootstrapping code.  Add new item to shell folder, picking TypeScript file template.  Change the name to main.  This will be our root component for Angular 2 application.  Here is the sample code you can add to it.

If everything works OK, we will see a div with the words “Hello, World!” in it.  Now we need to bootstrap this main component.  Add new TypeScript file in the same folder, calling it bootstrapper.ts.  Here is its content.

All we are doing here is importing our own component.  Then we are importing Angular 2 bootstrapping in browser module as routing support.  Finally, we bootstrap the app, with our Main component as the root.  Ire commend that you build the app now to ensure there are no errors.

Now we need to configure systemjs module loader.  Create new JavaScript file called startup.js under wwwroot folder.  This is the only file we will add there.  We could also add it under app folder if we wanted to.  Here it its content.  This has changed slightly since RC 2.

We are specifying our app folder as a package for system js.  We are also adding core angular packages, including rxjs, reactive extensions.  We are configuring systemjs by calling config method and passing our packages map.  Finally we are starting app package.  Previously in the same file we specified that the entry point for it is bootstrapper.js.

It is time to edit our index.html page and add the necessary scripts.

At the same time we added an element called <app-shell> which matches the selector we added onto the definition of our Main component.  Let’s build the app one more time.

Get back to the command line and type “gulp” to copy our files around.  Open up second VS command prompt, navigate to the same project folder and type “dotnet run” to start the server.  Now navigate to http://localhost:5000/index.html to see the results of your hard work.  You should see “hello, world’’.  Go ahead and edit main.ts and change the title.  Refresh the page again.  You should see new title.  Our environment and our first app are DONE!!!