Updating database call without having to refresh page

Question

A list of images (treasures) are displayed to the user, here the user will choose a single image which will be stored in the Learner_treauser table:

List<The_Factory_Chante.Models.Treasure> tresh;

using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{

    string imageSource = "";

    tresh = db2.Treasures.ToList();

    foreach (var item in tresh)
    {
        if (item.itemImage != null)
        {
            string imageBase = Convert.ToBase64String(item.itemImage);
            imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
        }

        <img id="@item.treasureID" src="@imageSource" onclick="return MakeSure(@item.treasureID)" />
    }
}

The function called when an image is chosen. In this function the image is sent over to a webservice method to be saved to the database, and the page is reload for an update to take place:

function MakeSure(treshID) {

    var id = treshID
    $.ajax({
        url: "../../WebService.asmx/MakeSure",
        data: "{ 'id': '" + id + "'}",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        }

    });
    window.location.reload();
};

However this is not very pleasant on the user's point of you. A better way would be to update without refreshing the page.

Here is the Webservice method that receives the chosen image id and stores it in the Learner_Treasure table.

public void MakeSure(int id)
{
   using (The_FactoryDBContext db = new The_FactoryDBContext())
   {
       Learner_Treasure learnTreasure = new Learner_Treasure();

       learnTreasure.dateCompleted = DateTime.Today;
       learnTreasure.learnerID = UserInfo.ID;
       learnTreasure.treasureID = id;

       db.Learner_Treasure.Add(learnTreasure);
       db.SaveChanges();

   }

Code to call Learner_Treasure table.

List<The_Factory_Chante.Models.Learner_Treasure> lern;
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{

    string imageSource = "";
    lern = db2.Learner_Treasure.ToList();
    if (lern != null)
    {
        foreach (var item in lern)
        {
            if (item.learnerID == UserInfo.ID)
            {
                byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
                string imageBase = Convert.ToBase64String(bytes);
                imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
                <img id="@item.treasureID" src="@imageSource"/>
            }
        }

This code will show the user all the images they have chosen, however in if I take away window.location.reload(); this code is only updated when the page reloads. Meaning that the user will not see their chosen image immediately after they have chosen it.

What I want to do is update the code that calls the Learner_Table without refreshing the page.

Answer 1

There is another way to approach this problem, you could use the SignalR library.

This is what you would need to do:

View

// Include the SignalR Script
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>

// Provide a dynamic proxy for SignalR
<script src="~/signalr/hubs"></script>

// Define hub connection(see below)
var hub = $.connection.yourHub;

// This is what the Hub will call (Clients.All.getImage(imageSource);)
hub.client.getImage = function (img) {
    var image = '<img id="' + img.treasureId + '" src="data:image/jpg;base64,' + img.image + '"';
    $(image).appendTo("body");
};

// Start the connection to the hub
// Once we have a connection then call the getLearnerTreasureItem on the Hub
$.connection.hub.start().done(function () {
    var id = // whatever
    hub.server.getLearnerTreasureItem(id);
};

Hub

public class YourHub : Hub
{

    public void GetLearnerTreasureItem()
    {
        // All your code
        List<The_Factory_Chante.Models.Learner_Treasure> lern;
        using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
        {

         string imageSource = "";
         lern = db2.Learner_Treasure.ToList();
         if (lern != null)
         {
           foreach (var item in lern)
           {
             if (item.learnerID == UserInfo.ID)
             {
               byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
              string imageBase = Convert.ToBase64String(bytes);
              imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
            }
        }

        // This will now call the getImage function on your view.
        Clients.All.getImage(imageSource);
    }
}

Information on the dynamic proxy