Home > DeveloperSection > Articles > Data Binding in View using MVC

Data Binding in View using MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 5217  View(s)
Rate this:

Data Binding in View using MVC

In this article I am going to explain how to dynamically bind View data in Model and retrieve data from Model in View through Controller.

Before building an application first we have to add the following resource in our MVC application:
1) Controller
à HomeController.cs
2) Model      
à ModelClass.cs
3) View        à
Index.aspx, UserPage.aspx

Data Binding in View using MVC

HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using FisrtMVCApp.Models;

 

namespace FisrtMVCApp.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

 

        public ActionResult Index()

        {

            return View(); //return Index View

        }

 

        [HttpPost]

        public ActionResult UserPage(ModelClass model)

        {

            return View(model); //here we are passing the view along with view data

        }

    }

}

 

 

ModelClass.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel;

 

namespace FisrtMVCApp.Models

{

    public class ModelClass

    {

        [DisplayName("Enter First Name:")]

        public string FirstName

        {

            get;

            set;

        }

 

        [DisplayName("Enter Last Name:")]

        public string LastName

        {

            get;

            set;

        }

    }

}

Index.aspx

<%@PageLanguage="C#" Inherits="System.Web.Mvc.ViewPage<FisrtMVCApp.Models.ModelClass>" %>

<!DOCTYPE html>

 

<html>

<head runat="server">

    <title>Index</title>

</head>

<body>

   <% using (Html.BeginForm("UserPage","Home",FormMethod.Post)) %><%{ %>

    <div>

        <center>

                <h2>Enter Details:</h2>

                <table style="font-family:Calibri" cellpadding="10">

                    <tr>

                        <td> <%: Html.LabelFor(m => m.FirstName) %> </td>

                        <td> <%: Html.TextBoxFor(m => m.FirstName) %> </td>

                    </tr>

                    <tr>

                        <td> <%: Html.LabelFor(m => m.LastName) %> </td>

                        <td> <%: Html.TextBoxFor(m => m.LastName) %> </td>

                    </tr>

                    <tr>

                        <td colspan="2" align="center">

                            <input type="submit" value="Submit"/>

                        </td>

                    </tr>

                       <% } %>

                </table>

        </center>

    </div>

</body>

</html>

 

UserPage.aspx

<%@PageLanguage="C#" Inherits="System.Web.Mvc.ViewPage<FisrtMVCApp.Models.ModelClass>" %>

 

<!DOCTYPE html>

 

<html>

<head runat="server">

    <title>UserPage</title>

</head>

<body>

    <div>

        <h2>Welcome! <%: Html.Label(ViewData.Model.FirstName) %> //here we retreive the   
                                         data from view, that we pass through controller

              <%: Html.Label(ViewData.Model.LastName) %></h2>

    </div>

</body>

</html>

 

Press F5 in order to run your application. Enter your First and Last name in textboxes respectively and click on submit button.

Data Binding in View using MVC

It will display your name with Welcome message.

Data Binding in View using MVC


Don't want to miss updates? Please click the below button!

Follow MindStick