我是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;
}