How MVC endpoint can fetch data without refreshing the page

Question

I'm working on a small project, and with a lack of experience, I came to a huge wall and am not sure how to continue.

The project is founded on .NET 6.0. A new module is required to be developed. One endpoint should insert the data into the database, and the other endpoint to fetch the new data/requests.
If I do this regular way (public IActionResult NameOfEndp()) in order to fetch the new records I have to refresh the page. How, can I fetch the new data without refreshing the page?

If I make the endpoints -ASYNC- it will solve the problem?

Thank you in advance

Answer 1

Hi @Game Warden ,

If I do this regular way (public IActionResult NameOfEndp()) in order to fetch the new records I have to refresh the page. How, can I fetch the new data without refreshing the page?

You can use partial view to list the records and use JQuery Ajax to refresh it, and you can also use JQuery Ajax to perform CRUD operations in asp.net core MVC.

Refer to the following sample:

Create a Customer model and CustomerView model:

public class Customer  //database entity  
{  
    public int CustomerId { get; set; }  
    public string CustomerName { get; set; }  
    public string Description { get; set; }  
}  

public class CustomerViewModel //used to transfer data between view and controller  
{  
    public string Name { get; set; }  
    public string Descriptsion { get; set; }  
}  

Then, enable migration and add the Customer table in the database, using the ApplicationDbContext.

Controller:

Code in the Index.cshtml:

The partial view looks like:

You can view the Controller code, Index.cshtml and the Partail view code from here: 261197-sourcecode.txt

The result like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

Hi Dillion, thank you for the time to elaborate the idea. At the moment I'm doing this kind of solution with Axios, however, I will need two endpoints for different views.

1. The first view to add data, similar to your idea
2. The second view to fetch

example:
public IActionResult Dashboard(){

    List<Requests> listOfRequests = _dbContext.Requests.ToList();  
    return View(listOfRequests);  

}

public IActionResult Home(){

    return View();  

}

[HttpPost]
public IActionResult([FromBody] Request req){
if(ModelState.isValid){
_dbContext.Requests.Add(new Request { .........})
_dbContext.SaveChanges();
}
}

As you can see there will be a default view "Home" where the user can fulfill the form, and when this form is posted, "Dashboard" view to fetch this data without refresh.

I hope I'm more clear now, thank you!

Answer 3

Well, the title is 'fetch data without refreshing the page', although the JS timer would send too many requests to the server. I found the solution for the problem - signalR -