Sure! So for your Action method pertaining to the view you would like to render you would write something basic like this.
Controllers without processes.
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
//or some model initiation if needed
public ActionResult Index(ViewModel model)
{
return View(model);
}
}
From here you can then begin to create your API controller methods as you have for your ActionResult methods the only difference are the return types. You api controller should correspond to whatever model instance your are intending to run queries against. Personally I prefer to create a model pertaining to each database abstraction ie. ContactController, AccountController and so on.
private readonly IRepository repo;
//This is a generic repository I do not know if you are using this methodology.
//but this is strictly for demo purposes.
public ValuesController(IRepository<SomeModel> repo)
{
this.repo = repo;
}
public IEnumerable<SomeModel> Get()
{
var commands = repo.GetAll();
return commands.ToList();
}
// GET api/values/5
public IQueryable<SomeModel> Get(int id)
{
var commands = repo.GetAll().AsQueryable();
return commands;
}
// POST api/values
public HttpResponseMessage Post(SomeModel model)
{
repo.Add(model);
var response = Request.CreateResponse<SomeModel>(HttpStatusCode.Created, model);
string uri = Url.Link("DefaultApi", new { id = model.Id});
response.Headers.Location = new Uri(uri);
return response;
}
// PUT api/values/5
public void Put(int id, [FromBody]string value)
{
}
// DELETE api/values/5
public void Delete(int id)
{
}
As you can see this is architect-ed from the Empty Api controller class. Lastly, you can call your api controller from whatever view you would like by running the following Jquery code.
self.get = function () {
$.ajax({
url: '/api/Values',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
//Success functions here.
}
});
}
As for your post method...
self.create = function (formElement) {
$.ajax({
url: '/api/Values',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(Command),
success: function (data) {
//Success function here.
}
}).fail(
//Fail function here.
});
The javascript here came from a knockout.js method if you need a full code snippet to see how to wrap this all together with knockout let me know! But I hope this will get you moving in the right direction!