Jaimesh Jaimesh - 6 months ago 24
Ajax Question

How to display multiple message on Page load in MVC?

I have created one MVC Project.In my action method I have multiple database operation.

Like I have First query to select data from Table1.
Second query to select data from Table2.
Third query to select data from Table3.
Fourth query to select data from Table4.
All of this query output is converted to LIST.

When I call this action method, I want to display its process to the page.
Like:
On Page:
Data From Table1 Is loaded.
Data From Table2 Is Loaded.
Loading Table3 Data.....

How to execute this?

Answer

It's easy with signalR. Please refer link below: http://www.codeproject.com/Tips/896768/Long-Running-Process-Status-Check-with-SignalR-in

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>

@using (Ajax.BeginForm("ProcessApplication", "Home", "Post", new AjaxOptions { UpdateTargetId = "divResult", OnComplete = "ReturnData" }))
{
    <script src="~/signalr/hubs"></script>

    <button type="submit" id="btnSubmit" class="btn btn-default">Call Method</button>

    <div id="divResult"> </div>

   <div id="divStatus"></div>

    <script type="text/javascript">

        var final = "";

        $(function () {
            debugger;
            var progressNotifier = $.connection.progressHub;

            progressNotifier.client.sendMessage = function (message) {
                UpdateProgress(message);
            };

            $.connection.hub.start().done(function () {
            });
        });

        function UpdateProgress(message) {
            if (message != 'undefined') {
                final += message + "<br>";
                $("#divStatus").html(final);
            }
        }

        function ReturnData() {
            $('#divStatus').hide();
            $('#divResult').show();

        }

    </script>
}

HomeController.cs:

public ActionResult Index()
        {
            return View();
        }

        public ActionResult ProcessApplication()
        {
            ProgressHub.SendMessage("Long Running Process Started<br>");

            ProgressHub.SendMessage("Process 1 is started...");
            System.Threading.Thread.Sleep(6000);
            ProgressHub.SendMessage("Process 1 is Finished");

            System.Threading.Thread.Sleep(2000);

            ProgressHub.SendMessage("Process 2 is started...");
            System.Threading.Thread.Sleep(6000);
            ProgressHub.SendMessage("Process 2 is Finished");

            ProgressHub.SendMessage("<br>Long Running Process Finished");

            System.Threading.Thread.Sleep(3000);

            return PartialView("_Result");
        }

You can call your submit button and SignalR will handle to display status message on client side.

Comments