C#引用JQuery的步骤

最新推荐文章于 2022-01-26 09:43:35 发布
最新推荐文章于 2022-01-26 09:43:35 发布
阅读量5.5k 收藏 1
点赞数
分类专栏： HTML JS 总结

JQuety调用C#后台


一、下载jquery.js文件，这个有很多版本的，百度一下自行下载，我这里测试时用jquery-1.4.2.min.js。

二、创建cs的方法，待javascript测试调用。

       cs的方法必须声明为public static才行，而且前面还要添加“[WebMethod]”，这时候要引入包using System.Web.Services;。

       例如：

     [WebMethod]
    public static string getString(string str)
    {
        return “aaa”;
    }

三、在aspx、htm等页面进行调用cs的方法。

       3.1首先htm页面要引入jquery-1.4.2.min.js文件。

<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>

       3.2然后创建一个通用的javaScript方法getValueByAjax(requestUrl, paramsString)来调用cs的方法，这样就很方便了，具体调用方法如下：

       假如cs方法是test.aspx.cs里面有两个方法，一个是没有参数的，一个是有参数的，

      [WebMethod]
    public static string getName()
    {
        return “aaa”;
    }

 

    [WebMethod]
    public static string getString(string str,int id)
    {
        return str+"_"+id;
    }

这时候在javascript里面调用如下：

var name = getValueByAjax("test.aspx\getName");

var str = getValueByAjax("test.aspx\getName","str:'"+"hahaha’,id:"+123);

在这里要特别注意一下：getValueByAjax方法的参数paramsString可以多个，或者没有，这个要根据调用的cs方法的参数有关系，paramsString的输入值是与cs方法的参数名称和类型有关系的，格式是：参数名称：参数值，假如参数是字符串则参数值还要加上单引号“‘”。

 

四、完整的代码。

cs代码：

[csharp]  view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Services;  
  8.   
  9. public partial class ObjManage : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.   
  14.     }  
  15.   
  16.     [WebMethod]  
  17.     public static string getString()  
  18.     {  
  19.         return "This is JQuery";  
  20.     }  
  21.   
  22.     [WebMethod]  
  23.     public static string getName(string name,int id)  
  24.     {  
  25.         return name + "_" + id;  
  26.     }  
  27. }  


 

htm代码：

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title></title>  
  6.     <script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>  
  7.       
  8.     <script type="text/javascript">  
  9.         var ajaxType = "Post";  
  10.         var ajaxAsync = false;  
  11.         var ajaxContentType = "application/json; charset=utf-8";  
  12.         var ajaxDataType = "json";  
  13.   
  14.         function getValueByAjax(requestUrl, paramsString) {  
  15.             var strRetValue = "";  
  16.             if (paramsString != null)  
  17.                 paramsString = "{" + paramsString + "}";  
  18.             $.ajax({  
  19.                 type: ajaxType,  
  20.                 async: ajaxAsync,  
  21.                 url: requestUrl,  
  22.                 contentType: ajaxContentType,  
  23.                 dataType: ajaxDataType,  
  24.                 data: paramsString,  
  25.                 success: function(data) {  
  26.                     strRetValue = data.d;  
  27.                 },  
  28.                 error: function(err) {  
  29.                     strRetValue = "";  
  30.                 }  
  31.             });  
  32.             return String(strRetValue);  
  33.         }  
  34.   
  35.         function alertString() {  
  36.             var str = getValueByAjax("ObjManage.aspx/getString");  
  37.             alert(str);  
  38.             var name = getValueByAjax("ObjManage.aspx/getName", "name:'Jony', id:" + 123);  
  39.             alert(name);  
  40.         }  
  41.     </script>  
  42. </head>  
  43. <body>  
  44. <input type="button" value="获取信息" onclick="alertString();" />  
  45. </body>  
  46. </html>  


 

 

以上都通过了测试，假如哪位有什么问题，可留言！



C#后台调用JQuery

XML/HTML code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testJqFun.aspx.cs" Inherits="testJqFun" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head  runat = "server" >
     < title ></ title >
     < script  type = "text/javascript"  src = "js/jquery.js" ></ script >
     < script  type = "text/javascript"  >
         function jqueryFun() {
             alert("我是被后台调用的");
             alert("用jq获取div内容为："+$("#d1").html());
         }
     </ script >
</ head >
< body >
     < form  id = "form1"  runat = "server" >
     < div  id = "d1"  style = "display:none" >
     asdfasdf
     </ div >
     </ form >
</ body >
</ html >


C# code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
using  System;
using  System.Collections.Generic;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;
 
public  partial  class  testJqFun : System.Web.UI.Page
{
     protected  void  Page_Load( object  sender, EventArgs e)
     {
         //调用前台jq方法
         Page.ClientScript.RegisterStartupScript( this .GetType(),  "pop" ,  "jqueryFun()" , true ); 
     }
}

dragon_ton
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
C#编程--JQuery学习
月光下的麦田的博客
02-22 688
jQuery中的顶级对象$(jQuery对象) 相当于是命名空间 jQuery代码示例： &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; //------------直接使用js实现-------------- window.onload = function () { alert('窗体加载完毕111'...
android通过webview+jquery设计界面
zhanhao2027的博客
07-04 196
  相信UI设计是很多人头疼的问题，今天看了一个视频是通过webview+html 设计UI界面，想了一想可以将jquery整合进去(我以前是学做网站的，jquery可以实现很多效果)所以做了个demo，我这个demo只是实验下我的猜想是否可行，不是真正的ui设计，所以更多的是效果的实现界面挺难看的。 (demo在附件中) 先上图：     关键代码(demo在附件中)： -------...
jQuery
乃智的博客
06-29 699
jQuery jQuery基本介绍 jQuery是一款主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作，做事件、动画、ajax处理等。 官方地址：https://jquery.com/ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aGWNnu0Y-1624926353747)(C:\Users\naizhi\AppData\Roaming\Typora\typora-user-images\ima
C#中使用angular的方法步骤
08-25
以下是一份详细步骤，帮助你理解如何在C# ASP.NET MVC项目中使用Angular。 1. **创建ASP.NET MVC项目** 首先，你需要在Visual Studio中创建一个新的ASP.NET MVC项目。选择"File" -> "New" -> "Project"，然后在...
jquery实现（textarea）placeholder自动换行
10-20
在 HTML 中，创建一个 `textarea` 元素，并为其指定一个唯一的 `id`，例如 `text1`，以便在 JavaScript 或 jQuery 中引用它。 ```html <textarea id="text1"></textarea> ``` 2. **jQuery 方法**： 接下来，我们...
jquery 无缝滚动 demo
11-09
1. 引入jQuery库：首先需要在HTML文件中引入jQuery库，通常通过CDN链接或本地文件引用。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. HTML结构：创建一个包含图片的容器...
c#调用百度地图API 源码
09-10
在C#编程环境中，开发人员...通过以上步骤，开发者能够创建一个功能完善的地图应用，让用户在C#环境下享受到类似Web端的百度地图功能。同时，这也是一种跨平台技术的实践，结合了桌面应用的交互性和Web服务的便利性。
C# Html5 + jquery 绘制动态圆饼图
04-01
3. **使用jQuery和Ajax**：编写JavaScript代码，使用jQuery的$.ajax或$.getJSON方法定期（例如，每隔几秒）向C#后端发送请求，获取最新的圆饼图数据。 4. **解析和绘制数据**：在接收到新数据后，使用Canvas的API...
Jquery+json+Csharp实例
07-13
Jquery+json+Csharp实例,方便用户快速掌握Jquery+json技术， 代码放入网站即可用，已调试成功。
JQueryC#代码
07-09
本解决方案是JQuery方法的一些总结，来自创智播客。
C#JQuery学习（二）技巧总结
兰丝龙 专栏
12-06 2726
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jque
C# 使用jquery 中Ajax异步调用。详解。教程详解
小姐姐
03-20 1330
参考网上的例子 比较容易懂的，适合我这样的初学者。 用了两种方式，一个是简单的Ajax异步程序，另一个是一般处理程序 一、这个是简单的Ajax异步程序。直接在后台处理请求。 在demo1.aspx页面操作 $(function () { //这个是页面初始化 $("#btn1").click(function () { var...
C#基础 Razor之与jQuery交互不得不说的坑
Ca_va的博客
07-24 815
2020年了，居然还有可恶的老系统，还有可恶的Razor，哎。。。。 代码通过@helper初始化数据,生成HtmlResult的类型数据 @helper Html_HourOptions() { for (int i = 0; i < 24; i++) { <option value="@i">@i.ToString("00")</option> } } @helper Html_MinuteOptions() { for (i
jQuery基础知识①
weixin_54835055的博客
05-16 186
jQuery基础知识① 一、概念：jQuery是一个JavaScript函数库，是一个轻量级的“写的少，做的多”的JavaScript库 二、jQuery库的功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示：除此之外，jQuery还提供了大量的插件 三、jQuery语法是通过选取 HTML 元...
Jquery调用C#后台方法
weixin_30670151的博客
08-05 332
前台代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS直接调用C#方法</title> <script type="text/javascript" src="/Scripts/Jqu...
JQuery按照form下载文件+后台asp.net，非ajax(下)
ruoshui1314的专栏
11-18 781
前面说到通过js form方式POST数据，那后台应该怎么处理了。 因为这代码的框架是一个外包写的，写的很复杂，可能也是之前所有的系统的合集。 暂时也没有时间去整理，所以只是在原有方式上增加功能。 作为一个C++的工程师，现在去搞前端。。。。      后台有两种办法处理，一般的方式是先生成本地文件，然后在发送，还有就是直接发送数据。 我目前采用的是先生成本地文件。 看看代码吧 v
c#操作jQuery删除指定行
猫敷雪
01-26 487
之前在用c#操作jQuery的时候，需要对页面进行删除操作，由于对前端不是很熟悉，因此借鉴了别的一些做法。 前端操作的主要原理就是在标签中添加一个删除函数，定位到要删除的位置，直接remove整个tr标签里的数据即可。 主要就是找到元素的位置即可。 <td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td> function article_del(obj){
C#实现WebUploader大文件分片上传教程
"该资源是关于在C#环境中利用WebUploader实现大文件分片上传的教程，包含了必要的代码示例和引用文件。WebUploader是一个基于jQuery的文件上传组件，能够支持大文件分片上传，提高上传效率。" 在C#项目中使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值