65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 中使用 Jquery 实现 Ajax 的简易方法

VeeKeyBee
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (3投票s)

2010 年 8 月 27 日

CPOL

3分钟阅读

viewsIcon

58703

downloadIcon

1159

使用 Jquery 和 ASP.NET 进行 Ajax 操作的简单步骤

引言

本文列出了使用 Jquery 和 ASP.NET 对服务器执行异步操作的一些简单步骤。 我使用 Visual Studio 2008、Jquery 和 C# 来执行此操作。 在这里，我只提供用于执行该操作的代码。 我介绍了在不使用处理程序的情况下将数据传递到服务器页面的方法。 这对于对 ASP.NET 及其工作原理有所了解，并且是 Jquery 初学者的人来说非常有用。

背景

感谢 Jquery 以最少的代码完成出色的操作。 显然，ASP.NET 中的服务器控件始终支持回发操作。 在这里，我提到了一些代码，这些代码适用于从 aspx 页面插入数据。 它可以来自弹出窗口或简单的 aspx。

Using the Code

请按照以下步骤执行我的代码。 我希望您知道如何使用 Visual Studio 创建 aspx 站点。

步骤 1。 创建一个网站项目，希望您会有一个 *Default.aspx* 页面。

步骤 2。 将一些控件放置在表单中。 请确保我们使用的是 HTML 控件，而不是 ASP.NET 服务器控件。 如果我们使用服务器控件，则很难在传递到 aspx 页面时序列化控件。 因此，我们使用带有 server 标记的 HTML 控件。

<input type="text" runat="server" id="txtName" />
<input type="text" runat="server" id="txtAge" />

这里我使用了两个输入类型的文本框，但它们将具有唯一的 Id 并且将在 server 处运行。 因此，它将类似于 ASP 控件。 我们无法使用它们获得 ASP 事件。 在“*default.aspx*”中，可以使用“txtName.ClientID”等进行访问。

步骤 3。 您需要添加 jquery 源文件才能获取该版本中提到的函数。 请单击此处获取版本(jquery-1.4.2.min.js)。 请访问 www.jquery.com 下载该文件。

步骤 4。 确保正确指定了 JavaScript 的源路径。

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

步骤 5。 现在使用 Jquery 执行操作。 请确保您使用 Jquery 的 document ready 函数。

   $(document).ready(function(){// code                           });

步骤 6。 执行 JavaScript 编码

  function saveData(){
           $.ajax({
               type: 'POST',
               url: getUrl('test'),
               data: {
                   name: $('#frmAdd').serialize()

               },
               cache: false,
               error: function(xhr, status, errorThrown) {
                   alert(errorThrown + '\n' + status + '\n' + xhr.statusText);
               },
               success: function(html) {
                   if (html.toString().indexOf("successfully") > 0) {
                            alert(html);
                   }
                   else {
                               alert(html);
                   }

               },
               dataType: 'html'
           });
        }

在这里，我们使用 $.ajax 方法来执行 Ajax 操作。 我没有提到有关该函数的信息。 请查看 www.jquery.com 以获取有关该函数的更多信息。 在这里，我们使用“POST”方法将数据发送到服务器。 URL 将是 aspx 页面的 URL。 我们也可以在此处调用函数或直接给出 URL。 可以将查询字符串与 URL 一起传递。 在这里，我们使用 jquery 序列化方法序列化整个表单和控件。 当服务器发生错误时，错误部分将执行该函数。 当服务器操作或发生回复时，将执行成功函数。 此处的 HTML 将返回服务器的响应。 由于我们使用 text/html 作为响应，因此我们将数据类型指定为 HTML。

步骤 7。 将一个 HTML 按钮添加到表单，然后在它的“onClick”上调用 saveData()

<input type="button" id="btnSave" value="Save" onclick="saveData()" />

步骤 8。 现在是在 C# 中进行一些服务器端编码的时候了。 所以转到 *Default.aspx.cs*

if (Request.Params["name"] != null)
{
    prms = Request.Params["name"].ToString();
    App_Utilities.JQDeSeriazile controls = 
	new Jquery_Asp.Net.App_Utilities.JQDeSeriazile(Request.Params["name"]);
    string name = controls[txtName.UniqueID].Value;
    string age = controls[txtAge.UniqueID].Value;
    string strMsg = "Employees successfully Allocated";
    Response.Flush();
    Response.Expires = -1;
    Response.Write(strMsg);
    Debug.Write(strMsg);
Response.End();
}

步骤 9。 类 JQDeSerialize 是一个用户定义的类，用于反序列化 jquery 序列化的数据。 jquery 序列化将转换成以下格式。 我们需要使用 '&' 分割它。 使用用户定义的类分割后，我们需要给它唯一的 id 属性来获取值

  txtName=q&txtAge=w //this will be the format of Jquery Serialization

无法根据索引选择值。 因此，您必须按以下方式指定值

  string name = controls[txtName.UniqueID].Value;
  string age = controls[txtAge.UniqueID].Value;

所以你将从文本框中获取值。 您可以使用这些值来保存数据。

关注点

使用 Jquery 进行工作很有趣，因为它支持各种功能和方法，可以使界面更具吸引力。

历史

  • 创建于 2010 年 8 月 27 日
  • 修改于 2010 年 8 月 28 日
© . All rights reserved.