如何使用Ajax调用加载jquery数据表,从多个表中加载表详细信息(Master,Detail)

时间:2017-05-24 17:01:58

标签: jquery asp.net-mvc-5 datatables entity-framework-6

新的,仍然是网络技术的学习者。这里需要指示如何做到这一点的正确方法。 为了解释我正在寻找的要点,这是一个简单的模型,它映射到我正在使用的数据库结构。

三个表实体:公司员工 EmpDetail

关系:公司 1 __ * 员工,员工 1__1 EmpDetail

因此,我的页面顶部有Company个详细信息,以及属于该公司的Employees数据表。每个Employee(表行)都有一个 Load 操作链接,该链接用于在Bootstrap弹出模式或任何类型的对话框中打开FORM,该对话框显示相应员工的EmpDetails。我可以编辑/更新EmpDetails并使用ajax.beginForm()将此表单提交回服务器,即仅使用ajax发回更新的EmpDetails。

所有这一切都已经完成,直到我尝试使用ajax加载数据表并且困惑很长时间。

为什么Ajaxing Datatable?所以,这是因为我想在Employee DataTable中有一个状态列,当你更改EmpDetails并提交它时它会发生变化。因此,我希望每次用户在Empdetail中进行更改后刷新Datatable。 “我希望它有意义”:),所以就像我研究过的那样,你使用AJAX调用来执行数据表重载/刷新位。所以是的,这就是为什么。

所以在通过Ajax调用加载任何东西之前我很容易使用ViewModel类,它定义了一个Employees列表。并将所有内容加载到一起。

public class CompanyViewModel
{
    // Some Company table prperties
    public long Id { get; set; }
    public string Name { get; set; }

    public list<Employee> listOfEmployees { get; set; }
}

现在我希望数据表加载ajax,每个员工行都有一个链接来打开员工详细信息表,以便可以对其进行编辑。

我见过很多线程和方法,但它们随着要求而变化。我不希望这里有任何延迟加载。我希望员工Datatable一次性加载,让jquery Datatable插件处理客户端的分页,因为员工列表不是很大。

非常感谢任何吸烟,特别是一些详细介绍这些概念的精心撰写的文章。谢谢,

我正在使用实体框架来管理我的实体。

1 个答案:

答案 0 :(得分:0)

关于这个主题的文章很好,我会开始here

然后here,还有部分34也可以查看,我认为本教程几乎涵盖了您想要了解的有关数据库插件的所有基础知识

请记住,您会找到很多示例here

如果您已经知道如何使用数据表但是您只想加载许多数据,请使用回调,

drawCallback: function (oSettings) {
    if (oSettings.aiDisplay.length > 0) {
        for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
            var row = oSettings.aoData[oSettings.aiDisplay[i]];
            var rowItem = row.nTr;
            //Assuming you are loading employee, row._aData will be the current employee object.
            // this will get his id for example  
            var empid = row._aData.EMPID;
            var empDetail = row._aData.EmpDetail;
            //do something with EmpDetail, (maybe add to hidden div), or display in another cell in this row 
            // ex
            $('td:eq(4)', rowItem).html("some html template + emp detilas");     
        } 
    }
}

另请注意,如果您的linq没有加载员工的详细信息,则会抛出错误, 你可以像这样加载它

var empdata = dbcontext.Employees.Include(g => g.EmpDetail).toList();

我希望有所帮助。