How can I update/refresh ViewData in my ASP.NET Core Razor View?

Question

I have followed the advice given in the comment and created a PartialView. When running the debugger I can see that @Model at some point in time gets filled with the content of the reply variable. However, it never shows up on the page!!! What am I doing wrong here?

// Pages\Shared\_ReplyPartial.cshtml

<h1>Response</h1>

<p>@Model</p>

Then this is what my PageModel looks like

// Dependencies.cshtml.cs

public class DependenciesModel : PageModel
{
    ... 
    
    public PartialViewResult OnGetCreateBlob()
    {
        ... 

        var response = _client.PutAsync(url, new StringContent(DateTime.UtcNow.ToString())).Result;     
        var reply = $"StatusCode: {(int)response.StatusCode}";

        return Partial("_ReplyPartial", reply);
    }
}

And finally the page itself

// Dependencies.cshtml

@page
@model AppInsightsDemo.Pages.DependenciesModel
@{
    ViewData["Title"] = "Dependencies";
}
<h1>@ViewData["Title"]</h1>

@section scripts
{
    <script>
        $('#createBlob').on('click', () => {
            $.ajax({
                url: '?handler=CreateBlob'
            });
        });
    </script>
}


<button class="btn btn-primary mb-1" id="createBlob">Create Blob</button>

<partial name="_ReplyPartial">

---

ORIGINAL POST

Please consider the following code, where I am making an AJAX call to call OnGetCreateBlob() from the code behind.

//// Site.cshtml

@page
@model Demo.Pages.SiteModel
@{
    ViewData["Title"] = "Dependencies";
}
<h1>@ViewData["Title"]</h1>

@section scripts
{
    <script>
        $(document).click(e => {
            if (e.target.id == "createBlob") {
                $.ajax({
                    url: '?handler=CreateBlob'
                });    
            }
        });
    </script>
}

<button class="btn btn-primary" id="createBlob">Create Blob</button>

<h1>Response</h1>

<div id="response">
    @ViewData["Reply"]
</div>

//// Site.cshtml.html 

public class SiteModel : PageModel
{
    ... 

    public void OnGetCreateBlob()
    {
        ...

        var response = _client.PutAsync(url, new StringContent(DateTime.UtcNow.ToString())).Result;

        var statusCode = (int)response.StatusCode;
        var reply = $"StatusCode: {statusCode}";

        ViewData["Reply"] = reply;
    }
}

The thing is, the ViewData is not getting updated on the view.

I've tried to refresh the window with window.location.reload() just after executing the AJAX call, however then it seems the content of ViewData is lost.

If I do an $("#response").load(location.href + " #response"); and just reload the div nothing appears.

So how can I display the content of ViewData after it got populated by the code behind?

Answer 1

Yo can try to replace <partial name="_ReplyPartial"> after ajax.Here is a demo:

Dependencies.cshtml:

@page
@model AppInsightsDemo.Pages.DependenciesModel
@{
    ViewData["Title"] = "Dependencies";
}
<h1>@ViewData["Title"]</h1>

@section scripts
{
    <script>
        $('#createBlob').on('click', () => {
            $.ajax({
                url: '?handler=CreateBlob',
                success: function (data) {
                    $("#partial").html(data);
                }
            });
        });
    </script>
}


<button class="btn btn-primary mb-1" id="createBlob">Create Blob</button>
<div id="partial">
    <partial name="_ReplyPartial">
</div>

You can also replace @ViewData["Reply"] in Site.cshtml after ajax.Here is a demo:

Site.cshtml:

@page
@model Demo.Pages.SiteModel
@{
    ViewData["Title"] = "Dependencies";
}
<h1>@ViewData["Title"]</h1>

@section scripts
{
    <script>
        $(document).click(e => {
            if (e.target.id == "createBlob") {
                $.ajax({
                    url: '?handler=CreateBlob',
                     success: function (data) {
                        $("#response").html(data);
                    }
                });    
            }
        });
    </script>
}

<button class="btn btn-primary" id="createBlob">Create Blob</button>

<h1>Response</h1>

<div id="response">
    @ViewData["Reply"]
</div>

Site.cshtml.cs:

public class SiteModel : PageModel
{
    ... 

    public IActionResult OnGetCreateBlob()
    {
        ...

        var response = _client.PutAsync(url, new StringContent(DateTime.UtcNow.ToString())).Result;

        var statusCode = (int)response.StatusCode;
        var reply = $"StatusCode: {statusCode}";

        ViewData["Reply"] = reply;
        return Content(reply);
    }
}