jquery - jquery asp加载内容

Question

（我在 asp.net 工作）我正在寻找一种方法来拥有一个带有 jquery.toggle 的 div（加/减按钮）

仅当 div 可见时才需要加载 div 的内容（需要在页面加载时隐藏）。

我是否“需要”拥有一个包含我的 div 内容的页面

或者我可以在 div 中使用更新面板。并调用面板加载他的内容。

我不想重新加载我的页面，因为我在页面中有多个块 div，如果用户需要，可以加载它们。而且他们每个人里面都有太多的数据。

任何提示，
坦克你

Answer 1

我会定期使用 ajax 从 web 服务或 pagemethod（实际上是 web 服务...）加载此类内容，单击扩展图标 (+) 调用服务，返回数据（作为 JSON）然后应用到加载页面时在隐藏的 div 中加载的模板，并将其插入到在单击事件中切换为可见的 div 中...

如果这符合您的需求，那就太好了；如果没有，请更具体地说明您要完成的工作。

[编辑：根据要求的代码示例]

<div>
<asp:Repeater ID="CategoryRepeater" runat="server">
    <HeaderTemplate><div id="CategorySpace"></HeaderTemplate>
    <ItemTemplate>
        <div id="CategoryHeaderRow_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>" class="CategoryHeader">
            <input type="hidden" id="CategoryID" runat="server" value='<%# Eval("CATEGORY_ID") %>' />
            <!-- THIS IS THE EXPANSION ICON -->
            <input type="button" id="expandCategory_<%# Eval("CATEGORY_NM").ToString() %>" class="CategoryExpandButton" value="+" onclick="expandCategory(this,'<%# ((CRMS.PageBase)this.Page).UserId %>','<%# Eval("CATEGORY_ID") %>');" isloaded="<%#(string)Eval("LOAD_ON_DEMAND_CD")=="N"?"Y":"N" %>" />

            <span id="CategoryCount_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/")  %>" class="CategoryLabel" style="width:50px;"><%# Eval("Count_Qy")%></span>
            <span id="CategoryName" class="CategoryLabel"><%# Eval("CATEGORY_NM") %></span>
            <img id="InfoIcon_<%# Eval("CATEGORY_NM") %>" src="images/InfoIcon.png" alt="<%# Eval("CATEGORY_INFO_TX") %>" class="CategoryInfo" />
        </div> 
        <div id="categoryItems_<%# Eval("CATEGORY_NM").ToString().Replace(" ","_").Strip("(,),-,/") %>"  class="hidden itemsContainer " style="width:990px;overflow:scroll;">
            <div id="categoryItems" runat="server">
            </div>
        </div>

    </ItemTemplate>
    <FooterTemplate></div></FooterTemplate>
</asp:Repeater>
</div>

扩展图标的点击事件会触发这个 JavaScript：

/*
Expands the ToDo Categories and initiates ajax call for
lazy loading ToDo Items when needed
*/
function expandCategory(sender, UserID, CategoryID) {
    window.status = "";
    var senderID = "#" + sender.id;
    var action = $(senderID).val();

    $(senderID).val($(senderID).val() == "+" ? "-" : "+");
    var CategoryItemsID = "#" + sender.id.replace("expandCategory", "categoryItems");
    $(CategoryItemsID).toggleClass("hidden");

    if (action == "+"
            && sender.isloaded == "N") {
        //Find any controls with a pq_Value attribute and 
        //use those values with the selected category id 
        //to load items. 
        var params = $('[pq_Value]');
        var inputParameters = "";
        for (x = 0; x < params.length; x++) {
            inputParameters += "{" + params[x].p_Name + "|" + params[x].p_Type + "|" + $(params[x]).attr("pq_Value") + "}";
        }
        PageMethods.LoadCategoryItems(UserID, CategoryID, inputParameters, 0, RecieveCategoryData, RecieveCategoryError);
        //Set Is Loaded to (Y)es
        sender.isloaded = "Y";
    }
}

当您调用PageMethods.LoadCategoryItems...这应该是一个典型的 ajax 调用，将内容发送回另一个 JavaScript 函数：

function RecieveCategoryData(msg) {
    var msgs = msg.split('||');
    if (msgs.length == 7) {
        var category_name = msgs[0].replace(/ /g, "_");

        //strip undesirable characters from the name: (,),-,/ 
        category_name = category_name.replace(/\(/g, "").replace(/\)/g, "").replace(/\-/g, "").replace(/\//g, "");
        var UserID = msgs[1];
        var jsonData = jQuery.parseJSON(msgs[6]);

        var container = $("#categoryItems_" + category_name);
        var categoryCountLabel = $("[id*=CategoryCount_" + category_name + "]")[0]
        var categoryCount = categoryCountLabel.innerText;

        if (parseInt(msgs[4]) < 52) {
            var header = $("#" + category_name + "_Header").html();
            $(container).html(header);
        }
        //var ItemContainer = $("#" + category_name + "_Items");

        var templateText;
        var x = 0;
        var y = 0;
        var fieldName;
        var fieldToken;
        var jsonValue;
        for (i = 0; i < jsonData.length; i++) {
            templateText = document.getElementById(category_name + "_Template").innerHTML;

            //templateText = $("#" + category_name + "_Template").html();
            templateText = templateText.replace("[{ACTIVE_USER_ID}]", UserID);
            templateText = templateText.replace("[{numDataRow}]", i % 2 == 0 ? "evenDataRow" : "oddDataRow");

            //templateText = templateText.replace("[target]","'" + targetString + "'");

            x = templateText.indexOf('[{');
            while (x < templateText.length && x > -1) {
                y = templateText.indexOf('}]', x + 2);
                fieldToken = templateText.substring(x, y + 2);
                fieldName = fieldToken.replace('[{', '').replace('}]', '').toUpperCase();
                jsonValue = jsonData[i][fieldName];

                if (fieldName == "REMARK_TX" && jsonValue != null) {
                    jsonValue = jsonValue.substring(0, jsonValue.length <= 35 ? jsonValue.length : 35);
                }

                if (jsonValue != null &&
                    jsonValue.toString().indexOf("\Date") > -1
                    ) {
                    if (fieldName != "UPDATED_DT") {
                        jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy");
                    } else {
                        jsonValue = new Date(parseInt(jsonValue.substr(6))).format("MM/dd/yyyy h:mm:ss tt");
                    }
                } else if (jsonValue == null) {
                    jsonValue = "";
                }

                //identify if the value is blank and it is being inserted
                //into a hyperlink (determined by the ");" following the 
                //replacement token.
                //If so, insert the "disabled='true'" attribute to the string.
                if (jsonValue == ""
                    && templateText.substring(y + 2, y + 4) == ");") {
                    var strDisable = " disabled='true'";
                    var split = y + 5;
                    var beginning = templateText.substring(0, split);
                    var ending = templateText.substring(split);
                    templateText = beginning + strDisable + ending;

                }


                templateText = templateText.replace(fieldToken, jsonValue);


                x = templateText.indexOf('[{');
            }
            //$("#" + category_name + "_Items").append(templateText);
            $(container).append(templateText);
        }

        if (parseInt(msgs[4]) < parseInt(msgs[5])) { //if there are more records remaining to get...
            PageMethods.LoadCategoryItems(msgs[1], msgs[2], msgs[3], msgs[4], RecieveCategoryData, RecieveCategoryError);
        }

        if (getParameterByName("showCount")) {
            if (parseInt(msgs[4]) < parseInt(msgs[5])) {
                window.status = "Loading " + msgs[4] + " of " + msgs[5] + ".";
            } else if (parseInt(msgs[4]) == parseInt(msgs[5])) {
                window.status = "Load Complete: " + msgs[5] + " records.";
            } else { //if (parseInt(categoryCount) != parseInt(msgs[4] 
                window.status = "expecting records: " + categoryCount + " showing records: " + parseInt(msgs[4]);
            }
        }

        //format currency cells to $x,xxx.cc
        //var test = $(".jq_currFormat");
        $(".jq_currFormat").each(function () {
            var num = $(this).text();
            if (num.indexOf("]") == -1) {
                num = num.toString().replace(/\$|\,/g, '');
                if (isNaN(num)) num = "0";
                sign = (num == (num = Math.abs(num)));
                num = Math.floor(num * 100 + 0.50000000001);
                cents = num % 100;
                num = Math.floor(num / 100).toString();
                if (cents < 10) cents = "0" + cents;
                for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
                    num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
                $(this).text((((sign) ? '' : '-') + '$' + num + '.' + cents));
                $(this).removeClass("jq_currFormat");
            }
        });


    }
}

此函数将识别和复制正在显示的数据类别的模板，并使用 JSON 中的实际值查找和替换数据标记。

Answer 2

我已经这样做了很多次，我通常将我的 div 隐藏在 javascript 的最顶部，然后在任何有意义的事件上显示。加载 div 的方式没有区别，我有时觉得烦人的唯一一件事就是找到合适的 div，因为我们仍然使用 ASP.NET 重写控件名称的方式。这很容易通过在 jQuery 中使用带有选择器的结尾来解决。

高温高压

Answer 3

如果您只想隐藏/显示一些信息，您可以通过隐藏和显示 div 中的数据来使用它，如下所示

<a href="#" id="link">Show</a>

<div id="divMore" style="display:none;">
    <p>some content goes here</p>
</div>

和脚本是

$(function(){
    $("#link").click(function(){       
       if($(this).text()=="Show") 
       {
           $("#divMore").slideDown();
           $(this).text("Hide");
       }
       else
       {
           $("#divMore").slideUp();
           $(this).text("Show");
       }           
    });    
});​

这是一个示例http://jsfiddle.net/VdPAz/8/

如果您必须根据页面中的某些元素显示一些大型动态内容（例如：单击用户名时在表格中显示付款历史记录），您可以执行 jQuery 加载来获取该数据

 var userId=5; // read from the page/source of click
 $("#divMore").load("getuserdata.php?userid="+userId);

Answer 4

当然，您可以为此使用 UserControl。

这将是 A 的代码：

<tr>
    <td>
        <asp:UpdatePanel runat="server" ID="uppShowB" UpdateMode="Conditional">
            <ContentTemplate>
                <br />
                <asp:LinkButton runat="server" ID="btnShowB" Text="(+)"
                    OnClick="btnShowB_Click"></asp:LinkButton>
                <wuc:BControl runat="server" ID="wucBControl" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </td>
</tr>

//Invocation of the javascript function that will show ControlB as a jquery Dialog
protected void btnShowB_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.uppShowB, typeof(UpdatePanel), "popupB", "ShowB('" + this.wucBControl.GetPanelId() + "," + this.btnShowB.ClientID + "');", true);
}

在 ControlB 中，您必须将所有内容都放在 Panel 中，并确保它的样式具有 display:none

<asp:Panel runat="server" ID="pnlBPanel" CssClass="Invisible">

</asp:Panel>

//and in the css:

.Invisible
{
    display: none;
}

//and in the cs:
public string GetPanelId()
{
    return this.pnlPopUpDetalles.ClientID;
}

最后，显示 ControlB 的 javascript 函数：（它显示为没有标题，位于切换 (+) 按钮下方。也许坐标需要一些调整）

function ShowB(panelClientId, btnToggleClientId)
{        
    ancho = 250;
    alto = 'auto';
    var x = $("#btnToggleClientId").offset().left + $("#btnToggleClientId").outerWidth() - ancho;
    var y = $("#btnToggleClientId").offset().top + $("#btnToggleClientId").outerHeight() - $(document).scrollTop();            
    var $dialog = $("#panelClientId")
        .dialog({
            autoOpen: false,
            hide: "puff",                   
            width: ancho,
            height: alto,
            draggable: false,
            resizable: true,
            closeOnScape : true,
            position: [x,y]                    
        });
    $dialog.dialog("open");            
    $("#panelClientId").siblings(".ui-dialog-titlebar").hide();

    $("#panelClientId").focus();

    $("body")
      .bind(
       "click",
       function(e){
            if(
                 $("#panelClientId").dialog("isOpen")
                 && !$(e.target).is(".ui-dialog, a")
                 && !$(e.target).closest(".ui-dialog").length
              )
            {
             jQuery("#panelClientId").dialog("close");
            }
       });                        
    return false;
}