ASP.NET MVC с YUI - PullRequest
Новая
       9

ASP.NET MVC с YUI

3 голосов
/ 18 октября 2010

Я использую ASP.NET MVC 2. Я поиграл с вами сэмплами YUI, которые можно найти на http://developer.yahoo.com/yui/2/. Мне было интересно, было ли у кого-нибудь время использовать элементы управления YUI в MVCapp?

Я хочу начать использовать таблицу данных и отображать свои результаты с SQL Server в этой таблице данных.Как это возможно?Любые образцы будут оценены.

Спасибо

1 Ответ

4 голосов
/ 18 октября 2010

Элементы управления YUI представляют собой простые элементы управления javascript и не зависят от сервера, что означает, что они могут использоваться с любой серверной технологией, если вы отформатируете результаты, как ожидалось.Итак, вот упрощенный пример элемента управления таблицы данных в действии, использующего AJAX и JSON для заполнения его данных:

Controller: 

[HandleError]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Assets()
    {
        // TODO: fetch data from SQL using a repository
        var data = new
        {
            ResultSet = Enumerable.Range(1, 25).Select(i => new
            {
                Title = "title " + i,
                Phone = "phone " + i,
                City = "city " + i
            })
        };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

и в представлении: 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/event/event-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dom/dom-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/button/button-min.js"></script> 
<script type="text/javascript">
YAHOO.util.Event.addListener(window, 'load', function () {
    YAHOO.example.XHR_JSON = new function () {
        var myColumnDefs = [
            { key: 'Title', label: 'Name', sortable: true },
            { key: 'Phone' },
            { key: 'City' },
        ];

        this.myDataSource = new YAHOO.util.DataSource('<%= Url.Action("assets") %>');
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.responseSchema = {
            resultsList: 'ResultSet',
            fields: ['Title', 'Phone', 'City' ]
        };

        this.myDataTable = new YAHOO.widget.DataTable('json', myColumnDefs,
            this.myDataSource);

    };
});
</script>

<div id="json"></div>

Элемент управления с возможностью обработки данных очень мощный и содержит множество настроек, таких как подкачка, сортировка, ... Документация довольно обширна и ее стоит прочитать, чтобы увидеть примеры в действии.Вооружившись FireBug , вы можете посмотреть на запросы и параметры ответа, которыми обмениваются клиент и сервер, для репликации каждого примера.

...