Crispy 1.0.5

.NET Standard 2.0
dotnet add package Crispy --version 1.0.5
NuGet\Install-Package Crispy -Version 1.0.5
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Crispy" Version="1.0.5" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Crispy --version 1.0.5
#r "nuget: Crispy, 1.0.5"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install Crispy as a Cake Addin
#addin nuget:?package=Crispy&version=1.0.5

// Install Crispy as a Cake Tool
#tool nuget:?package=Crispy&version=1.0.5

Crispy

This library makes it relatively easy to call backend functions from javascript. Gone are the days of worrying about http methods, urls and whatnot. Just create your controllers with methods and call them as any other function from javascript.

There is a console project that calls it on the values controller. For bigger projects it's recommended to use a console project and generate the API wrappers. Configure it to be used as a build step or something.

There is also an example Web API project where it's used to generate javascript wrappers. This is most suitable for experimentation, weekend projects, school projects and other small stuff.

K, how do I use?

Step 1: Generate JS for your API

Crispy library project contains the JsGenerator. That's what you need. You can create an API endpoint which serves the javascript to be used in your frontend application.

using Crispy;
using Microsoft.AspNetCore.Mvc;
using System.Reflection;

namespace ApiTest.Controllers
{
    [Route("api/[controller]")]
    public class CrispyController : Controller
    {
        [HttpGet]
        public ContentResult GetApiDefinition()
        {
            // create generator instance
            var generator = new JsGenerator()
                // and configure it
                .UseModuleType(ModuleLoaderType.GlobalVariable)
                .UseVariableName("api")
                // .UseTypescript(new TsOptions()) // uncomment to generate types
                .UsePrettyPrint();

            // get assembly of web project
            var assembly = typeof(CrispyController).GetTypeInfo().Assembly;

            // generate some js
            var javascript = generator.GenerateSingleFile(assembly, "ApiTest.Controllers");

            // all done
            return Content(javascript, "application/javascript");
        }
    }
}

Step 2: Implement API for application logic

Here we have an example Http API controller for a simple todo list. We'll use it in this example. Note that we care about function names. Put the attributes so that you have control how parameters are sent. (current version only works if you use these attributes)

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace ApiTest.Controllers
{
    [Route("api/[controller]")]
    public class TodoController : Controller
    {
        static IList<String> list = new List<String>(){ "buy milk", "do homework" };

        [HttpGet]
        public IEnumerable<string> GetAll()
        {
            return list;
        }

        [HttpPost]
        public void Add([FromBody]string value)
        {
            list.Add(value);
        }
    }
}

Step 3: Use the C# methods in your JS code

That's all, we can call the backend code with api.todo.getAll() and api.todo.add(item), easy!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My Todo List</title>
    <script src="api/crispy"></script>
</head>
<body>
    <h1>My Todo List:</h1>
    <ul id="my-todo"></ul>
    <form id="my-todo-add">
        <input class="item-text" type="text" name="todoItem" value=""/>
        <input type="submit"/>
    </form>
    <script>
        // render todo items from C#
        function reloadTodo() {
            api.todo.getAll().then(function (data) { // get all todo items from C#
                var container = document.querySelector('ul#my-todo');
                container.innerHTML = ''; // clear
                for (var i = 0; i < data.length; i++) {
                    // render each item
                    var item = document.createElement('li');
                    item.textContent = data[i];
                    container.appendChild(item);
                }
            });
        }
        // event handler for creating todo 
        document.querySelector('form#my-todo-add').addEventListener('submit', function (event) {
            event.preventDefault();
            var value = event.target.querySelector('input.item-text').value;
            api.todo.add(value).then(reloadTodo); // call C# method
            return false;
        });
        // initialize
        reloadTodo();
    </script>
</body>
</html>

If you're using an API project, you might want to include the static file module so that you can serve the html from above. Don't forget to add app.UseStaticFiles(); into your Startup.cs.

K, but this doesn't do XYZ

This project is still at the very beginning so a lot of features are missing. Plans are to:

- framework to expose C# methods via Crispy instead of regular API controllers, 
this way you don't need to write Http controllers anymore, just regular C# classes.
- support both .net Core and classic .net
- role based api generation, only show functions that are accessible from users role
- convert DateTime to proper JS dates inside objects
- example codes, improve usability, offer quick ways to integrate into existing project
- future generator options:
    - choice between promises or callbacks
    - support AMD, CommonoJS or custom global mount point
    - support for newer / older JS syntax

How can I help

Well please open an issue first so we can discuss what improvements you need. Ofc feel free to fork, if you do something useful, create a pull request.

License?

The Unlicense, as free as possibly possible.

Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows
.NET Core netcoreapp2.0 netcoreapp2.1 netcoreapp2.2 netcoreapp3.0 netcoreapp3.1
.NET Standard netstandard2.0 netstandard2.1
.NET Framework net461 net462 net463 net47 net471 net472 net48
MonoAndroid monoandroid
MonoMac monomac
MonoTouch monotouch
Tizen tizen40 tizen60
Xamarin.iOS xamarinios
Xamarin.Mac xamarinmac
Xamarin.TVOS xamarintvos
Xamarin.WatchOS xamarinwatchos
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.5 285 9/29/2021
1.0.4 434 11/7/2020
1.0.3 387 11/7/2020
1.0.2 319 11/5/2020
1.0.1 312 10/28/2020
1.0.0 308 10/22/2020
0.4.7 582 4/3/2019
0.3.6 532 2/22/2019