Various Ways Of Form Submission In ASP.NET MVC - Part One

INSERT INTO tblFriends (FriendName, CompanyName, Email) 
VALUES ('Suhana Kalla', 'Kalla Infotech', '[email protected]');
INSERT INTO tblFriends (FriendName, CompanyName, Email) 
VALUES ('Ashish Kalla', 'AK Infotech', '[email protected]');
INSERT INTO tblFriends (FriendName, CompanyName, Email) 
VALUES ('Manoj Kalla', 'Durga Consultancy', '[email protected]');
INSERT INTO tblFriends (FriendName, CompanyName, Email) 
VALUES ('Ganesh Vyas', 'Vyas Infoline', '[email protected]');
INSERT INTO tblFriends (FriendName, CompanyName, Email) 
VALUES ('Rajesh Garg', 'Garg Infosys', '[email protected]');

Start Visual Studio 2015 or 2017, I am using Visual Studio Community 2015.

Select File --> New -->Project

Image No.1. (create a new project called “MVC-BeginForm”)

As you can see the new project created is named “MVC-BeginForm”.

Image No.2. (create a new project called “MVC-BeginForm”)

First Open Web.Config set Database connection string as follows.

<connectionStrings>
    <add name="MBKTest" 
         connectionString="Data Source=(localdb)\MBK;Initial Catalog=MBKTest;Integrated Security=True;" 
         providerName="System.Data.SqlClient" />
</connectionStrings>

Now switch to Solution Explorer by pressing [CTRL+R] or clicking on VIEW --->Solution Explorer.

Insert Package of Entity Framework

Now again right click on the project

File Name: MBKTestContext and click on the ADD button.

using MVC_BeginForm.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
namespace MVC_BeginForm
{
    public class MBKTestContext : DbContext
    {
        public MBKTestContext() : base("MBKTest")
        {
        }

        public DbSet<tblFriend> Friends { get; set; }
    }
}

Added namespace System.Data.Entity, MVC_BeginForm.Models because DbContext derived from System.Data.Entity and tblFriend derived from MVC_BeginForm.Models

using System.Data.Entity;
using MVC_BeginForm.Models;

Now click on the MODELS folder and right-click select ADD ---> Class called boyfriend

Code Of boyfriend.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace MVC_BeginForm.Models
{
    public class tblFriend
    {
        [Key]
        public int FriendID { get; set; } 
        public string FriendName { get; set; }
        public string CompanyName { get; set; }
        public string Email { get; set; }
    }
}

Now switch back to MBKContext.cs

Add the following namespace MVC_BeginForm.Models

using MVC_BeginForm.Models;

Double click on Controller Folder then select double click on HomeController.

Add the following code to the file.

[HttpGet]
public ActionResult FriendDetail()
{
    return View();
}
[HttpPost]
public ActionResult FriendDetail(tblFriend _friend)
{
    return View();
}

Now build your project by clicking on the Project name MVC_BeginForm

Now switch back to HomeController’s FriendDetail method right click and select the ADD VIEW option

You can see in VIEWS--->HOME--->FriendDetail.cshtml file has been created.

Now switch back to HomeController again and add the following namespace,

Now, check your database’s table for more details.

You can see Record No.6 is added successfully.

FAST RECAP AND CODES

Here are all the important file names and codes

1. Web.Config: Connection String updated

   <connectionStrings>
       <add name="MBKTest" 
            connectionString="Data Source=(localdb)\MBK;Initial Catalog=MBKTest;Integrated Security=True;" 
            providerName="System.Data.SqlClient" />
   </connectionStrings>
   

2. tblFriend.cs: Inside the model folder, we created a class file and created a property as same as mentioned in table tblFriends.

   using System;
   using System.Collections.Generic;
   using System.ComponentModel.DataAnnotations;
   using System.Linq;
   using System.Web;
   namespace MVC_BeginForm.Models
   {
       public class tblFriend
       {
           [Key]
           public int FriendID { get; set; }
           public string FriendName { get; set; }
           public string CompanyName { get; set; }  
           public string Email { get; set; }
       }
   }
   

3. FriendDetail.cshtml

   @model MVC_BeginForm.Models.tblFriend
   @{
       ViewBag.Title = "FriendDetail";
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
   <h2>FriendDetail</h2>
   @using (Html.BeginForm())
   {
       @Html.AntiForgeryToken()
       <div class="form-horizontal">
           <h4>tblFriend</h4>
           <hr />
           @Html.ValidationSummary(true, "", new { @class = "text-danger" })
           <div class="form-group">
               @Html.LabelFor(model => model.FriendName, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   @Html.EditorFor(model => model.FriendName, new { htmlAttributes = new { @class = "form-control" } })
                   @Html.ValidationMessageFor(model => model.FriendName, "", new { @class = "text-danger" })
               </div>
           </div>
           <div class="form-group">
               @Html.LabelFor(model => model.CompanyName, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   @Html.EditorFor(model => model.CompanyName, new { htmlAttributes = new { @class = "form-control" } })
                   @Html.ValidationMessageFor(model => model.CompanyName, "", new { @class = "text-danger" })
               </div>
           </div>
           <div class="form-group">
               @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                   @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
               </div>
           </div>
           <div class="form-group">
               <div class="col-md-offset-2 col-md-10">
                   <input type="submit" value="Create" class="btn btn-default" />
               </div>
           </div>
       </div>
   }
   <div>
       @Html.ActionLink("Back to List", "Index")
   </div>
   @section Scripts {
       @Scripts.Render("~/bundles/jqueryval")
   }

4. HomeController.cs: Default Controller file where we had created ActionMethods called
   • FriendDetail that is HTTPGET method.
   • FriendDetailan is an HTTP POST method that we had written core saving a new record in the tblFriends table of the MBKTest database

     [HttpGet]
     public ActionResult FriendDetail()
     {
         return View();
     }
     [HttpPost]
     public ActionResult FriendDetail(tblFriend _friend)
     {
         MBKTestContext db = new MBKTestContext();
         db.Friends.Add(_friend);
         db.SaveChanges();
         return View();
     }
     

5. MBKTestContext.cs: Context file which interacts with the database.

   using MVC_BeginForm.Models;
   using System;
   using System.Collections.Generic;
   using System.Data.Entity;
   using System.Linq;
   using System.Web;
   namespace MVC_BeginForm
   {
       public class MBKTestContext : DbContext
       {
           public MBKTestContext() : base("MBKTest")
           {
           }
           public DbSet<tblFriend> Friends { get; set; }
       }
   }
   

Happy Coding.