Form data processing using MVC pattern

Sourav.Kayal
Posted by in ASP.NET MVC category on for Beginner level | Points: 250 | Views : 4145 red flag

How to process form data in MVC architecture

Process form data in MVC design pattern

In this article we will learn how to send form data to controller class using MVC pattern. Here we will create simple HTML form and will send data to controller class, and then we will display same data in another view. 

Create Model Class

At first, we will create one simple model class called “Person” for this example.  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
namespace MVC3.Models
{
    public class Person
    {
        public String Name{ get; set; }
        public StringSurname { get; set; }
    }
}
 

Create simple HTML form to take input.

It’s view in MVC architecture. We will create two textboxes and one submit button in this view. 

<%@ Page
Language="C#"
Inherits="System.Web.Mvc.ViewPage<dynamic>"
%>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>PersonView</title>
</head>
<body>
    <div>
    <form method="post" action="Person/SetPerson">
        Enter Name:- <input type="text" id="Name" name="Name" /> <br />
        Entersurname:- <input type="text" id="surname" name="surname" />
        <input type="submit" value="Submit" />
    </form>
    </div>
</body>
</html>
 

 Now, we will create simple controller to invoke the view.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC3.Models;
namespace MVC3.Controllers
{
    public class PersonController : Controller
    {
        //
        // GET: /Person/
        public ActionResult ShowForm()
        {
            return View("PersonView");
        }
        [HttpPost]
        public ActionResult SetPerson()
        {
            String Name = Convert.ToString(Request["Name"]);
            String Surname = Convert.ToString(Request["surname"]);
            Person p = new Person();
p.Name = Name;
p.Surname = Surname;
ViewData["Person"] = p;
            return View("ShowPerson");
        }
 
    }
}
 

In this controller, we are seeing two actions the ShowForm() action is the default action for Person Controller and SetPerson() action will call another view to display data. We can see within SetPerson() action,we are creating object of controller class and assigning value to it. At last we are assigning populated object to ViewData. Then we are calling one view called “ShowPerson”. This view will display data.


Create showPerson view

<%@ Page
Language="C#"
Inherits="System.Web.Mvc.ViewPage<dynamic>"
%>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>ShowPerson</title>
</head>
<body>
    <div>
    <% var P = (MVC3.Models.Person)ViewData["Person"];%>
        Person Name is :- <%= P.Name %> <br />
        Person Surname is :- <%= P.Surname %>
    </div>
</body>
</html>
 

Here is sample output



Conclusion:

Here we have learned ,how to pass form data to controller class and return back to view. Hope you have enjoy it.

 


 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)