0

我正在尝试使用控制器和仅使用 C#、HTML 和 Javascript 的视图填充 MVC 网页。由于当前使用的格式，我不使用模型或 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>

但可惜这行不通。非常感谢任何帮助。

4

1 回答 1

0

你为什么不使用Slickgrid插件？

这比编写自己的表要简单得多。
它还使用 div 代替 table 并实现虚拟渲染。
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 回答