ASP.NET 前端Ajax获取数据并刷新
控制器中↓
/// <summary> /// 根据ID来进行展示数据 /// </summary> /// <param name="instru_id"></param> /// <returns></returns> public ActionResult About(int instru_id) { ViewBag.Message = "Your application description page."; using (DBEntities db = new DBEntities()) { List<T_Instrument> instru_data_list = (from db_instru in db.T_Tablewhere db_instru.ID == instru_idselect db_instru).Take(50).Skip(0).ToList(); if (instru_data_list.Count > 0) { ViewBag.old_id = instru_data_list[0].InstrumentDataID; ViewBag.channel_index = instru_data_list[0].ChannelIndex; } ViewBag.instru_id = instru_id; ViewData["instru_data_list"] = instru_data_list; } return View(); } /// <summary> /// Ajax查询数据 /// </summary> /// <param name="instru_id"></param> /// <returns></returns> public JsonResult GetData(int instru_id) { using (StationMonitoringDBEntities db = new StationMonitoringDBEntities()) { List<T_Instrument> instru_data_list = (from db_instru in db.T_Instrumentwhere db_instru.ID == instru_idselect db_instru).Take(1).Skip(0).ToList(); if (instru_data_list.Count > 0) { ViewBag.channel_index = instru_data_list[0].ChannelIndex; } return Json(instru_data_list); } }
视图中↓
@using Domain;//引用的实体类的命名空间 @{ ViewBag.Title = "About"; } @Scripts.Render("~/bundles/jquery")<input type="button" id="btnBegin" name="btnBegin" value="连接数据库<针对实际项目,其它项目不需要这部分>" /> <input type="text" disabled id="begin_state" value="" /> <br /> <input type="text" id="id_msg" name="id_msg" value="要发送的字符串...根据这个字符串会向数据库添加数据 @ViewBag.channel_index" style="display:none;" /> <input type="button" id="btnSub" name="btnSub" value="数据库添加数据" /> <input type="text" disabled id="id_send_state" value="" style="display:none;" /> <input style="display:none;" id="hid_id" value="@ViewBag.old_id" /><table id="_table" border="1" width="960" height="50" align="center" style="text-align:center;font-size:15px;"> <thead> <tr> <td>ID</td> <td>名称</td> </tr> </thead> <tbody id="_tbody"> @foreach (JoinInstrumentData jid in ViewData["instru_data_list"] as IEnumerable<JoinInstrumentData>) { <tr> <td>@jid.ID</td> <td>@jid.Name</td> </tr> } </tbody> </table> <script type="text/javascript"> $(document).ready(function () { Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小时 "m+" : this.getMinutes(), //分 "s+" : this.getSeconds(), //秒 "q+" : Math.floor((this.getMonth()+3)/3), //季度 "S" : this.getMilliseconds() //毫秒 }; if(/(y+)/.test(fmt)) { fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(fmt)){ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return fmt; } var interval_id=0; //表格用到的变量 var _table = document.getElementById("_table"); var _tbody = document.getElementById("_tbody"); //这是一些操作,然后向数据库中添加数据... $("#btnSub").click(function () { get_data(); var msg = $("#id_msg").val(); $.ajax({ type: "POST", url: "/Home/sendbutton_Click", data: { "id": "xxxxxx", "msg_send": msg }, success: function (sesponseTest) { //alert(sesponseTest); alert("开始添加数据."); $("#id_send_state").val(sesponseTest); }, error: function (XMLHttpRequest, textStatus, errorThrown) { $("#id_send_state").val(errorThrown); alert("保存失败:" + errorThrown); } }); }); function get_data() { interval_id= setInterval(start_get, 10000); //alert(interval_id); } function start_get() { //alert("55"); $.ajax({ type: "POST", url: "/Home/GetData", data: { "instru_id": @ViewBag.instru_id, }, success: function (json_data) { json_data[0].CreateTime = eval('new ' + (json_data[0].CreateTime.replace(/\//g, ''))); json_data[0].CreateTime=new Date(json_data[0].CreateTime).format("yyyy/MM/dd hh:mm:ss"); //判断返回的id,如果一致,销毁这个定时器clearInterval(interval_id); var id = json_data[0].InstrumentDataID; var old_id = $("#hid_id").val(); //alert("old_id"+old_id); //alert("new_id"+id); if (id != old_id) { var _tr = document.createElement("tr"); var _td = document.createElement("td"); ////var _tab_len =_table.rows.length; _td.appendChild(document.createTextNode(json_data[0].InstrumentTypeName)); var row; row=_table.insertRow(1); var cell = row.insertCell(0); var e = document.createElement("tr"); cell.appendChild(document.createTextNode(json_data[0].InstrumentTypeName)); cell.appendChild(e); //---有待优化...!!!! cell = row.insertCell(1); cell.appendChild(document.createTextNode(json_data[0].InstrumentCode)); cell.appendChild(e); clearInterval(interval_id);//销毁定时器 $("#hid_id").val(id); }else { } //alert(sesponseTest); //$("#id_send_state").val(sesponseTest); }, error: function (XMLHttpRequest, textStatus, errorThrown) { //$("#id_send_state").val(errorThrown); alert("保存失败:" + errorThrown); } }); } //连接 $("#btnBegin").click(function () { $.ajax({ type: "POST", url: "/Home/conbtn_Click", success: function (sesponseTest) { //alert(sesponseTest); $("#begin_state").val(sesponseTest); }, error: function (XMLHttpRequest, textStatus, errorThrown) { //$("#txt1").val(errorThrown); alert("保存失败:" + errorThrown); } }); }); }); </script>