0

C#、HTML、および Javascript のみを使用して、コントローラーとビューを使用して MVC Web ページを作成しようとしています。現在使用されている形式のため、モデルまたはphpを使用しないことが不可欠です。

現在、次のコードを使用して Web ページにすべてのデータを入力しています。

public class LANSweeperMeshResultsController : Controller
{       

    public string GetLANSweeperToAutotaskData()
    {
        string query = "SELECT * FROM LANSweeperToAutotask";
        SqlCommand cmd = new SqlCommand(query);
        return GetData(cmd).GetXml();
    }

    private static DataSet GetData(SqlCommand cmd)
    {
        string connString = "Data Source=ldn-sql01;Initial Catalog=lansweeperdb;Persist Security Info=True;Use" +
        "r ID=lansweeperdataread;Password=password";



        using (SqlConnection con = new SqlConnection(connString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;

                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds);
                    return ds;
                }
            }
        }
    }
}

ただし、ビューページでデータをフォーマットし、それに応じてスタイルを設定する方法がわかりません。これは比較的新しいので、理解できるものをいただければ幸いです。

現在のビュー ページの JS は次のようになります。

<script type="text/javascript">
    // calling jquery functions once document is ready
    $(document).ready(function () {
        // retreving data on button click
        $("#btnLoad").click(RunLANSweeper());
        //loading screen functionality - this part is additional - start
        $("#divTable").ajaxStart(OnAjaxStart);
        $("#divTable").ajaxError(OnAjaxError);
        $("#divTable").ajaxSuccess(OnAjaxSuccess);
        $("#divTable").ajaxStop(OnAjaxStop);
        $("#divTable").ajaxComplete(OnAjaxComplete);
        //loading screen functionality - this part is additional - end
    });
    // ajax call
    var interval = setInterval(function () { DisplayLANSweeperResults() }, 10000);
    function DisplayLANSweeperResults() {
        $.ajax({
            type: "GET",
            url: "/GetLANSweeperToAutotaskData/GetLANSweeperToAutotaskData",
            data: '{}',
            contentType: "application/json;",
            dataType: "json",
            success: OnSuccess,
            failure: OnFailure,
            error: OnError
        });
        // this avoids page refresh on button click
        return false;
    }
    // on sucess get the xml
    function OnSuccess(response) {
        //debugger;
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Table");
        //showOnATable(assets);
    }
     //show data on a table
    function showOnATable(assets) {
        //debugger;
        var headers = [];
        var rows = [];
        // header section
        headers.push("<tr>");
        headers.push("<td><b>Asset Name</b></td>");
        headers.push("<td><b>Manufacturer</b></td>");
        headers.push("<td><b>Model</b></td>");
        headers.push("</tr>");
        // rows section
        $.each(assets, function () {
            var asset = $(this);
            rows.push("<tr>");
            rows.push("<td>" + $(this).find("AssetID").text() + "</td>");
            rows.push("<td>" + $(this).find("Manufacturer").text() + "</td>");
            rows.push("<td>" + $(this).find("Model").text() + "</td>");
            rows.push("</tr>");
        });
        var top = "<table class='gridtable'>";
        var bottom = "</table>";
        var table = top + headers.join(" ") + rows.join(" ") + bottom;
        $("#divTable").empty();
        $("#divTable").html(table);
    }

</script>

しかし、残念ながらこれはうまくいきません。どんな助けでも大歓迎です。

4

1 に答える 1

0

Slickgridプラグインを使用しないのはなぜですか?

独自のテーブルを作成するよりもはるかに簡単です。
また、テーブルの代わりに div を使用し、仮想レンダリングを実装します。
table-tag により、20 行から 50 行を超えるテーブルは非常に遅くなります。

$.parseXML(response.d); また、設定時に使用するのはなぜですか

 contentType: "application/json;",
 dataType: "json",

XML を返すか、json を返します。

また、データセットは必要ありません。System.Data.DataTable に入力できます。次に、system.web.extensions.dll を使用してデータテーブルを json にシリアル化できるため、XML は必要ありません。JavaScript での処理に適しています。

System.Web.Script.Serialization.JavascriptSerializer ser = new JavaScriptSerializer();        
ser.Serialize(dt);
于 2013-09-30T11:52:04.183 に答える