0

我是 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');
    });
});

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

<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，宽度，高度）”？并可能使用 OnClientClick （带有这些参数）来触发 IFrame 弹出窗口？

提前致谢。

4

2 回答 2

0

尝试这样的事情：

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 事件调用上放置转义字符。

于 2012-10-17T22:45:17.330 回答
0

您可以在单个查询中包含多个选择器，以逗号分隔：例如$('#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');
});​
于 2012-10-17T22:55:53.280 回答