ASP.NET MVC and WebAPI inserting and retriveing records with database table

Question

I am currently using ASP.NET to create a web page.

I have a page at the location: myUrl/INVs/Transaction

From the user point of view: what I am actually doing now is to create a list of items in my page. Then after I press save button. The same page is refreshed to show the items I created just now.

In my View after I press the save button, it executes the below javascript code:

 //some javascript code written here. 
 for (i = 0; i < rowCount; i++) {
   //some javascript code written here. 

   $.ajax({
          type: 'POST',
          data: { 'obj': newYTDTRNIObj },
          url: '/INVs/ProcessCreateYTDTRNIAsync',
          success: function (data) {
          console.log(data);


         }
         });

 }
 if (currentVoucherNumIsEmpty) {
    $.ajax({
           type: 'POST',
           data: { 'obj': newInvVouchObj },
           url: '/INVs/ProcessPatchTABVOUAsync',
           success: function (data) {

           if (currentPageTitle == "Inventory Receipt- Misc Receipt") {
                            location.href = currentUrl + "INVs/Transaction?tType=1&id=" + newInvVouchObj.PREFIX + newInvVouchObj.VOUCHNO;


           } else if (currentPageTitle == "Inventory Receipt- Return To Stock") {
                            location.href = currentUrl + "INVs/Transaction?tType=2&id=" + newInvVouchObj.PREFIX + newInvVouchObj.VOUCHNO;

           } else if (currentPageTitle == "Inventory Receipt- Production Receipt") {
                            location.href = currentUrl + "INVs/Transaction?tType=3&id=" + newInvVouchObj.PREFIX + newInvVouchObj.VOUCHNO;

           } else if (currentPageTitle == "Inventory Receipt- Purchase Receipt") {
                            location.href = currentUrl + "INVs/Transaction?tType=4&id=" + newInvVouchObj.PREFIX + newInvVouchObj.VOUCHNO;

           } else if (currentPageTitle == "Inventory Issue- Misc Issue") {
                            location.href = currentUrl + "INVs/Transaction?tType=5&id=" + newInvVouchObj.PREFIX + newInvVouchObj.VOUCHNO;

           } else if (currentPageTitle == "Inventory Issue- Production Issue") {
                            location.href = currentUrl + "INVs/Transaction?tType=6&id=" + newInvVouchObj.PREFIX + newInvVouchObj.VOUCHNO;

           }

           }
           }); 

 }

It sends data over to controller with two ajax calls. At the success function of the 2nd ajax call, it redirects back to the same view again just that this time it is with parameters.

When the view is called with those parameters, it actually loads and show those records that are inserted into database by that c# function above: ProcessCreateYTDTRNIAsync

Below is my c# code:

[HttpPost]
public async Task<string> ProcessCreateYTDTRNIAsync(INV_YTDTRNIObj obj, bool edit = false, bool issue = false)
{
        // some c# code written here. 

        var postTask = createclient.PostAsJsonAsync<YTDTRNI>("api/INV_API/postYTDTRNI", newYTDRNI);
                postTask.Wait();

                var result = postTask.Result;
                if (result.IsSuccessStatusCode){
                }

                return "Record created";
}

[Route("api/INV_API/postYTDTRNI/")]
public async Task<string> PostYTDTRNIAsync(YTDTRNI ytdtrniObj)
{

        db.YTDTRNIs.Add(ytdtrniObj);
        await db.SaveChangesAsync();

        return "YTDTRNI object created";
}


[HttpPost]
public async Task<string> ProcessPatchTABVOUAsync(TABVOU obj)
{

        // some c# code written here. 

        HttpClient client = new HttpClient();
        var result = await client.SendAsync(request);
        if (result.IsSuccessStatusCode)
        {

        }
        return "Updated voucher number";


}

What I noticed is that: When I insert 2 records, there are situations where after my view is displayed then the second record is inserted into the database table. So my view only displays the first record that was inserted.It is an inconsistent behavior, at other times, the 2 records are inserted in to the database table and when the page is refreshed, it displays the 2 records.

Did this happen because I did not wait for first ajax to finish before refreshing the page?

You are issuing ajax and even before all the requests receive the response, you are are refreshing the page.So, the insert is being done while the page reloads in parallel showing only those which has already written to. It has nothing to do with response caching or such. — Mat J, Jul 12 '18 at 07:00

score 0 · Answer 1 · answered Jul 12 '18 at 05:56

This is what's called Ajax Cacheing.

Ajax will chache your result so unless the page is refreshed or the cacheing is disabled, you won't see the updated data in your view.

There are a couple things you could try, first it to set your Ajax cahce to false:

  $.ajax({
           type: 'POST',
           data: { 'obj': newInvVouchObj },
           url: '/INVs/ProcessPatchTABVOUAsync',
           cache: false,
           success: function (data) {

Or globally with ajaxSetup():

$.ajaxSetup({ cache: false });

only with jQuery.post() method, not with jQuery.ajax() – Barr J Jul 12 '18 at 07:14 — Barr J, Jul 12 '18 at 07:14

score 0 · Accepted Answer · answered Jul 12 '18 at 08:56

I made use of the method mentioned in another question

I create an array which will store all the promises for ajax request which inserts data into database.

Then I use $.when.apply(null, promises).done to make sure the ajax requests in the for loop are completed before refreshing the page. This ensures that all the data are inserted into database before page is refreshed.

ASP.NET MVC and WebAPI inserting and retriveing records with database table

2 Answers2