使用ASP.NET中的AJAX替换现有div与另一个div

时间:2015-08-30 07:49:02

标签: javascript jquery html asp.net ajax

我是ASP.NET新手但擅长Java,我需要知道如何使用新div更新div(div元素可以在其中包含一些文本,想要更改)。我正在学习ASP.NET,所以我尽力做到这一点!假设我的Default.aspx页面的div为:

          <head runat="server">
        <title>Untitled Page</title>
        <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <script type="text/javascript">

        function change(){
                $.ajax({
                    type: "GET",
                    url: "temp.aspx/Hello",
                    dataType: "html",
                    success: function(msg) {
                        console.log(msg);
                        $("#changer").html(msg);
                    }
                });
            }
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
                <div id="changer">
                    <asp:Label ID="country" runat="server">USA</asp:Label>
                </div>
                    <input type="button"id="but" value="Hello Changer" onclick="change()"/>

        </form>
    </body>

我想用id = changer更改div!让我们假设我的temp.aspx页面如下:

         <body>
            <form id="form1" runat="server">
            <div>
               Hello Text <asp:Label ID="lab" runat="server"></asp:Label>
            </div>
            </form>
        </body>

所以temp.aspx.cs将是:

[WebMethod]
public static String Hello()
{
    try
    {
        //Do here server event  
        System.Diagnostics.Debug.WriteLine("SomeText ");
         //this method is not called by the AJAX for some of my blunder, I don't even know
         //because if its called by the AJAX code the out will show SomeText string in output console!
        return " Hello";
    }
    catch (Exception)
    {
        throw;
    }
}

所以问题是如何从AJAX代码中调用web方法,因为我正在学习ASP.NET,我可以帮助我解决它的问题 提前谢谢!

1 个答案:

答案 0 :(得分:2)

我对ASP.NET知之甚少,但使用AJAX和jQuery可以做到这一点:

$("#changer").load("new_div.html");

这会将文件new_div.html加载到#changer div

如果new_div.html文件中有特定的div,你可以通过将其id添加到jQuery AJAX调用来加载这个div:

$("#changer").load("new_div.html#content");

这将只加载

<div id="content">
    Content...
</div>

来自new_div档案