使用Javascript將SQL數據庫表轉換為MVC網頁

Question

我正在嘗試使用Controller填充MVC網頁，並僅使用C＃，HTML和Javascript填充視圖。 由於當前使用的格式，我不使用模型或PHP是必需的。

目前，我使用以下代碼在網頁中填充了所有數據。

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>

但是a，這行不通。 任何幫助，不勝感激。

Answer 1

您為什么不使用Slickgrid插件？

這比編寫自己的表要簡單得多。
它還使用divs代替table並實現虛擬渲染。
table標簽使超過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);