Asp.Net MVC4中的Jquery数据表?

时间:2014-07-18 08:16:52

标签: jquery asp.net-mvc asp.net-mvc-4 razor

我是Asp.Net MVC的新手。在asp.net mvc4中,我试图将数据绑定到jquery数据表,但同样不绑定到数据表。我在下面使用Asp.net MVC4是我的代码请检查我做得对,请帮帮我,谢谢。

View Code [index.cshtml]    
 @using (Html.BeginForm("Index", "BingJGrid", FormMethod.Post, new { id = "searchForm" }))
{
  <div id="searchbtn">
        <input id="Search" type="submit" value="Search" />
    </div>        
 <div id="Div1" style="width:1100px;margin-left:12%;"  ></div>
}

@section script {     

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/>
<script src="Scripts/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery-ui.js"></script>    
<script src="Scripts/jquery.dataTables.js"></script>
<script src="Scripts/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css" />
<link href="Scripts/mystyle.css" rel="stylesheet" />


<script type ="text/javascript" >
$(function() {
$('#searchForm').submit(function() {
    $.ajax({
        type: "POST",
        url: "BingJGrid/Index",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {                 
            var mydts = response.d.Table;            
            SuccessUsers(mydts);
        },
        failure: function () {
            alert("error")
        }
    });
});
});

function SuccessUsers(data) {

    $("#Div1 *").remove();                  //using mDataProp binding columns data from json response
    $("#Div1").append("<table id='grdtab' class='myGrid' cellspacing='0' cellpadding='0'  border='1'> <thead> </thead> <tbody> </tbody> </table>");
    // defining columns here
    var REQUIREMENT_ID = { mDataProp: "stateid", sTitle: "State ID", sWidth: "10%" };
    var COSTCENTER = { mDataProp: "districtid", sTitle: "District IDr" };
    var MIN_EXPERINCE = { mDataProp: "statename", sTitle: "State Name" };       

    columns = [REQUIREMENT_ID, JOB_TITLE, COSTCENTER];


    datab = $('#grdtab').dataTable({
        'aaData': data,
        'bRetrieve': true,
        'bPaginate': false,
        'bJqueryUI': true,

        //"bProcessing": true,
        "sScrollY": "450px",
        "bAutoWidth": false,
        "sScrollX": "100%",
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).children("td").css("overflow", "hidden");
            $(nRow).children("td").css("white-space", "nowrap");
            $(nRow).children("td").css("text-overflow", "ellipsis");
        },

        "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
            return "Displaying " + iStart + " to " + iEnd + " of " + iTotal + " Users.";    // customize footer text here
        },

        'aoColumns': columns,
        "fnRowCallback": function (nRow, adata, iDisplayIndex, iDisplayIndexFull)//adding buttons to each row 
        {
            $(nRow).find("td:eq(9)").text('').append("<input type='button' id='btnModify' class='btnGreen' onclick='ModifyConfirm()' value='Modify' />");

            $(nRow).find("td:eq(10)").text('').append("<input type='button'  class='btnGreen' onClick='DeleteConfirm(" + adata.REQUIREMENT_ID + ")' value='Delete' />");
        }
    });
}

}

控制器中的操作方法:

  [HttpGet]
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public  ActionResult   Index(string   s)
    {
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["sqlCon"].ToString());
        conn.Open();
        DataSet ds = new DataSet();
        string cmd = "select * from states";
        SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);

        adp.Fill(ds);
        conn.Close();

        DataTable dt = new DataTable();
        dt = ds.Tables[0];

        return View ( ToJson(dt));
    }

    private static Dictionary<string, object> ToJson(DataTable table)
    {
        Dictionary<string, object> d = new Dictionary<string, object>();
        d.Add(table.TableName, RowsToDictionary(table));
        return d;
    }

    private static List<Dictionary<string, object>> RowsToDictionary(DataTable table)
    {
        List<Dictionary<string, object>> objs =
        new List<Dictionary<string, object>>();
        foreach (DataRow dr in table.Rows)
        {
            Dictionary<string, object> drow = new Dictionary<string, object>();
            for (int i = 0; i < table.Columns.Count; i++)
            {
                drow.Add(table.Columns[i].ColumnName, dr[i]);
            }
            objs.Add(drow);
        }

        return objs;
    }

0 个答案:

没有答案