How to make a form and insert data into database using MVC4.0 razor

Introduction:

Here in this post I will show you how to make a form (you can say a contact form containing name,email,phone no, message) and how to save the inputted value of the form into database using MVC4.0 using Razor view engine.

Description :

Previously I have shown Show data from a database table content in MVC 4.0 razor and in this post I will show you how to make a form and also save the data into db using MVC4.0.


So first create or choose an existing database and create a table named tblComment.

Now start a MVC project and choose Razor as a view engine. 

After creation of the project select the Model folder and create a class named CommentDateLayer. Its not necessary to create this class within the Modal folder. You can put this any where you want. This class will contain the method to insert the data into db. 

Before that make another class named Comment in the model folder. This class will reflect the table tblComment.

public class Comment
{
   [Required]
   public string Name { get; set; }

   [Required]
   public string Email { get; set; }

   [Required]
   [DataType(DataType.MultilineText)]
   public string Message{ get; set; }

   public int PostId { get; set; } 
}

Now in the ComentDataLayer  class add a method named AddComment.

public int AddEmplyee(Comment cmt)
{
     SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["BlogContext"].ToString());

     string sql = "INSERT INTO [mvc_demo].[dbo].[tblComment]([Name],[Email],[Message]) "+
                            " VALUES "+
                         " ('"+cmt.Name+"','"+cmt.Email+"','"+cmt.Message+"')";
     SqlCommand cmd = new SqlCommand(sql,con);
     con.Open();
     int i =cmd.ExecuteNonQuery();
     con.Close();
     return i;
}

Now its time to do operation with the Controller. The main thing to do. :)

So create a Controller class within the Controller folder named CommentController.

Add the namespace using MvcApplication1.Models; for accessing the model folder into your Controller class. If you put the classes in any other folder add that folder name as namespace.

I took Index as the ActionMethod, so there will be two Action method named Index, one HttpGet and another one HttpPost. The first one for just showing the form and second one is for getting the value after submit button click. We don't need to write any code within the first method(ie, HttpGet). But in the second method(ie, HttpPost) write down the code.

[HttpGet]
public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(FormCollection frm)
{
    Comment c = new Comment();
    c.Name = frm["Name"];
    c.Email = frm["Email"];
    c.Message = frm["Message"];
    CommentDataLayer cmnt = new CommentDataLayer();
    if (cmnt.AddEmplyee(c) == 1)
    {
        ViewBag.Status = "Submitted !";
    }
    return View();
}

FormCollection is an inbuilt class for this you can follow this link.

Now create the View part. To create the View right click on the Action Method and keep the name as it is. Just one change you have to do. Check the Create Strongly typed view and choose Comment as your Modal class. Now click on the Add  button to make your View.

In the view we have to make form first. To create a form we have to use Html.BeginForm() and within that you have to put labels, textboxes and buttons.

So lets create our own form.

@if (!string.IsNullOrEmpty(ViewBag.Status))
{
    
}

@using (Html.BeginForm())
{
   @Html.LabelFor(model => model.Name)
   

   @Html.EditorFor(model => model.Name)
   @Html.ValidationMessageFor(model => model.Name)
   


   @Html.LabelFor(model => model.Email)
   

   @Html.EditorFor(model => model.Email)
   @Html.ValidationMessageFor(model => model.Email)
   


   @Html.LabelFor(model => model.Message)
   

   @Html.EditorFor(model => model.Message)
   @Html.ValidationMessageFor(model => model.Message)
   
}

All the classes are ready. Form is ready now what are you waiting for? Run the project and test it.

Arkadeep De

asp-arka.blogspot.in

Facebook | LinkedIn | Twitter

If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS Subscribe by Email