`
ikeycn
  • 浏览: 146566 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

asp.net MVC3 + JQuery 的ajax简单使用

阅读更多
asp.net MVC3 + JQuery 的ajax简单使用

一直都没有使用过JQuery,更没使用过JQuery的ajax支持带来的方便,今天试了一下,真是减少了很多工作量,使用方法也比较简单
这里先记下来,以后使用时可以再拿着用。

本应用中,本来是准备使用长链接的方式,在server端有错误消息产生时,能实时返回错误消息。可在使用长链接时,因为.net功底
不够,以失败告终!所以采用了javascript中间隔查询的方法。
页面代码如下:
@{
    ViewBag.Title = "ErrorMonitor";
}
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

    $(function () {

        setInterval(ajaxRequest, 1000);
    });
    function ajaxRequest() {

        $.ajax(
        {
            url: '/TopDemo/Home/ErrorRefresh',		// 指定调用的URL,对应于Controller
            data: '{}',								// 如果请求有参数,需要在这里指定
            type: "POST",							// 请求类型
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {				// 请求成功后的回调
                if (data == null || data.length == 0) {
                    return false;
                } else {
                    writeMsg(data);
                }
            },
            error: function (data) {				// 请求失败后的回调
                alert(data.statusText);
            }
        }
    );
    }

    function writeMsg(data) {
        var errorDiv = document.getElementById("errorDiv");
        for (var i = 0; i < data.length; i++) {
            var errorText = document.createTextNode(data[i].errMsg);
            var errorTextDiv = document.createElement("div");
            errorTextDiv.appendChild(errorText);
            if (errorDiv.hasChildNodes) {
                errorDiv.insertBefore(errorTextDiv, errorDiv.firstChild);
            } else {
                errorDiv.appendChild(errorTextDiv);
            }
        }
    }

</script>
<h2>
    错误监控</h2>
<div id="errorDiv">
</div>

Controller的代码也很简单,就是简单的把错误消息列表以json格式返回给View,如下:

 [HttpPost]
 public JsonResult ErrorRefresh()
 {
    int errMsgSize = errMsgService.Size();
    List<object> errors = new List<object>();
    if (errMsgSize > 0)
    {
		for (var i = 0; i < errMsgSize; i++)
        {
            ErrorMessageModel errMsg = errMsgService.Remove();
            if (errMsg != null) 
            {
                errors.Add(new
                {
                    errMsg = "error:  " + errMsg.ErrorType + "," + errMsg.ErrorKey + "," + errMsg.ErrorTime + "," + errMsg.ErrorMsg
                });
           }
        }
	}
    JsonResult result = this.Json(errors);
    return result;
 }
分享到:
评论

相关推荐

    Asp.Net MVC之jQuery与AJAX操作实例

    在Asp.Net MVC框架中,jQuery和AJAX的结合使用极大地提升了用户体验,使得网页能够实现异步数据交互,无需刷新整个页面即可完成数据的增删查改操作。本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一...

    基于ASP.NET MVC4+JQuery easyui的企业管理系统开发案例源码

    《基于ASP.NET MVC4+JQuery easyui的企业管理系统开发详解》 在当今信息化时代,企业管理系统已经成为企业管理不可或缺的一部分。本文将深入探讨一个基于ASP.NET MVC4框架和JQuery EasyUI库构建的企业管理系统的...

    007-ASP.NET MVC5+EasyUI企业开发框架源码.7z

    这个框架是ASP.NET的一部分,它结合了Model-View-Controller(MVC)设计模式,提供了对ASP.NET Web API的支持,使得开发RESTful服务变得简单。EasyUI则是一个基于jQuery的UI库,为开发者提供了大量的前端组件,如...

    ASP.NET MVC5+EasyUI企业开发框架源码-

    ASP.NET MVC5是一种微软开发的开源Web应用程序框架,它结合了ASP.NET Web Forms的事件驱动模型和MVC(Model-View-Controller)设计模式,为Web应用开发提供了更灵活、可测试的架构。该框架主要面向专业开发人员,...

    asp.net mvc4+汉化包

    3. **razor视图引擎**:这是ASP.NET MVC4中的默认视图引擎,其语法简洁,支持C#和VB.NET,使得视图的编写更为直观和高效。 4. ** Areas**:对于大型项目,ASP.NET MVC4引入了区域(Areas)的概念,它允许将一个大型...

    asp.net mvc+jquery开发的商业项目

    了解如何使用jQuery的$.ajax()函数进行异步数据交互,以及如何与ASP.NET MVC的Ajax动作方法配合。 6. **jQuery UI和插件**:可能涉及到jQuery UI库,用于创建高级的用户界面元素,如对话框、日期选择器、拖放功能等...

    ASP.NET MVC3 + JMail

    通过学习这个示例,开发者不仅可以掌握如何在ASP.NET MVC3中使用JMail发送邮件,还能了解如何整合jQuery和AJAX以创建交互式的Web应用。此外,理解MVC设计模式对于提升Web开发技能至关重要,因为它鼓励分离关注点,...

    asp.net mvc2.0+前台Jquery+IbatisNet+Castle

    总的来说,这个Demo项目结合了ASP.NET MVC2.0的后端框架、Jquery的前端交互、IbatisNet的数据访问以及Castle的依赖注入,提供了一个完整的Web应用程序示例,适合学习和理解这些技术的集成使用。通过研究这个项目,你...

    asp.net mvc+jquery+Nhibernate 实现数据库增删改

    本项目“asp.net mvc+jquery+Nhibernate 实现数据库增删改”就是一个典型的应用实例,它结合了.NET框架中的ASP.NET MVC、jQuery和Nhibernate三个核心技术,为开发高效、易维护的Web应用提供了有力支持。 **ASP.NET ...

    Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

    综上所述,这个项目是一个综合性的企业网站演示,利用了Spring.NET、NHibernate、ASP.NET MVC、jQuery 和 easyUI 这些技术栈,展示了如何将开源框架整合在一起,构建一个中英文双语的小型企业网站。通过学习这个项目...

    asp.net+Web+mvc4.0 EasyUI 最新 权限管理系统源码教程

    Zephyr.Net 企业版是基于Asp.Net MVC4.0 + WebAPI + Knockout 技术,采用EasyUI为前台开发展示UI,Knockout主要负责前端的逻辑交互,再结合jQuery Ajax进行提交数据请求。 二、框架特色 1、基于 ASP.NET MVC4.0 + ...

    ASP.NET MVC2+SP1补丁

    ASP.NET MVC2(Model-View-Controller)是微软推出的一款用于构建可测试和可维护的Web应用程序的框架,它基于ASP.NET技术。该框架引入了MVC设计模式,旨在提高开发人员的工作效率,并且提供了更好的分离关注点,使得...

    Asp.Net MVC案例教程

    最后,Asp.Net MVC还集成了AJAX支持,使你可以创建部分页面更新的应用,提高用户体验。通过jQuery和Ajax.BeginForm等方法,可以实现异步请求,而无需刷新整个页面。 综上所述,Asp.Net MVC教程的案例涵盖了模型-...

    ASP.NET MVC使用JQuery系列

    6. **JQuery与ASP.NET MVC的结合**:学习如何在ASP.NET MVC应用中引入和使用JQuery,实现动态交互效果,如表单验证、异步数据加载等。了解如何使用JQuery AJAX方法与服务器进行通信,更新页面内容而无需刷新整个页面...

    NHibernte+ASP.NET MVC+JQuery实现增删改查

    本案例"NHibernate+ASP.NET MVC+JQuery实现增删改查"就是这样一个典型的组合,结合了ORM(对象关系映射)工具NHibernate、MVC(模型-视图-控制器)设计模式和前端交互库jQuery,以实现数据库操作的基本功能。...

    dwz框架 asp.net mvc3

    MVC3是ASP.NET MVC系列的第三个主要版本,它引入了许多新特性,如 Razor视图引擎、增强的模型绑定、对jQuery的内置支持以及更强大的错误处理机制。 当DWZ框架与ASP.NET MVC3结合使用时,可以实现前后端分离的开发...

    Asp.Net MVC+Jquery ajaxfileupload实现文件上传(v1.0.0)

    总结,Asp.Net MVC结合Jquery的ajaxfileupload插件提供了一种简单而实用的文件上传解决方案。开发者可以通过这种方式在项目中轻松实现文件上传功能,同时确保兼容主流浏览器。在实际应用中,还可以根据需求扩展功能...

    jquery +asp.net MVC+多种分页样式源码

    在IT领域,jQuery、ASP.NET MVC以及分页样式是构建高效、用户友好的Web应用程序的重要组成部分。本资源“jquery +asp.net MVC+多种分页样式源码”提供了一个实用的解决方案,结合了这些技术,旨在优化数据加载和用户...

    Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 序章

    在本项目中,我们主要探讨的是使用Asp.Net MVC4框架进行Web应用开发,并结合Oracle数据库、EasyUI前端框架和Bootstrap样式库来构建一个高效、美观的用户界面。以下是关于这些技术的详细说明: 1. **Asp.Net MVC4**...

Global site tag (gtag.js) - Google Analytics