使用/ jQuery动态内容

时间:2011-02-17 19:05:12

标签: c# jquery asp.net

我刚刚开始学习jQuery,并希望将单独的.aspx页面中的内容动态加载到div中。使用此处的示例:http://www.asp.net/ajaxLibrary/jquery_webforms_dynamic_load.ashx?HL=var

然而它似乎没有响应,我可能错过了一些这个。这是我的.aspx页面中的代码/脚本:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>       
<script type="text/javascript">

$(document).ready(function () {
    // External ASPX Page calling   
    $("#btn_Submit").click(loadDynamic);
});

function loadDynamic() {

    $("#dynamicResults").load("ResultsView.aspx", 
        {name: $("#cbox_User").val() },  
        function (content) {   
           $(this).hide().fadeIn("slow");
                return false;
        });
}  

              

<Header>
QUERY VIEW
</Header>

<Content>
    <div style="float:right; height:154px; width: 947px; margin-left: 0px; background-color: #E0E0E0;">
        <br />
        <asp:Label ID="Label2" runat="server" Text="Select a User:" 
                    Style="margin-left:28px" ></asp:Label>

                    <asp:ComboBox ID="cbox_User" runat="server" AutoCompleteMode="SuggestAppend">
                    </asp:ComboBox>

                <asp:Label ID="Label3" runat="server" Text="Select a Month:" 
                                Style="margin-left:28px" ></asp:Label>
            <asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
                <asp:CalendarExtender ID="CalendarExtender1" runat="server" 
                            TargetControlID="txt_Date" 
                            Format="MMMM yyyy" 
                            OnClientShown="onCalendarShown"
                            OnClientHidden="onCalendarHidden"
                            BehaviorID="calendar1" >
                </asp:CalendarExtender>
                <asp:Button ID="btn_Submit" runat="server" Text="Submit" Style="margin-left:28px" onclick="Btn_Submit_Click" />
</div>
</Content>


<Header>
RESULTS VIEW
</Header>

<Content>
    <div id="dynamicResults">
    </div>
    <div style="border-style: none; height:340px; width: 770px; position:relative; top: 10px; left: -2px;">
     <asp:GridView ID="ResultsView" runat="server" CellPadding="3" 
         ForeColor="Black" GridLines="None" AllowPaging="False" 
         Visible="False" 
         Height="318px" style="margin-left: 32px; margin-top: 2px;" Width="718px" 
         BackColor="White" BorderColor="#999999" BorderStyle="Solid" 
         BorderWidth="1px">
        </asp:GridView>
     </div>
</Content>

在第二个.aspx页面中,其中包含一个div,我只想动态加载:

<html xmlns="http://www.w3.org/1999/xhtml">
   <div style="background-color:#E0E0E0; border-style: ridge none none none; border-        width: thin; border-color: #B3B3B3; height:120px; width: 770px;  position:relative;     top: 10px; left: 8px;">
          <asp:Label ID="lbl_Header" runat="server" Text="User  Information:"></asp:Label>
   </div> 
 </html>

1 个答案:

答案 0 :(得分:1)

查看load方法。

以下是该页面的示例:

  

加载页面片段.load()   方法,与$ .get()不同,允许我们使用   指定遥控器的一部分   要插入的文件。这是   用特殊的语法实现了   url参数。如果一个或多个空间   字符串包含在字符串中,   下面的字符串部分   假设第一个空间是a   确定的jQuery选择器   要加载的内容。

     

我们可以将上面的例子修改为   仅使用文档的一部分   取出的:

$('#result').load('ajax/test.html #container');
     

当此方法执行时,它   检索。的内容   ajax / test.html,但随后jQuery解析   返回的文件找到了   ID为容器的元素。这个   元素及其内容是   插入带有ID的元素   结果,其余的   检索到的文件被丢弃。

     

jQuery使用浏览器的.innerHTML   用于解析检索到的属性   记录并将其插入   目前的文件。在此过程中,   浏览器经常过滤元素   文件,如,   或元素。结果,   由.load()检索的元素可能不会   与文件完全相同   由...直接检索   浏览器。

编辑:刚刚注意到在你的函数loadDynamic()中你试图获取控件cbox_User的值,如下所示:

$("#cbox_User").val()

但是,因为它是服务器端控件,所以你需要得到这样的值:

$("#<%=cbox_User.ClientID%.").val()

这是因为.NET为ASP.NET控件提供了与您指定的不同的id。

希望这有帮助。