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>
原文地址:https://www.cnblogs.com/love-zf/p/6558964.html