从ASP.NET MVC中的AngularJS控制器加载数据而无需加载整个页面

Question

Here is my Action:

    [HttpPost, ValidateAntiForgeryToken]
    public ActionResult GetData()
    {
            //get data from DB and populate model with data
            return View("Data", model);
    }

The view is:

    @model UI.Models.DataModel

    @{
var grid = new WebGrid(Model.listTest, 
    null, 
    defaultSort: "Id", 
    rowsPerPage: 25, 
    canPage: true, 
    canSort: true
    );
    }

    @if (Model.listTest != null)
    {

     @grid.GetHtml()

    }

In this particular case, how can one populate the gridview without loading entire page after the action is called using angularjs (not Ajax)?

I have not written a single line of code for making it asynchronous because I don't know anything about angularjs. This will be my first step towards learning it.

Update:

• I know how this can be done in Ajax, I wanted to learn AngularJS. Is it better to do such things in Ajax only? Or AngularJS is better than Ajax?

Answer 1

If you're looking to have asynchronous API calls back to a controller, I highly recommend looking at the ASP.NET website, which contains information on this subject specifically.

The simplest answer before I link to an article is that you will want to split up your controller actions to use one for the View specifically, and another action which returns the data asynchronously.

Here is a link to an article which answers your question:

http://www.asp.net/mvc/overview/performance/using-asynchronous-methods-in-aspnet-mvc-4