https://github.com/stavroskasidis/razorsharpjs
Create Single Page Applications (SPAs) using C# controllers and Razor engine views
https://github.com/stavroskasidis/razorsharpjs
Last synced: 7 months ago
JSON representation
Create Single Page Applications (SPAs) using C# controllers and Razor engine views
- Host: GitHub
- URL: https://github.com/stavroskasidis/razorsharpjs
- Owner: stavroskasidis
- License: apache-2.0
- Created: 2016-02-02T21:59:50.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-25T13:16:36.000Z (almost 9 years ago)
- Last Synced: 2024-10-06T09:22:56.388Z (about 1 year ago)
- Language: C#
- Homepage: http://akiragtx.github.io/RazorSharpJS/
- Size: 476 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RazorSharpJS - v1.0-alpha
Create Single Page Applications (SPA) using ASP.Net MVC and Razor engine views (.cshtml)
# Description
RazorSharpJS is a javascript library that allows you to use ASP MVC controllers and views to create Single Page applications or to easily convert an existing ASP MVC application into one.
# How it works ?
RazorSharpJS hooks into your page's DOM using javascript, handles anchors and form submits and converts them into ajax calls.
# Tutorial
### 1. Create a main entry point
Create a controller that has the action that will be the main entry point of your application. This action will be the **only one** that does not return a partial view.
**Controllers\ApplicationStartController.cs**
```C#
public class ApplicationStartController : Controller
{
public ActionResult Main()
{
return View();
}
}
```
**App_Start\RouteConfig.cs**
```C#
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "ApplicationStart", action = "Main", id = UrlParameter.Optional }
);
}
}
```
### 2. Create the main view
Create the main view that will serve as a layout for our other views and add the script for jquery (prerequisite) and razorsharp.js. Notice the `rs-body` directive. This directive instructs RazorSharpJS that the decorated element will be the placeholder for our views.
**Views\ApplicationStart\Main.cshtml**
``` html
@Scripts.Render("~/bundles/jquery") @*jquery is required*@
...
@Html.Partial("../Home/Index")
...
```
### 3. Adding links to navigate to your website
You can now start adding links to your other controllers and views and use the full power and features of ASP MVC, all you have to do is prefix your urls with '/#' (or use the provided extensions) and razorsharp will automatically convert them to Ajax calls to your controllers. Just remember to always return parial views on your other controllers !
##### The html way
``` html
Home
```
##### The Razor way, using the provided extensions (recommended)
``` c#
@Html.RazorSharpActionLink("Home", "Index", "Home")
```
#### 3.1. Creating a menu
**Views\ApplicationStart\Main.cshtml**
``` html
...
...
...
```
**Controllers\HomeController.cs**
``` c#
public class HomeController : Controller
{
public ActionResult Index()
{
return PartialView();
}
public ActionResult About()
{
return PartialView();
}
public ActionResult Contact()
{
return PartialView();
}
}
```
### 4. Adding forms
You can add forms to your application and let razorsharp handle them by decorating them with the `rs-form` directive.
##### The html way
``` html
...
```
##### The Razor way, by using the provided extensions (recommended)
``` c#
@using (Html.BeginRazorSharpForm("Create", "UsersAdmin", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
...
}
```
### 5. Redirecting from a controller
To redirect to an other action from your controller you will have to use the provided extension methods.
``` c#
return RazorSharpRedirect.RedirectToAction("Login");
```
### 6. Using Authorization
To use the ASP's authorization in combination with razorsharp you will have to use the provided authorization attribute (or use it as the base class if your have custom authorization attributes).
##### Using a default login path and the attribute
``` c#
public partial class Startup
{
public void ConfigureAuth(IAppBuilder app)
{
RazorSharpConfiguration.LoginUrl = "/Account/Login";
...
```
``` c#
[RazorSharpAuthorize]
public class UsersAdminController : Controller
{
...
```
##### Setting the login path at the attribute
``` c#
[RazorSharpAuthorize("/Account/Login")]
public class UsersAdminController : Controller
{
...
```
### 7. Client-side events
You have access to some client side events, so that for example you can show a loading animation or prevent an action from executing.
``` js
RazorSharp.Events.OnBeforeActionExecuted = function (eventArgs) {
$(".spinner").show();
}
RazorSharp.Events.OnAfterActionExecuted = function (eventArgs) {
$(".spinner").hide();
}
```