1

データベーステーブルからデータを取得してhtmlテーブルに表示する単純なMVCアプリがあります。サーバー側の処理を使用しようとすると、データが返されますが、テーブルではなくブラウザーに表示されます。

スクリプトは次のとおりです。

<script>
            $(document).ready(function () {
                $('#patients').dataTable({
                    "bServerSide":true,
                    "bProcessing":true,
                    "sAjaxSource": '@Url.Action("Index","Patient")',
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers"
                });
            });
</script>

html テーブルは次のとおりです。

<table width="100%" id="patients">

    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>

        </tr>
    </thead>
    <tbody>
    </tbody>

</table>

これが私のコントローラーアクションメソッドです：

  public ActionResult Index()
        {
            List<Patient> patients = new List<Patient>();
            using (SqlConnection conn = new SqlConnection("Server=server;Database=db;Trusted_Connection=True"))
            {
                conn.Open();
                using (SqlCommand cmd = new SqlCommand("SELECT FirstName,LastName FROM Patient",conn))
                {
                    SqlDataReader reader = cmd.ExecuteReader();

                    while (reader.Read())
                    {
                        patients.Add(new Patient { FirstName = reader["FirstName"].ToString(), LastName = reader["LastName"].ToString() });
                    }
                }

            }
            return Json(new
            {
                aaData = patients.Select(x=> new[] {x.FirstName,x.LastName})
            },JsonRequestBehavior.AllowGet);
        }

    }

ブラウザに表示される JSON は次のとおりです。

{"aaData":[["Tom","Jones"],["Jerry","Jones"],["Jack","Roberts"],["Harry","Truman"],["Bill","Clinton"],["Barrack","Obama"],["George","Bush"],["Ed","Lee"],["Michael","Jordan"],["James","Caan"],["Rick","Reilly"],["Johhny","B.Goode"]]}


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")

        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("Patients","Index","Patient")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>


        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/table")
        @RenderSection("scripts", required: false)
    </body>
</html>
4

2 に答える 2

0

ここにはいくつかのオプションがあります。

ページを読み込んでいるときにデータテーブルのデータがある場合は、おそらくモデルを使用してデータを運び、テーブルに入力する必要があります。

データを非同期でロードする必要がある場合は、コントローラーにさまざまなアクションを作成する必要があります。表示されるのは、1 つのアクションを使用して両方を実行しようとした結果です。

データを取得するためのアクションは次のようになります。

public JsonResult PatientsData()
{
   List<Patient> patients = new List<Patient>() {
      new ListItem() { FirstName= "1", LastName = "VA" }
   };

        return Json(new
        {
            aaData = patients.Select(x=> new[] {x.FirstName,x.LastName})
        },JsonRequestBehavior.AllowGet);
}

次に、次のようにデータテーブルを構成できます。

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": '~/Controller/PatientsData'
    } );
} );
于 2013-05-02T12:58:50.553 に答える