Question

我是ASP.NET和JQuery的新手。

目前，我有JQuery的代码加载两个不同的页面并根据两个不同的按钮点击传递值（按按钮ID控制）。看起来我正在复制代码，所以我想知道我是否可以使这类javascript函数传递4个参数（页面或URL，RecordID，宽度，高度）。让我解释一下代码。

我有两个按钮：

<table width="80%" align="center" >
    <tr>
        <td width="45%"></td>
        <td width="10%" class="PageTitle"></td>
        <td width="45%" style="text-align:right;">
            <asp:Button runat="server" CommandName="buttonCreateApprovedMDF" ID="buttonCreateApprovedMDF" 
            Text="Create Approved MDF" href="ApprovedCreateNew.aspx?AnotherID=" title="Create Approved MDF" class="button3"/>  
            <asp:Button runat="server" CommandName="buttonCreateNote" ID="buttonCreateNote" 
            Text="Create Note" href="ProposalCreateNote.aspx?ProposalID=" title="Create Note" class="button3"/>           
        </td>
    </tr>
</table>

这是JQuery代码（重复），只是Page和RecordID不同，一切都是一样的。

$(document).ready(function () {  
    $('#<%= buttonCreateNote.ClientID %>').live('click', function(e) { 
    e.preventDefault(); 
    var lblID = $("[ID$='ProposalID']").text();
    var page = '<%= ResolveClientUrl("ProposalCreateNote.aspx")%>' + '?ProposalID=' + encodeURIComponent($('span[id$="ProposalID"]').text());
    var pagetitle = $(this).attr("title"); 
    //alert(page); 
    var $dialog = $('<div></div>') 
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"  align="middle"> ></iframe>') 
    .dialog({ 
        autoOpen: false, 
        modal: true, 
        height: 650, 
        width: 900, 
        title: pagetitle 
    }); 
    $dialog.dialog('open'); 
    });

    $('#<%= buttonCreateApprovedMDF.ClientID %>').live('click', function (e) {
        e.preventDefault();
        var lblID = $("[ID$='AnotherID']").text();
        var page = '<%= ResolveClientUrl("ApprovedCreateNew.aspx")%>' + '?AnotherID=' + encodeURIComponent($('span[id$="AnotherID"]').text());
    var pagetitle = $(this).attr("title");
        //alert(page); 
    var $dialog = $('<div></div>')
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"  align="middle"> ></iframe>')
    .dialog({
        autoOpen: false,
        modal: true,
        height: 650,
        width: 900,
        title: pagetitle
    });
    $dialog.dialog('open');
    });
});

这些标签（在DetailsView中），JQuery用于传递参数。

<asp:Label ID="ProposalID" runat="Server" style="text-align:left;" 
Text='<%# Eval("ProposedID")%>' />
<asp:Label ID="AnotherID" runat="Server" style="text-align:left;" 
Text='<%# Eval("AnotherID")%>' />

如何将上面复制的JQuery组合成一个函数，如“OpenIframe（URL，RecordID，Width，Height）”？并可能使用OnClientClick（带有这些参数）来触发IFrame弹出窗口？

提前致谢。

Answer 1

尝试这样的事情：

function OpenIframe(url, recordId, width, height, event)
{
    if(event.preventDefault)
        event.preventDefault(); 
    else
        event.returnValue = false;

    var page = url + "?" + recordId + "="+ encodeURIComponent($('span[id$="' + recordId + '"]').text());
    var pagetitle = $(this).attr("title"); 
    var $dialog = $('<div></div>') 
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"  align="middle"> ></iframe>') 
    .dialog({ 
        autoOpen: false, 
        modal: true, 
        height: height | 650 , 
        width: width | 900, 
        title: pagetitle 
    }); 
    $dialog.dialog('open');
}

你的aspx看起来像这样：

<table width="80%" align="center" >
     <tr>
        <td width="45%"></td>
        <td width="10%" class="PageTitle"></td>
        <td width="45%" style="text-align:right;">
            <input type="button" onclick="OpenIframe('<%= ResolveClientUrl("ProposalCreateNote.aspx")%>', 'ProposalID', 900, 650, event); return false;" value="Create Approved MDF" title="Create Approved MDF" class="button3" />
            <input type="button" onclick="OpenIframe('<%= ResolveClientUrl("ApprovedCreateNew.aspx")%>', 'AnotherID', 900, 650, event); return false;" value="Create Note" title="Create Note" class="button3" />
        </td>
    </tr>
</table>

没有使用asp.net按钮标记，因为您必须将其定义为runat =“server”，并且您无法在OnClientClick事件调用上放置转义字符。

Answer 2

您可以在一个查询中包含多个选择器，以逗号分隔：例如$('#foo, #bar')。因此，您可以将这两种方法结合起来，如下所示：

$('#<%= buttonCreateNote.ClientID %>, #<%= buttonCreateApprovedMDF.ClientID %>').live('click', function(e) {
    e.preventDefault();
    if ($(this).id === '<%= buttonCreateApprovedMDF.ClientID %>') {
        var lblID = $("[ID$='AnotherID']").text();
        var page = '<%= ResolveClientUrl("ApprovedCreateNew.aspx")%>' + '?AnotherID=' + encodeURIComponent($('span[id$="AnotherID"]').text());
    } else if ($(this).id === '<%= buttonCreateNote.ClientID %>') {
        var lblID = $("[ID$='ProposalID']").text();
        var page = '<%= ResolveClientUrl("ProposalCreateNote.aspx")%>' + '?ProposalID=' + encodeURIComponent($('span[id$="ProposalID"]').text());
    } else {
        return;
    }
    var pagetitle = $(this).attr("title");
    var $dialog = $('<div></div>').html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"  align="middle"> ></iframe>').dialog({
        autoOpen: false,
        modal: true,
        height: 650,
        width: 900,
        title: pagetitle
    });
    $dialog.dialog('open');
});

如果可能，ASP.NET Jquery函数合并为一个

2 个答案: