Call .NET method asynchronously and bind to grid upon completion

与世无争的帅哥 提交于 2019-12-06 07:56:07

Jamie is on the right track. Your server cannot "push" new data to the client after the page is rendered. The client has to initiate a request. I would set a timer or use a JavaScript setTimeout on the client to regularly poll the server to see if it completed.

Web Service Approach

Another approach is to set up a web service on the server, then call it from your page. This will be executed in a new thread and update the grid asynchronously as soon as results are available.

First you need to set up a WCF Web Service. There are thousands of articles about this if you aren't sure. Here is one of them: http://www.codeproject.com/Articles/16973/Simple-Web-Service-using-WCF-Windows-Communication

Here is some sample code from one of my projects:

namespace UI.Web.WebServices
{
    [ServiceContract(Namespace = "WebServices")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class WebServiceName
    {
        [OperationContract]
        [WebInvoke(ResponseFormat = WebMessageFormat.Json)]
        public FacilityResult[] MethodName()
        {
            FacilityService facilityService = new 
            return facilityService .GetAssignments()).ToArray();
        }
    }
}

 

Calling the web service from the client

Next you will need to databind the grid from your page, using JavaScript: http://blog.ashmind.com/2007/06/21/client-side-databinding-with-aspnet-ajax-futures/

Here is some sample code from the same project. This project uses jQuery and not pure JavaScript like the samples in the links:

<script type="text/javascript">
    function getGridData() {
        var payload = { }; // Put data to include here, if any

        $.ajax({
            type: "POST",
            url: "/WebServiceName.svc/MethodName",
            data: JSON.stringify(payload),
            contentType: "application/json",
            dataType: "json",
            success: function (msg) {
                bindResultsToGrid(msg.d);
            },
            error: function (xhr) { alert('error' + xhr.responseText); }
        });
    }

function bindResultsToGrid(data)
{
    ...
}
</script>

References http://aspalliance.com/1301_Unveil_the_Data_Binding_Architecture_inside_Microsoft_ASPNET_Ajax_10__Part_1

http://aspalliance.com/1301_Unveil_the_Data_Binding_Architecture_inside_Microsoft_ASPNET_Ajax_10__Part_2

Despertar

I wanted to share my full solution for this problem. While msigman's answer was a big help it did not get me all the way there. I have not found a viable solution to binding to a GridView from the client-side, so instead I am creating the grid from javascript.

1 - Setup Controller to handle request

The MVC controller can be called from client-side via AJAX which allows you to call any .NET code from the client side. This is a key part as all the power and heavy-lifting can be done by the controller/service, but you still have the flexibility of javascript. I posted a full example of how you can do this here, Call ASP.NET function from JavaScript? . (Can be used with Webforms or MVC).

public class TimersController : ApiController
{
   public HttpResponseMessage<TimerDisplay[]> Get()
   {
       return new HttpResponseMessage<TimerDisplay[]>(
           TimerRepository.Get(), // all your .NET logic can be encapsulated here
           new MediaTypeHeaderValue("application/json")
        );
    }
}

2 - Initiate the request with AJAX

This can be done in the when the page loads by handlding the $(document).ready() event, on a button-click, or periodically with a timer.

        $.ajax({
            url: "api/timers",
            dataType: "json",
            success: function (result) { bindGrid(result); }
        })

3 - Bind the data to a grid

As I stated, I have not found a way to bind data to a GridView from the client-side. I feel the better solution is to use drop the GridView altogether (this is more a server-side control and not flexible for this type of situation), and in it's place you can generate the grid from Javascript. While you can manually loop through the data and just create the <tr> and <td> yourself, there are quite a few grid / ui frameworks that can do this for you. One such UI framework which has a nice grid object which you can directly bind JSON data to is Kendo UI (http://demos.kendoui.com/web/grid/index.html) (among many other useful widgets). This SO post contains more suggestions on javascript UI frameworks https://stackoverflow.com/questions/159025/jquery-grid-recommendations .

    function bindGrid(gridData) {
        var grid = $("#grid");
        grid.html("");
        grid.kendoGrid({
            columns: [
                { field: "Place", title: "Place" },
                { field: "Time", title: "Time" } 
            ],
            dataSource: {
                data: gridData
            },
            scrollable: false
        });
    }   
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!