python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language

single page application mvc 4 example

Single Page Application (SPA) is new feature; SPA concept is implementing using MVC 4.

Single Page Application means, more than one view are partially render on the single master view, this concept is known as SinglePage Application.

Single Page Application concept is use to developing to small applications not more complex applications.












Index.cshtml 

@model Mvc4SinglePageApplication.Models.LoginModel
@{
    ViewBag.Title = "My Todo List";
}
@functions{
    public string GetAntiForgeryToken()
    {
        string cookieToken, formToken;
        AntiForgery.GetTokens(null, out cookieToken, out formToken);
        return cookieToken + ":" + formToken;                
    }
}

<header>
    <h1>@ViewBag.Title</h1>
</header>

<div id="main-content">
@if (@User.Identity.IsAuthenticated)
{
    <p class="error" data-bind="text: error"></p>
    <input id="antiForgeryToken" type="hidden" value="@GetAntiForgeryToken()" />
    <button data-bind="click: addTodoList">Add Todo list</button>

    <section id="lists" data-bind="foreach: todoLists, visible: todoLists().length > 0">
        <article class="todoList">
            <header>
                <form data-bind="validate: true">
                    <input class="required" data-bind="value: title, selected: isEditingListTitle, blurOnEnter: true" />
                </form>
            </header>

            <a href="#" class="deletelist" data-bind="click: $parent.deleteTodoList">X</a>

            <ul data-bind="foreach: todos">
                <li>
                    <input type="checkbox" data-bind="checked: isDone" />
                    <input class="todoItemInput" type="text" data-bind="value: title, disable: isDone, blurOnEnter: true" />
                    <a href="#" data-bind="click: $parent.deleteTodo">X</a>
                    <p class="error" data-bind="visible: errorMessage, text: errorMessage"></p>
                </li>
            </ul>

            <form data-bind="submit: addTodo">
                <input class="addTodo" type="text" data-bind="value: newTodoTitle, placeholder: 'Type here to add', blurOnEnter: true, event: { blur: addTodo }" />
            </form>

            <p class="error" data-bind="visible: errorMessage, text: errorMessage"></p>
        </article>
    </section>
}
else
{
    <div class="todoList" id="loginPanel">
        <section id="localLoginPanel">
            <h2>Log in</h2>
            @Html.Partial("_Login")
        </section>
        <section id="socialLoginPanel">
            <h2>Log in using another service</h2>
            @Html.Action("ExternalLoginsList", "Account", new { ReturnUrl = ViewBag.ReturnUrl })
        </section>
        <p>First time here? <a id="showRegister">Sign up</a></p>
    </div>
    <div class="todoList" id="registerPanel">
        <h2>Sign up</h2>
        @Html.Partial("_Register")
        <p>Already signed up? <a id="showLogin">Log in</a></p>
    </div>
}
</div>

@if (@User.Identity.IsAuthenticated)
{
    @section scripts {
        @Scripts.Render("~/bundles/knockout")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/todo")
    }
}

Index Controllers code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Mvc4SinglePageApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(string returnUrl)
        {
            ViewBag.ReturnUrl = returnUrl;
            return View();
        }
    }
}

Login Controllers code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Transactions;
using System.Web.Mvc;
using System.Web.Security;
using DotNetOpenAuth.AspNet;
using Microsoft.Web.WebPages.OAuth;
using WebMatrix.WebData;
using Mvc4SinglePageApplication.Filters;
using Mvc4SinglePageApplication.Models;

namespace Mvc4SinglePageApplication.Controllers
{
    [Authorize]
    [InitializeSimpleMembership]
    public class AccountController : Controller
    {
        [AllowAnonymous]
        [HttpPost]
        public JsonResult JsonLogin(LoginModel model, string returnUrl)
        {
            if (ModelState.IsValid)
            {
                if (WebSecurity.Login(model.UserName, model.Password, persistCookie: model.RememberMe))
                {
                    FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
                    return Json(new { success = true, redirect = returnUrl });
                }
                else
                {
                    ModelState.AddModelError("", "The user name or password provided is incorrect.");
                }
            }

            // If we got this far, something failed
            return Json(new { errors = GetErrorsFromModelState() });
        }

    }
}

Register Controllers code

[HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public ActionResult JsonRegister(RegisterModel model, string returnUrl)
        {
            if (ModelState.IsValid)
            {
                // Attempt to register the user
                try
                {
                    WebSecurity.CreateUserAndAccount(model.UserName, model.Password);
                    WebSecurity.Login(model.UserName, model.Password);

                    InitiateDatabaseForNewUser(model.UserName);

                    FormsAuthentication.SetAuthCookie(model.UserName, createPersistentCookie: false);
                    return Json(new { success = true, redirect = returnUrl });
                }
                catch (MembershipCreateUserException e)
                {
                    ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
                }
            }

            // If we got this far, something failed
            return Json(new { errors = GetErrorsFromModelState() });
        }





ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions