.net mvc使用jquery ajax

最新推荐文章于 2021-11-15 22:53:18 发布

xue251248603

最新推荐文章于 2021-11-15 22:53:18 发布

阅读量929

点赞数

CC 4.0 BY-SA版权

分类专栏：开发技术文章标签： asp.net javascript mvc jquery ajax

本文链接：https://blog.youkuaiyun.com/xue251248603/article/details/42496291

开发技术专栏收录该内容

69 篇文章

订阅专栏

本文介绍了在.NET MVC项目中使用jQuery AJAX进行异步请求的步骤。通过创建一个简单的例子，展示了如何监听输入框事件，发送AJAX请求到后台获取数据，并在前端展示响应内容。文中详细讲解了服务器端控制器的设置以及前端视图和JS文件的编写，实现了输入触发查询并实时更新显示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近学习.net mvc，特此记录一下jquery在其中的用法；

通过简单的例子来说明一下ajax请求在.net MVC中的使用。

首先明确一下目的：网页中有两个输入框，当监听到输入框有输入动作时，ajax请求后台查询相应数据，然后显示响应数据。

下面开始动手：

一、项目准备

1、新建asp.net mvc新项目；ps: 本人环境：vs2013

2、将jQuery文件拷贝到Content目录下；

二、服务器端

1、HomeController中新建方法：AjaxResponseTest()，用来显示视图。代码如下：

       public ActionResult AjaxResponseTest()
        {
            return PartialView();
        }

2、HomeController中新建QueryByYm方法，用来响应Ajax请求。代码如下：

        public ActionResult QueryByYm()
        {
            // Json(queryRst.ToList(), JsonRequestBehavior.AllowGet);
            return Content(DateTime.Now.ToString());
        }

这里并没有什么动态处理，如果要获得参数，可直接使用 Request.QueryString["y"] 来获得，然后查询数据库或者进行其它操作，再返回需要的结果即可。

如果返回Json格式，可以使用Json方法，但注意，如果是Get请求，VS会报错，需要加入 JsonRequestBehavior.AllowGet参数。

三、前台

1、Views/Home路径下新建AjaxResponseTest.cshtml，内容如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="~/Content/themes/Jquery/jquery-1.4.1.min.js"></script>
    <script src="~/Content/js/AjaxMvcTest.js"></script>
    <title>AjaxMvcTest</title>
</head>
<body>
    <div id="queryKw">
        <label>年份：</label>
        <input id="iyear" name="queryInput" type="text" value="" autocomplete="off"><br />
        <label>月份：</label>
        <input id="iMonth" name="queryInput" type="text" value="" autocomplete="off">
    </div>
    <div id="response"><p></p></div>
</body>
</html>

这个文件并没有用到Razor视图引擎，可以自己直接建并改好名称就行。注意jquery-1.4.1.min.js和AjaxMvcTest.js两个js文件的引用路径就好了。

2、content目录中新建AjaxMvcTest.js文件，用来发送前台请求，内容如下：

$(document).ready(function(){
    $.each($("#queryKw [name=queryInput]"), function (idx, item) { jQuery(item).get(0).addEventListener("input", function (obj) { GetResponse(); }) });
});

function GetResponse()
{
    var y = $("#iyear").val();
    var m = $("#iMonth").val();
    $.ajax({
        url: 'QueryByYm',
        datatype: "json",
        data:
            {
                y: y,
                m:m
            },
        success: function (data)
        {
            $("#response p").html(data);
        },
        error: function () {
            alert("未知原因，加载失败！");
        }
    })
}

上面第一行给相应的控件添加了监听事件，输入框有动作时调用GetResponse函数向后台发送请求。url即为控制器中的方法名称。data中是参数。获得响应后，将响应数据添加到页面相应的地方。

好了，下面来参观一下成果：

在输入的时候，下面的日期会发生变化。效果如下：

如果服务器端返回的是JSON格式的数据，使用 eval(data)来获得JSON对象，然后使用each方法循环遍历添加就好了。

可以将以下方法稍加改造：

在html中添加：

<select id="userSelect"></select>

然后修改QueryByYm()方法为：

        public ActionResult QueryByYm()
        {
            List<SelectListItem> list = new List<SelectListItem> { 
            (new SelectListItem(){Text="op1", Value= "1"}),
            (new SelectListItem(){Text="op2", Value= "2"}),
            (new SelectListItem(){Text="op3", Value= "3"})
            };

            return Json(list.ToList(), JsonRequestBehavior.AllowGet);
            //return Content(DateTime.Now.ToString());
        }

最后AjaxMvcTest.js的GetResponse()的success项中修改响应：

        success: function (data)
        {
            // $("#reaponse p").html(data);
            var dataObj = eval(data);
            $.each(dataObj, function (idx, item) {
                $("#userSelect").append("<option value='" + item.Value + "'>" + item.Text + "</option>");
            });
        }

当检测到输入之后，select选项就被加入，效果如下：