Auto Refresh Partial View data in ASP.Net Core MVC using jQuery Ajax

bigbear

SOLVED CLOSED ACTIVE ANSWERED
User: bigbear
Posted: on May 06, 2021 10:41 PM
Forum: ASP.Net Core MVC
Answer: 1
Views: 46340

I have a .Net Core application and I'm using the Binance.Net API. I want to show the trades coming in real time and update my View with the current trades. I'm not sure the correct way to do this. Possibly ajax?

The data that is coming in is all c# so that makes it harder where I can't use javascript websockets to update the UI. Unless there is a way around this.

I have a View and also a partialview with a listbox in it. Currently as the websocket data comes in I add it to a model and if I click the button in my partial the listbox shows the recent trades.

So I am partially there

        public async Task<IActionResult> Index()
        {
            _logger.LogInformation("Start Capture");
            
            List<TradeResult> trades = new List<TradeResult>();
            await GetPartial(trades);
 
            return View();
        }
 
        public async Task<IActionResult> GetPartial(List<TradeResult> trades)
        {
 
 
            var incomingBTC = await _binanceSocketClient.SubscribeToTradeUpdatesAsync("BTCUSD", (data) =>
            {
                //(data);
                // _logger.LogInformation(data.Price.ToString());
                Console.WriteLine(data.Price);
                trades.Add(new TradeResult
                {
                    Price = data.Price
                });
 
            });
 
            return PartialView("BoxView", trades);
        }

Partial

<div class="container">
    <form>
        <table>
            <tr>
                <th>Price</th>
            </tr>
            @foreach(var obj in Model)
            {
                <tr>
                    <td>
                        @obj.Price.ToString()
                    </td>
                </tr>
            }
        </table>
        <input type="submit" value="btn" />
    </form>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on May 08, 2021 01:34 AM
Report

Hi bigbear,

Since you are using PartialView you need use JavaScript setInterval function and make ajax call to refresh at specific interval.

Check below sample code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: Home
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Details()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return PartialView("Details", entities.Customers.OrderBy(x => Guid.NewGuid()).Take(10));
    }
}

View

Index

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h4>Customers</h4>
    <hr />
    <div id="dvPartial"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            setInterval(BindPartialView, 1000);
        });

        function BindPartialView() {
            $.ajax({
                type: "POST",
                url: "/Home/Details",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                success: function (response) {
                    $('#dvPartial').html(response);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        }
    </script>
</body>
</html>

PartialView

@model IEnumerable<Partial_View_Core_MVC.Customer>

<table cellpadding="0" cellspacing="0" id="CustomerGrid">
    <tr>
        <th>CustomerID</th>
        <th>Contact Name</th>
        <th>City</th>
        <th>Country</th>
    </tr>
    @foreach (Customer customer in Model)
    {
        <tr>
            <td>@customer.CustomerID</td>
            <td>@customer.ContactName</td>
            <td>@customer.City</td>
            <td>@customer.Country</td>
        </tr>
    }
</table>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Auto Refresh Partial View data in ASP.Net Core MVC using jQuery Ajax

Company

Explore

Follow us

Contact Us