Menu
I have a backend api for my mobile app on a Asp.net Core web Api project.
I will need to show two HTML pages in the same webapi project. Is it possible to have HTML pages in web api project?
And if yes how?
875
Before using html with web api,you need to configure:
1.Startup.cs:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
//...
//Configure the app to serve static files and enable default file mapping.
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseHttpsRedirection();
app.UseMvc();
}
2.Create a wwwroot folder in your Web Api project root and Create a js folder inside of the wwwroot folder.Finally add Index.html:
Here is a working demo about Web Api with Html page:
1.Model:
public class Test
{
public int Id { get; set; }
public string Name { get; set; }
}
2.Controller:
[Route("api/[controller]")]
[ApiController]
public class TestsController : ControllerBase
{
// GET: api/Tests
[HttpGet]
public IEnumerable<Test> GetTest()
{
var model = new List<Test>() {
new Test(){Id=1,Name="aaa"},
new Test(){Id=2,Name="bbb"}
};
return model;
}
3.Html:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tbody id="todos"></tbody>
</table>
<script src="/js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
getItems();
</script>
</body>
</html>
4.site.js:
const uri = 'api/Tests';
let todos = [];
function getItems() {
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
}
function _displayItems(data) {
const tBody = document.getElementById('todos');
tBody.innerHTML = '';
data.forEach(item => {
let tr = tBody.insertRow();
let td1 = tr.insertCell(0);
let textNode1 = document.createTextNode(item.id);
td1.appendChild(textNode1);
let td2 = tr.insertCell(1);
let textNode2 = document.createTextNode(item.name);
td2.appendChild(textNode2);
});
todos = data;
}
Reference: Call an ASP.NET Core web API with JavaScript
191
Yes, you can do that.
Steps for example for Api Core project:
Microsoft.AspNetCore.Mvc.Core packageStartup.cs in ConfigureServices method, change services.AddControllers() to services.AddControllersWithViews();Add new Controller like this:
[Route("Default")]
public class HomeController : Controller
{
[Route("DownloadApp")]
public IActionResult DownloadApp()
{
//you code here
return View();
}
[Route("ResetPassword")]
public IActionResult ResetPassword()
{
//you code here
return View("Index");
}
}
DownloadApp.cshtml and ResetPassword.cshtml to Views/Home folder.Now you can see your page by following urls: Default/ResetPassword and Default/DownloadApp
27
answered Sep 21 '25 05:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With