【问题标题】:Data from controller is not fetching into Jquery Datatable in MVC(Without using Entity framework)来自控制器的数据未提取到 MVC 中的 Jquery Datatable(不使用实体框架)
【发布时间】:2019-09-25 04:07:32
【问题描述】:

找到下面的代码并帮助我哪里出错了,因为数据没有提取到 jQuery 数据表中(数据仅以 JSON 格式显示)

步骤:1 创建Datatbase访问层,然后是一个名为Db2的类

        public class Db2
        {
           SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
            public DataSet show_data()
            {
              SqlCommand com = new SqlCommand("SP_Company_All", con);
              com.CommandType = CommandType.StoredProcedure;
              SqlDataAdapter da = new SqlDataAdapter(com);
              DataSet ds = new DataSet();
              da.Fill(ds);
               return ds;
            }
        }

步骤:2 创建空控制器并按以下方式编码

     public class Company1Controller : Controller
        {
            Database_Access_layer.Db2 db2layer = new Database_Access_layer.Db2();

            // GET: Company1
            public ActionResult Index()
            {
                return View();
            }
            public JsonResult get_data()
            {
                DataSet ds = db2layer.show_data();
                List<Company1> listcomp = new List<Company1>();
                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    listcomp.Add(new Company1
                    {
                        CompanyID = Convert.ToInt32(dr["CompanyID"]),
                        CompanyName = dr["CompanyName"].ToString(),
                        CompanyCode = dr["CompanyCode"].ToString(),
                        Wecare_companyId = Convert.ToInt32(dr["Wecare_companyId"]),
                        LicenseCount = Convert.ToInt32(dr["LicenseCount"]),
                        active = Convert.ToBoolean(dr["active"]),
                        ModifiedBy = Convert.ToInt32(dr["ModifiedBy"]),
                        Lastmodifiedon = Convert.ToDateTime(dr["Lastmodifiedon"])
                    });
                }
                var data = listcomp;
                return Json(listcomp, JsonRequestBehavior.AllowGet);
            }
        }

Step3:那么View部分就像............

            @{
        ViewBag.Title = "Company1 Page";
        Layout = null;
    }

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title> 

            <!-- CDN LINKS-->
            <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
        </head>
    <body>
        <div class="jumbotron">
            <h1>DataTable Example</h1>
            <p class="lead">A project dedicated to data table example in MVC</p>
        </div>
        <br />
        <center>
            <div style="width: auto; border: 1px solid black; padding: 3px" ;>
                <table id="dataTable">
                    <thead>
                        <tr>
                            <th>CompanyID</th>
                            <th>CompanyName</th>
                            <th>CompanyCode</th>
                            <th>WeCareCompanyID</th>
                            <th>LicenseCount</th>
                            <th>Active</th>
                            <th>ModifiedBy</th>
                            <th>LastModifiedOn</th>                        
                        </tr>
                    </thead>
                </table>
            </div>
        </center>
----- Scripting Part be like
        <script type="text/javascript">
                $(document).ready(function () {
                    $.ajax({
                        "url": "@Url.Action("get_data", "Company1")",
                        "method": "post",
                        "dataType" : "json",
                        success: function (data) {
                            $('#dataTable').DataTable({
                                paging: true,
                                sort: true,
                                searching: true,
                                scrollY: 200,
                                data:data,
                                columns: [
                                    { 'data': 'CompanyID'},
                                    { 'data': 'CompanyName' },
                                    { 'data': 'CompanyCode' },
                                    { 'data': 'Wecare_companyId' },
                                    { 'data': 'LicenseCount' },
                                    { 'data': 'active' },
                                    { 'data': 'ModifiedBy' },
                                    { 'data': 'Lastmodifiedon'}                               
                                ]
                            });
                        }
                    });
                });
        </script>
    </body>
    </html>
    }

Here is a code of database access layer, controller and view too but data is not displaying in Datatable. Tried in Multiple ways.But No Luck

【问题讨论】:

  • 第 24 行的错误信息是什么?
  • 列 'LicenseCount' 不属于表 Table。说明:执行当前 Web 请求期间发生未处理的异常。请查看堆栈跟踪以获取有关错误及其源自代码的位置的更多信息。异常详细信息:System.ArgumentException:列“LicenseCount”不属于表 Table。
  • 删除LicenseCount = Convert.ToInt32(dr["LicenseCount"]), 行以避免异常。它清楚地告诉您LicenseCount 不是存储过程返回的表中的列。您也可以将该列添加到您的存储过程中。如果您需要帮助,请发布SP_Company_All 的代码。
  • 这个错误发生只是因为SP正在使用,好像现在更改SP后错误消失了。现在数据以Json格式显示而不是提取到数据表中......!跨度>
  • 亲爱的 Rahul 感谢您的时间和支持,但我在过去 12 小时内没有时间触摸我的笔记本电脑,我将在接下来的 48 小时内更新您,因为我正忙于其他事情

标签: c# asp.net-mvc stored-procedures datatables


【解决方案1】:

好的,我已经为您的问题设置了一个示例工作存储库here。您可以克隆此存储库并使用它。我已经使用预定义的值对您的List&lt;Company1&gt; listcomp = new List&lt;Company1&gt;(); 进行了硬编码,但假设您来自数据库的数据与我的硬编码值相似。

我正在向您展示相关的 ModelViewContoller 代码以及应用程序的示例输出。

请注意,我正在为您的 jscss 文件使用 CDN 链接:

您的Model 将如下所示:

using System;

namespace DataTablesExample
{
    public class Company1
    {
        public int CompanyID { get; set; }
        public string CompanyName { get; set; }
        public string CompanyCode { get; set; }
        public int Wecare_companyId { get; set; }
        public int LicenseCount { get; set; }
        public bool active { get; set; }
        public int ModifiedBy { get; set; }
        public DateTime Lastmodifiedon { get; set; }
        //Adding a string datetime since it is easier to manipulate in backend
        public string Lastmodifiedonstring { get; set; }
    }
}

您的Controller 将如下所示:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DataTablesExample.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }


        public JsonResult get_date()
        {
            List<Company1> listcomp = new List<Company1>();

            //This is how you are setting your company list. I will show you a basic example by adding hardcoded values
            //DataSet ds = db2layer.show_data();

            //foreach (DataRow dr in ds.Tables[0].Rows)
            //{
            //    listcomp.Add(new Company1
            //    {
            //        CompanyID = Convert.ToInt32(dr["CompanyID"]),
            //        CompanyName = dr["CompanyName"].ToString(),
            //        CompanyCode = dr["CompanyCode"].ToString(),
            //        Wecare_companyId = Convert.ToInt32(dr["Wecare_companyId"]),
            //        LicenseCount = Convert.ToInt32(dr["LicenseCount"]),
            //        active = Convert.ToBoolean(dr["active"]),
            //        ModifiedBy = Convert.ToInt32(dr["ModifiedBy"]),
            //        Lastmodifiedon = Convert.ToDateTime(dr["Lastmodifiedon"])
            //    });
            //}

            listcomp.Add(new Company1
            {
                CompanyID = 1,
                CompanyName = "Company 1",
                CompanyCode = "C1",
                Wecare_companyId = 1,
                LicenseCount = 1,
                active = true,
                ModifiedBy = 1,
                Lastmodifiedon = DateTime.Now,
                Lastmodifiedonstring = DateTime.Now.ToString("dd/M/yyyy", CultureInfo.InvariantCulture)
            });

            listcomp.Add(new Company1
            {
                CompanyID = 2,
                CompanyName = "Company 2",
                CompanyCode = "C2",
                Wecare_companyId = 2,
                LicenseCount = 2,
                active = true,
                ModifiedBy = 1,
                Lastmodifiedon = DateTime.Now,
                Lastmodifiedonstring = DateTime.Now.ToString("dd/M/yyyy", CultureInfo.InvariantCulture)
            });

            listcomp.Add(new Company1
            {
                CompanyID = 3,
                CompanyName = "Company 3",
                CompanyCode = "C3",
                Wecare_companyId = 1,
                LicenseCount = 3,
                active = true,
                ModifiedBy = 1,
                Lastmodifiedon = DateTime.Now,
                Lastmodifiedonstring= DateTime.Now.ToString("dd/M/yyyy", CultureInfo.InvariantCulture)
            });
            var data = listcomp;
            return Json(listcomp, JsonRequestBehavior.AllowGet);
        }
    }
}

最后你的View 看起来像:

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <link href="~/Content/bootstrap4.min.css" rel="stylesheet" />
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/DataTables/dataTables.bootstrap4.min.js"></script>*@

    <!-- CDN LINKS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
    <div class="jumbotron">
        <h1>DataTable Example</h1>
        <p class="lead">A project dedicated to data table example in MVC</p>
    </div>
    <br />
    <center>
        <div style="width: auto; border: 1px solid black; padding: 3px" ;>
            <table id="dataTable">
                <thead>
                    <tr>
                        <th>Company ID</th>
                        <th>Company Name</th>
                        <th>Company Code</th>
                        <th>WeCare Company ID</th>
                        <th>License Count</th>
                        <th>Active</th>
                        <th>Modified By</th>
                        <th>Last Modified On</th>
                        <th>Last Modified On Server String</th>
                    </tr>
                </thead>
            </table>
        </div>
    </center>
    <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    "url": "@Url.Action("get_date", "Home")",
                    "method": "post",
                    "dataType" : "json",
                    success: function (data) {
                        $('#dataTable').DataTable({
                            paging: true,
                            sort: true,
                            searching: true,
                            scrollY: 200,
                            data:data,
                            columns: [
                                { 'data': 'CompanyID'},
                                { 'data': 'CompanyName' },
                                { 'data': 'CompanyCode' },
                                { 'data': 'Wecare_companyId' },
                                { 'data': 'LicenseCount' },
                                { 'data': 'active' },
                                { 'data': 'ModifiedBy' },
                                {
                                    'data': 'Lastmodifiedon'
                                    //'render': function (jsonDate) {
                                    //    var date = new Date(parseInt(jsonDate.substr(13)));
                                    //    var month = date.getMonth() + 1;
                                    //    return month + "/" + date.getDate() + "/" + date.getFullYear();
                                    //}
                                },
                                { 'data': 'Lastmodifiedonstring' }
                            ]
                        });
                    }
                });
            });
    </script>
</body>
</html>

应用程序的示例输出:

如果您会注意到输出中的最后两个字段,您会看到一个字段是模型发送的未格式化的DateTime 字段,另一个字段是格式化的DateTime 字段到Date 字符串。这是因为 DataTables 需要 Date 字段来显示值。所以你有两个选择:

  1. 您可以将Controller 方法中的DateTime 字段转换为格式化的Date 字符串并将其发送到您的View。这就是我正在做的和输出的最后一个字段(服务器字符串上的最后修改)。我更喜欢这种方法,因为 C# 提供了有效的方法来将您的 DateTime 格式化为您需要的格式的 Date

  2. 另一种选择是将您的 DateTime 值发送到您的 DataTable 并根据您的需要对其进行格式化。我还没有尝试过这种方法,但我觉得它可能会导致你的价值出现潜在问题。

希望对你有所帮助。

干杯!

【讨论】:

  • 亲爱的 Rahul 感谢您的时间和回复...实际上我正在尝试从我的数据库中的一个表中获取数据。但我可以清楚地看到您在控制器本身中获取了数据。在获取 JSON 数据时,我希望清楚我的项目中的控制器部分,但我想知道我在项目中的视图部分出错的地方我尝试了很多方法,但它仍然无法正常返回 JSON 数据本身
  • @kiranr 你试过我的方法了吗?您只需要将数据库值设置为您的模型。我正在对它们进行硬编码,但您可以简单地从数据库中获取它。没关系。只需按照我的答案中的步骤操作即可。
  • 亲爱的 Rahul 我试过了,但又一次运气不好..!数据未提取到 Datatable,仅显示 html 表头。
  • @kiranr 你能用你对这个问题的最新尝试来更新你的问题吗?
  • 非常感谢您的端到端支持。它运行良好。
猜你喜欢
  • 2019-04-29
  • 1970-01-01
  • 1970-01-01
  • 2017-04-09
  • 2018-09-07
  • 1970-01-01
  • 1970-01-01
  • 2019-07-31
  • 2011-04-04
相关资源
最近更新 更多