如果可能，將ASP.NET Jquery函數合併爲一個

Question

我是ASP.NET和JQuery的新手。

目前，我有代碼爲JQuery加載兩個不同的頁面和基於兩個不同的按鈕點擊（通過按鈕ID控制）傳遞值。看起來好像我在複製代碼，所以我想知道是否可以通過JavaScript函數來傳遞4個參數（Page或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的代碼（複製），剛剛頁面和的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，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 =」服務器「，你將無法將轉義字符放在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'); 
});​