Send and receive data in controller from Static files without binding to model

Question

I need to send/receive data to/from C# API without using a model.

I've for testing purposes, the below JS:

fetch('/login', {
     method: 'post',
     body: JSON.stringify({
         email: 'hasan@gmail.com', //document.getElementById('email').value
         pswd: '1234' //document.getElementById('answer').value
     })
})
.then(function(response) {
  return response.text();
  // return response.json();
}).then(function(text) { 
  // console.log(text); 
});

where I need to send the username and password, and need the server to send back some confirmations.

The Controller used in C# is:

[Route("/login")]
public class FetchController
{
    [HttpPost]
    public async Task Post(String loginParam)
    {
         if (loginParam != null)
           {
            Console.WriteLine("Login Data Recieved");
           }
           else
           {
           Console.WriteLine("Login Data is NULL");
          }
        Console.WriteLine(loginParam);
        var response = _httpContextAccessor.HttpContext.Response;
        response.Headers.Add("Content-Type", "text/event-stream");
        response.StatusCode = 200;
            await response
                .WriteAsync($"user logged in at {DateTime.Now}\r\r");   
            response.Body.Flush();
    }
}

Here I keep getting the Login data is NULL, I know this is as I did not bind the login data to Model class, so how can I make the above working WITHOUT using MODEL binding

Answer 1

Note that you must match parameter name, and try to mark the param as [FromBody], since the webapi will try to read that as fromUrl.

Here is a working sample:

Javascript/JQuery

    function callFnc() {
        var loginParam = JSON.stringify({ email: 'hasan@gmail.com', pswd: '1234' });
        $.post("/Fetch/login", { loginParam : loginParam })
              .done(function (data) {
                  alert("Data Loaded: " + data);
              });
    }

C#

    [HttpPost]
    public ActionResult Login(string loginParam)
    {
        if (loginParam != null)
        {
            Console.WriteLine("Login Data Recieved");
        }
        else
        {
            Console.WriteLine("Login Data is NULL");
        }
        Console.WriteLine(loginParam);
        return new JsonResult() { Data = "Ok" };
    }

Here is the result:

ps: the sample is in mvc instead of webapi, however they are similar

Edit with Fetch

Note: Your problem in here is not in c#, it is all in fetch APi, if you can, get rid of it.

Here is an Example I made using Fetch,

Javascript

    function useFetch() {
        var loginParam = JSON.stringify({ email: 'hasan@gmail.com', pswd: '1234' });
        fetch('/Home/login', {
            method: 'post',
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
            body: loginParam
        });
    }

C#

    [HttpPost]
    public JsonResult Login([FromBody]object loginParam)
    {
        if (loginParam != null)
        {
            Console.WriteLine("Login Data Recieved");
        }
        else
        {
            Console.WriteLine("Login Data is NULL");
        }
        Console.WriteLine(loginParam);
        return Json("OK");
    }

Result

and Project

Answer 2

Though I accepted E.B. answer, I just liked to re-write the full working code below, as it could be helpfull for some one in the future:

project.json:

{
  "version": "1.0.0-*",
  "buildOptions": {
    "debugType": "portable",
    "emitEntryPoint": true
  },
  "dependencies": {
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
    "Microsoft.AspNetCore.Mvc": "1.0.1",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0",
    "Microsoft.AspNetCore.Cors":"1.0.0"
  },
  "frameworks": {
    "netcoreapp1.0": {
      "dependencies": {
        "Microsoft.NETCore.App": {
          "type": "platform",
          "version": "1.0.1"
        }
      },
      "imports": "dnxcore50"
    }
  }
}

Program.cs:

using System.IO;  // for Directory
using Microsoft.AspNetCore.Hosting;  // for WebHostBuilder()

namespace ApiCall
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var host = new WebHostBuilder()
                .UseKestrel()
                .UseContentRoot(Directory.GetCurrentDirectory())
                .UseStartup<Startup>()
                .Build();

            host.Run();
        }
    }
}

Startup.cs:

using Microsoft.AspNetCore.Builder;   // for IApplicationBuilder and FileServerOptions
using Microsoft.AspNetCore.Hosting;  // for IHostingEnvironment
using Microsoft.Extensions.DependencyInjection;  // for IServiceCollection

namespace ApiCall
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();  // to be accesssed from external sites, i.e. outside the server
            // Add framework services.
            services.AddMvc();   // to use Controllers
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
                app.UseFileServer();  // to be accessed from files in the server inside wwwroot folde
                app.UseCors(builder =>   // to be accesssed from external sites, i.e. outside the server
                        builder.AllowAnyOrigin()
                               .AllowAnyHeader()
                               .AllowAnyMethod()
                               .AllowCredentials()
                        );

            app.UseMvc();
        }
    }
}

Controllers / FetchController.cs:

using System;    // for Console.WriteLine
using Microsoft.AspNetCore.Mvc;  // for Controller, [Route], [HttpPost], [FromBody], JsonResult and Json 

namespace ApiCall.Controllers
{
    [Route("api/[controller]")]
    public class FetchController : Controller
    {
        // POST api/values
        [HttpPost]
        public JsonResult Post([FromBody]object loginParam)
        {
            Console.WriteLine(loginParam);
            return Json(loginParam);
        }

    }
}

wwwroot / index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h2>
        Test page for using ajax call in webapi core.
    </h2>
    <button id="btnUseFetch" onclick="useFetch()" class="btn btn-danger">Use Fetch</button>

    <script type="text/javascript">
        function useFetch() {
            var loginParam = JSON.stringify({ email: 'hasan@gmail.com', pswd: '1234' });
            fetch('/api/Fetch', {  // or 'http://localhost:5000/api/Fetch' in external file
                method: 'post',
                headers: new Headers({
                    'Content-Type': 'application/json'
                }),
                body: loginParam
            }).then(function(response) {
                return response.json();
            }).then(function(returnedValue) {
                var asdf = returnedValue;
                console.log(asdf);
            }).catch(function (err) {
                console.log(JSON.stringify(err));
            });
        }
    </script>
</body>
</html>