码迷,mamicode.com
首页 > Web开发 > 详细

在 ASP.NET 中使用 jQuery.load() 方法

时间:2015-05-27 08:32:08      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

今天就让我们看看在 ASP.NET 中使用 jQuery.load() 方法来调用 ASP.NET 的方法,实现无刷新的加载数据。 

使用 jQuery 的朋友应该知道可以使用 jQuery.load() 加载静态页面,并可指定要加载的区域,如在"test.html"中有如下内容:

<div id="show">
    <a href="http://www.jquery001.com/">jQuery001</a>
</div>

<div>
    <a href="http://www.xxx.com/">xxx</a>
</div>

在调用页面"Default.aspx"如下:

<body>
    <div id="result"></div>
</body>

$(document).ready(function() {
    $("#result").load("test.html #show");
});

相信大家能够想像到输出的结果,这样调用只会加载 id 为"show" 的 div 中的内容。下边我们进入本文的主题,看看在 ASP.NET 中怎么使用 jQuery.load() 方法无刷新的调用后台方法。假如有后台代码如下,它根据 "owner" 参数,绑定rptTest:

public partial class _Default : System.Web.UI.Page
{
    public List website;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            SetTestData();

            if (!string.IsNullOrEmpty(Request.QueryString["owner"]))
            {
                rptTest.DataSource = website.Where(m => m.Owner == Request.QueryString["owner"]);
                rptTest.DataBind();
            }
        }
    }

    public void SetTestData()
    {
        website = new List();
        website.Add(new Website() { Name = "Google+", Owner = "Google" });
        website.Add(new Website() { Name = "Youtube", Owner = "Google" });
        website.Add(new Website() { Name = "265.com", Owner = "Google" });
        website.Add(new Website() { Name = "asp.net", Owner = "Microsoft" });
        website.Add(new Website() { Name = "MSN", Owner = "Microsoft" });

    }

    protected void btnTest_Click(object sender, EventArgs e)
    {

    }

}

public class Website
{
    public string Name { get; set; }
    public string Owner { get; set; }
}

前台代码如下,执行 "btnTest" 单击事件时,使用 event.preventDefault()阻止了按钮的默认执行方式,从而使用 jQuery.load() 方法传递了"owner"参数访问 Default.aspx 页面:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#result").load("test.html #show");

            $("#<%= btnTest.ClientID %>").click(function(event) {
                event.preventDefault();
                var owner = $("#<%= ddlTest.ClientID %>").val();
                $("#result").load("Default.aspx?owner=" + owner + " #show");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="show">
            <asp:Repeater ID="rptTest" runat="server">
                <ItemTemplate>
                    <div><%#Eval("owner") %><%#Eval("Name") %></div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    <%=DateTime.Now %>
    <div id="result"></div>
    <asp:DropDownList ID="ddlTest" runat="server">
        <asp:ListItem Value="Google">Google</asp:ListItem>
        <asp:ListItem Value="Microsoft">Microsoft</asp:ListItem>
    </asp:DropDownList>
    <asp:Button ID="btnTest" runat="server" Text="查询" onclick="btnTest_Click" />
    </form>
</body>

其他没有什么新知识,其中输出了当前时间来验证使用这种方法并没有刷新页面,结果如下图所示:

技术分享技术分享

在 ASP.NET Webform 中适当使用这种方式可减少页面刷新,从而提高用户体验。你可以从 jQuery学习直接下载在 ASP.NET 中使用 jQuery.load() 方法

http://www.jquery001.com/jquery-load-in-asp-net.html

 

在 ASP.NET 中使用 jQuery.load() 方法

标签:

原文地址:http://www.cnblogs.com/netserver/p/4532392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!