Creating A View To Insert Data In MVC

Overview

In this article, we will see how to create a View to insert data. Do refer to my previous article, "Using Business Objects in MVC", as this article is the continuation of that. We want to create a View which allows users to enter various details, like name, gender, city and so on. We will save this detail in the database tables.

Now, let’s run our project and navigate to Employee Controller.



This page is listing all the employee details like name, city and gender. Now, we will click on Create New Link.


We are actually navigating to Employee Controller and "Create" is the Action method. Now, in our EmployeeController, we don’t have action method that's  why we are getting this error, resource cannot be found. We need to implement Create action method. Let’s see how to do that.

Introduction

Let’s create a new Index action method as Create and we will write httpGet attribute, meaning it will access the get request of this URL as http://localhost:56965/Employee/Create.

If somebody accesses this URL and if it is a GET request, Create Action method will be called.

Now, the next step is to create a View. The View name will be Created and select Employee Model class. When a View gets created as we had created scaffold templates, it will generate the code automatically for Create View. Now, let’s run the solution. We will get the following output.


Here, we have all the textboxes for name, city and gender. For gender, we will have a dropdown list instead of textbox.


So, in our View, we have added DropDownlist where we will be selecting values as male and female, where it will be a list of selected items which will have value and Text as male and Female respectively.

Now, save the solution and run the app. You will see a dropdown list as.


Now, the GET request is posted. When you click on Create button, we get this error as.


Resource cannot be found.

We are getting this error because when we click on create button, we are actually posting the form Data that is an HTTP post request. It looks for Create Action method with Httppost attribute which we don’t have currently.

Now, we will create a stored procedure to insert data. So, our stored procedure is.

create procedure spAddEmployees
@name nvarchar(50),
@city nvarchar(50),
@gender nvarchar(50)
as
Begin
Insert into STUDENTS (name,city,gender)
values(@name,@city,@gender)
End

The next step is, we need a method to save the data in our table. So, let's add a method in our EmployeeBusineeslayer.cs file.

public void AddEmployee(Employee employee)
  {
      string connectionString = ConfigurationManager.ConnectionStrings["Test"].ConnectionString;

      using (SqlConnection con = new SqlConnection(connectionString))
      {
          SqlCommand cmd = new SqlCommand("spAddEmployees", con);
          cmd.CommandType = CommandType.StoredProcedure;
          SqlParameter paramName = new SqlParameter();
          paramName.ParameterName = "@name";
          paramName.Value = employee.name;
          cmd.Parameters.Add(paramName);

          SqlParameter paramcity = new SqlParameter();
          paramcity.ParameterName = "@city";
          paramcity.Value = employee.city;
          cmd.Parameters.Add(paramcity);


          SqlParameter paramGender = new SqlParameter();
          paramGender.ParameterName = "@gender";
          paramGender.Value = employee.gender;
          cmd.Parameters.Add(paramGender);
          con.Open();
          cmd.ExecuteNonQuery();

      }
  }

So, this is the method as this a straightforward code. We are passing connection string name and command type in stored procedures and we are passing various parameters to it that will be inserted in the form data.
Next, we need to specify the action method, Create, and specify the attribute as httpPost as.


Here, in this, I have written FormCollection in the parameter. That means, this form collection will post all the data in the database with the help of keys. Now, we will loop through each key in the form collection object and in that, we will see what keys are we getting. So, our code will be.


Now, save the solution and run the app. Navigate to Create action method and fill the form details as.


When you click on Create, you get some keys as name, city, and gender as well. So basically, we are using these form collection object keys to retrieve the values. Now, we will write the code to insert the data in our Create action method.

Now, in this, we have created Employee object, in which, we have name, city, gender and we are specifying to the form collection keys. We are also specifying EmployeeBusinesslayer where we have AddEmployee method. This method will be called when we click on "Create" button.

So, it’s a straightforward code. Now, let’s save the app and run the solution. We will get the following.


Now, let’s fill some details and click on "Create". You will be redirected to Index because in our Create action, we have specified it as RedirectToAction .


Now, a new record has been added successfully.

Now, this is a very redundant code where there are 50 fields which we cannot specify each field in our Controller. Here, we have specified formcollection instead of formcollection. We can specify the parameter values as.

Now, the rest of the process is same. We are handling the Employee object and then redirecting to the Index action method.

 

Let’s run the app and see the output.

So, it’s working as expected. As you can see, in the highlighted section, I have added a record.

When you see the parameter, it has name, gender, and city. We haven’t specified formcollection. With the help of model binder, we are able to display and create records. That means, it has automatically mapped posted form data with the parameter which has been specified in our "Create" action method .

When you click on the Create View form and right click on that View page source, every control on this form has got a name for example.



These names are mapped to the parameters which are specified in our Create action method.

Conclusion

So, this was all about creating a View to insert data in MVC. Hope, this article was helpful!!