Build a Single Page Application (SPA) with ASP.NETMVC

In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. 

In subsequent interactions with the page –e.g. the user navigates to a link or submits a form with data– a new request is sent to the server, and the flow starts again: the server processes the request and sends a new page to the browser in response to the new action requested by the client.

In Single-Page Applications (SPAs) the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests. This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page. The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience.

The architecture of a SPA involves certain challenges that are not present in traditional web applications. However, emerging technologies like ASP.NET Web API, JavaScript frameworks like AngularJS and new styling features provided by CSS3 make it really easy to design and build SPAs.

So, let's learn step by step so beginners can also learn how to Create Single Page Application in ASPMVC.

Step 1: Create an MVC Application.

Now let us start with a step by step approach from the creation of a simple MVC application as in the following:

1. create a New ASPMVC4 Application Named "MVCApplication35"
2. Go to File->New->Project->ASP.NET MVC4 Web Application .Then Provide the Project Name as you wish.After clicking, the following window will appear :

3. As shown in the preceding screenshot, click on the Basic template, then click OK. This will create an empty MVC web application.

Step 2: Add The Reference of  Helper Class

Now the next step is to add the reference of Dapper ORM into our created MVC Project. Here are the steps:

        Right click on Solution, find References Folder and Right click on it.

1. Select Latest Version of System.web.Helper Class.

Step 3: Add The Model class

Go to Solution Explorer ->Models->Right Click on Models->Add ->Class->(Student.cs    

 public class Student

    {

        public int Procid { get; set; } 

       public int Id { get; set; }

        public string Name { get; set; }

       public int Age { get; set; }

       public string Email { get; set; }

        public string Address { get; set; }

        public IList<Student> students { get; set; }

    }

 Step 4: Add DataLayer  class

  

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.SqlClient;

using System.Data.Entity;

namespace MvcApplication35.Models

{

    public class DataLayer:DbContext 

    {

        public DataLayer() : base("DataLayer")  { }

        public IEnumerable<Student>GetStudents(Student model)

        {

            SqlParameter []Para = new SqlParameter[]

            {

             new SqlParameter{ParameterName="@ProcId",Value=model.Procid},

            };

            string Query="Proc_Get_Students @ProcID";

            return this.Database.SqlQuery<Student>(Query, Para);

        }

    }

}

 Step 5: Add Connection string in Web Config.

  <add name="DataLayer" connectionString="Data Source=. ;Initial Catalog=test;User id=sa;Password=1" providerName="System.Data.SqlClient"/>

Step 6:  Add The Model class

Go to Solution Explorer ->Controllers->Right Click on Controllers->Add ->Controller->(HomeController.cs).

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.Entity;

using System.Web.Mvc;

using MvcApplication35.Models;

namespace MvcApplication35.Controllers

{

    public class HomeController : Controller

    {

        [HttpGet]

        public ActionResult Index()

        {

            Student model = new Student(); model.Procid = 1;

            model.students = new DataLayer().GetStudents(model).ToList();

            return View(model);

        }

        [HttpPost]

        public ActionResult Index(Models.Student S)

        {

            return View("_Index", S);

        }

    }

}

Step 7:  Add View Right Clic Anywhere within action method Body and Add View(Index.cshtml)

@model MvcApplication35.Models.Student
@{

    ViewBag.Title = "Index";

}

<h2 style="text-align:center;font-family:Algerian;">Student Registration</h2>

<div class="container">

@using (Html.BeginForm())

{

    <div class="row">

    <table class="table table-responsive table-bordered">

        <tr>

            <th>@Html.LabelFor(y => y.Name)</th>

            <td>@Html.TextBoxFor(y=>y.Name,new { @class="form-control"})</td>

        </tr>

        <tr>

            <th>@Html.LabelFor(y=>y.Age)</th>

            <td>@Html.TextBoxFor(y=>y.Age,new { @class="form-control"})</td>

       </tr>

        <tr>

            <th>@Html.LabelFor(y=>y.Email)</th>

            <td>@Html.TextBoxFor(y=>y.Email,new { @class="form-control"})</td>

        </tr>

      <tr>

            <th>@Html.LabelFor(y=>y.Address)</th>

            <td>@Html.TextBoxFor(y=>y.Address,new { @class="form-control"})</td>

      </tr>

   </table>

    </div>

    <div class="row">

        <div class="col-xs-12 col-md-4">

            <input type="submit" value="Submit" class="btn btn-success" />

        </div>

    </div>

    <br />

    <div class="row">

    @if (Model != null && Model.students.Count > 0)

    {

        @Html.Partial("_Index", Model);

    }

    </div>

}

    </div>

<script></script>