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

There are various types of techniques to submit a form in ASP.NET MVC. This is a series of 4 articles where you will learn various ways of form submission while working in ASP.NET MVC.

 

This article will increase your knowledge not only for Form Submission but also about the basic terminology of ASP.NET MVC Forms.

 

Flow of article

 

In this article, you will learn the following concepts.

• What is Form Submit?
• How many ways to submit the Form?
• Short Notes on various ways of Form Submission.
• What is @Html.BeginForm?
• Syntax of @Html.BeginForm?
• Explanation of various overloaded method of Html.BeginForm.
  • What is RouteValues?
  • What is HtmlAttributes?
  • What is FormMethod?
• Task
• Step by Step Implementation of @Html.BeginForm
  (We will do a POST with @Html.BeginForm)

• Fast Recap.

What is Form Submit (Submission)?

 

The user fills in the form/page and sends the entered details to the server. In the end, we want information; and the user details should be saved on the server.

 

How many ways are there to submit a Form in ASP.NET MVC

 

Following are the ways to submit the form.

• @Html.BeginForm with hard-code Action.
• @Ajax.BeginForm with hard-code Action.
• HTML Input Submit Button using FormAction, FormMethod attributes.
• Using jQuery set form Action property.
• Using jQuery AJAX with FormData.
• Using jQuery AJAX with serializeFormJSON.

Short Notes

 

@Html.BeginForm

 

BeginForm is an extension method of @HtmlHelper class and used for creating, rendering the form tag in HTML.

 

For more detail visit this link.

 

@Ajax.BeginForm

 

BeginForm is an extension method of @AjaxHelper classes and used for creating, rendering the form tag in HTML. @Ajax.BeginForm Helper method submits the form asynchronously using JavaScript.

 

For more detail visit the link.

 

HTML Submit Button using FormAction, FormMehod

 

This FormAction attribute is new in HTML5 using INPUT type “submit”. FormMethod attribute is where we can define the method of submission “POST” or “GET”.

 

For more detail visit this link.

 

Using jQuery set form Action property

 

We can change action property using jQuery and submit the form on the desired action.

 

For more detail visit this link.

 

Using jQuery AJAX with FormData

 

We can submit the Form using jQuery Ajax with FormData. It's a very simple and fast way to submit the form. FormData is used to create an object and pass the form data. This method or way is not good for more fields forms because we have to assign manually the value of form control to FormData object and property.

 

For more detail visit this link.

 

Using jQuery AJAX with serializeFormJSON

 

Using serializeFormJSON will auto pick the value and generate the object that we can get in the POST action method.

 

What is @Html.BeginForm?

 

BeginForm is @Html helper method is used to render FormTag as well as to post data from view (Form Data ) to controller.

 

@Html.BeginForm reduced our work -- you have to just specify your ACTION, CONTROLLER and TYPE OF METHOD.

 

For using this System.Web.Mvc namespace and System.Web.Mvc.dll file are required. By default, in all MVC projects, System.Web.Mvc namespace is already used. @Html helper method is derived from System.Web.Mvc.

 

 

In the above image, you can see HTMLHELPER derived from System.Web.Mvc.

 

Syntax of @Html.BeginForm?

 

@Html.BeginForm()

 

There are a total of 13 overloaded ways to use and implement @Html.BeginForm.

 

In most projects, I used the following overloaded way.

• @Html.BeginForm(“ActionMethod”,”CotrollerName”)
• @Html.BeginForm(“ActionMethod”,”CotrollerName”,”FormMethod”)
• @Html.BeginForm(“ActionMethod”,”CotrollerName”,”RouteValues”,”FormMethod”)
• @Html.BeginForm(“ActionMethod”,”CotrollerName”,”FormMethod”,”HtmlAttributes”)

How does  @Html.BeginForm work?

 

@Html.BeginForm posts the form to the server.

 

Type1

 

@using @Html.BeginForm()

{

}

 

Above goes to same action method name but on the POST side.

 

Type2

 

@Html.BeginForm(“ActionMethod”,”CotrollerName”,”FormMethod”) :

 

This example form is called “ActionMethod” of “ControllerName” with specific “FormMethod”.

 

E.g.
@Html.BeginForm(“detail”,”EmployeeController”,FormMethod.Post)

 

What is RouteValues?

 

Which data travel along with ActionMethod and Controller.

E.g.

http://www.maonjbkalla.weebly.com/courses

 

(In above URL, you can see there are no route values)

 

E.g.

http://www.maonjbkalla.weebly.com/courses/1

 

(In above url you can see 1 is routevalues)

 

Routevalues accepted by actionmethod.

 

What is HtmlAttributes?

 

We can add HtmlAttributes in @Html.BeginForm. HTML attribute like ID, CLASS, STYLE etc.

 

Syntax

@Html.BeginForm( action, controller, FormMethod, htmlAttributes )

 

E.g

@Html.BeginForm( "employeelist", "employee", FormMethod.Post, new { id=”formid” })

 

What is FormMethod?

 

FormMethod is a command which executes form as POST or GET. FormMethod made HTTP request either in GET or POST form.

 

E.g
@Html.BeginForm( "Login", "Home", FormMethod.Post, new { id=”formname” })

 

Task

 

We have to create the following screen and send entered data to the server and store into a database table.

 

 

We will be do the following to complete the task,

1. Create Table called tblFriends.
2. Create Asp.Net MVC Project.
3. Create Code First Entity Framework dbContext classes.
4. Create Model FriendModel.
5. Create an ActionMethod called “FriendDetail” inside HomeController.
6. Create view called “FriendDetail”

Step by Step Implementation of @Html.BeginForm

 

Table Structure 

CREATE TABLE [dbo].[tblFriends](
    [FriendID] [int] IDENTITY(1,1) NOT NULL,
    [FriendName] [varchar](100) NULL,
    [CompanyName] [varchar](100) NULL,
    [Email] [varchar](200) NULL,
PRIMARY KEY CLUSTERED
(
    [FriendID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

Insert Query Sample Records

insert tblFriends (FriendName,CompanyName,Email) Values('Suhana Kalla','Kalla Infotech','[email protected]')

insert tblFriends (FriendName,CompanyName,Email) Values('Ashish Kalla','AK Infotech','[email protected]')

insert tblFriends (FriendName,CompanyName,Email) Values('Manoj Kalla','Durga Consultancy','[email protected]')

insert tblFriends (FriendName,CompanyName,Email) Values('Ganesh Vyas','Vyas Infoline','[email protected]')

insert 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.01 -- (create a new project called “MVC-BeginForm”)

 

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

 

 

Image No.01 -- (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 click on VIEW --->Solution Explorer.

 

Insert Package of Entity Framework

 

 

 

Now again right click on project

 

 

 

File Name : MBKTestContext and click on 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 MODELS folder and right click select ADD ---> Class called tblFriend

 

 

Code Of tblFriend.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 following code into file.

[HttpGet]
        public ActionResult FriendDetail()
        {

            return View();
        }

        [HttpPost]
        public ActionResult FriendDetail(tblFriend _friend)
        {

            return View();
        }

Now build your project by right click on Project name MVC_BeginForm

 

Now switch back to HomeController’s FriendDetail method right click and select 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 important files name 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 had 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.

• FriendDetail that is HTTPPOST method where we had written code of saving a new record in tblFriends table of 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. . .