How to refresh partial view in a .net-core mvc project

Question

I have read multiple post on partial view but still can't figure out how it works. I have a main page, within if I have a partial view, basically rendering an image.

I am "listening" a folder using FileSystemWatcher, when a new image arrives in it, depending on it's type it's doing some process and at the end of the process it should "refresh" the partial view.

in the main cshtml "fullPage.cshtml" I did this:

<div id="_PartialView">
    <h2><b>Images:</b></h2>
    @Html.Partial("PatialViewImage");
</div>

in the PartialViewImage.cshtml:

<div style="text-align:center">
    <img id="img_logo" alt="AIExampleResult" src=@ViewBag.CurrentImage style="margin-left:auto;margin-right:auto;width:80%" />
   <h3>ImageProperties: @ViewBag.Resolution etc ...</h3>
</div>

in the controller:

public async Task<IActionResult> fullPage(int? id)
{
   if (id == null)
{
   return NotFound();
}

var patientdata = await _context.Patientdata
    .FirstOrDefaultAsync(m => m.IdPatient == id);
if (patientdata == null)
 {
  return NotFound();
 }

//start to listen dragonfly folder
_watcher = new FolderWatcher();
_watcher.PathToWatch = _configuration["ConfigFolderListner:ImagesFolder"];
_watcher.patientdata = patientdata;
_watcher.Run();
_watcher.PropertyChanged += HandleNewJImage;
return View(patientdata);
}

so when a new image is detected it goes into (in the controller class) :

public void HandleNewJpeg(object sender, EventArgs e)
{
    ViewBag.CurrentImage = _watcher.LastImageProcessed;
    PartialView("PatialViewImage");
    return;
}

but it doesn't do anything. when I debug: it stops at the line PartialView("PartialViewImage"), but it doesn't seem to go into PartialViewImage.cshtml and the fullPage is not uploaded.

I tried to add in the fullPage.cshtml this javascript code:

<script language="JavaScript" type="text/javascript">
$("@ViewBag.CurrentImage").change(function refresh)
    function refresh() {
        $("#_PartialView").load("/Views/PatialViewImage");
    };

</script>

without success. any idea how I could connect the FileSystemWatcher to my fullPage ?

UPDATE

in the full page I have add this:

$(document).ready(function () {
  CheckNewImages();
  var refreshId = window.setInterval(function () {
    CheckNewImages();
  }, 2000);
});

function CheckNewImages() {
  $.ajax({
  url: "@Url.Action("ReportPartialView")",
  type: "POST",
  dataType: "html",
  data: {id : @Model.IdPatient},
  success: function (data) {
   $('#_ReportPartialView').html(data);
   clearInterval(refreshId);
  },
  fail: function () {
   //do nothing
  }
});

to check time to time if I have a new image. from the filesystemwatcher event, I try to update a database define like this: in models:

public class PathImages
{
  public int Id { get; set; }

  public string RawImage { get; set; }

  public string IAImage { get; set; }
}

public class TempContext : DbContext
{
 public TempContext(DbContextOptions options) : base(options)
 { }

 public DbSet<PathImages> PathImages { get; set; }
}

in startup.cs

services.AddDbContext<SQLDATABASEContext>(options => options.UseMySQL(Configuration.GetConnectionString("SQLDATABASE")));
services.AddDbContext<TempContext>(options => options.UseInMemoryDatabase("name"));

and in the controller:

public void HandleNewJpeg(object sender, EventArgs e)
{
    _context2.Add<PathImages>(new PathImages { RawImage = _context._watcher.LatestJPEGThumb, IAImage = "" });
    return;
}

but I get this error:

System.ObjectDisposedExceptionHResult Cannot access a disposed object

I still don't get how I can pass data from public void HandleNewJpeg(object sender, EventArgs e) to a controller action.

Answer 1

You can use <partial> tag helper, <div id="imageChanged"> <partial name="Partial/PatialViewImage" model="new ViewModel() { ImSrc = Model.ImSrc}" /> </div> . If you want refresh the page you need to have a controller action that will returns partial view.

User JQuery with event or without event for example

 (function () {
    $.ajax({
            url: ROOT + 'Home/GetImage',
            data: { imgId : @Model.ImgId },
            type: 'POST',
            success: function (data) {
                     $('#imageChanged').html(data);
                    },
                    error: function (res) {
                    }})
    })();