0

ASP.NETとJQueryは初めてです。

現在、2つの異なるページをロードし、2つの異なるボタンクリック（ボタンIDで制御）に基づいて値を渡すJQueryのコードがあります。コードを複製しているように見えるので、これをjavascript関数のようなものにして、4つのパラメーター（ページまたはURL、RecordID、幅、高さ）を渡すことができるかどうか疑問に思います。コードで説明しましょう。

私はこれらの2つのボタンを持っています：

<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）」のような1つの関数に組み合わせるにはどうすればよいですか？そして、おそらく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>

runat = "server"として定義する必要があり、OnClientClickイベント呼び出しにエスケープ文字を配置できないため、asp.netボタンマークアップを使用しませんでした。

于 2012-10-17T22:45:17.330 に答える
0

1つのクエリに複数のセレクターをコンマで区切って含めることができます。例：$('#foo, #bar')。したがって、次のようにこれら2つの方法を組み合わせることができます。

$('#<%= 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 に答える