3

私は ASP.NET MVC 2 を使用しています。 http://developer.yahoo.com/yui/2/にある YUI サンプルを試してみました。MVC アプリで YUI コントロールを使用する時間があった人がいるかどうか疑問に思っていましたか?

データテーブルの使用を開始し、SQL Server からの結果をこのデータテーブルに表示したいと考えています。これはどのように可能ですか？任意のサンプルをいただければ幸いです。

ありがとう

4

1 に答える 1

4

YUI コントロールはプレーンな JavaScript コントロールであり、サーバーに依存しないという意味で、結果を期待どおりにフォーマットする限り、任意のサーバー サイド テクノロジで使用できます。そのため、AJAX と JSON を使用してデータを入力する動作中のデータ テーブル コントロールの単純化された例を次に示します。

コントローラ：

[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を使用すると、各例を再現するために、クライアントとサーバーの間で交換される要求と応答パラメーターを確認できます。

于 2010-10-18T19:12:59.877 に答える