如何在内容页面中使用javascript，asp.net

我从教程中获得了一个jQuery示例代码，它甚至是一个webform示例。

当我将它集成到我的项目并在内容页面中使用它时，JavaScript不起作用。

这是我的主页代码：

这是我的内容页面代码：

         <script type="text/javascript" src="Scripts/jquery.blockUI.js"> <script type="text/javascript" src="Scripts/ScriptFile.js">   .ui-widget { font-size: 11px !important; } .ui-state-error-text { margin-left: 10px; }   $(document).ready(function() { $("#divEditCustomer").dialog({ autoOpen: false, modal: true, minHeight: 20, height: 'auto', width: 'auto', resizable: false, open: function(event, ui) { $(this).parent().appendTo("#divEditCustomerDlgContainer"); }, }); }); function closeDialog() { //Could cause an infinite loop because of "on close handling" $("#divEditCustomer").dialog('close'); } function openDialog(title, linkID) { var pos = $("#" + linkID).position(); var top = pos.top; var left = pos.left + $("#" + linkID).width() + 10; $("#divEditCustomer").dialog("option", "title", title); $("#divEditCustomer").dialog("option", "position", [left, top]); $("#divEditCustomer").dialog('open'); } function openDialogAndBlock(title, linkID) { openDialog(title, linkID); //block it to clean out the data $("#divEditCustomer").block({ message: '<img src="content/images/async.gif" />', css: { border: '0px' }, fadeIn: 0, //fadeOut: 0, overlayCSS: { backgroundColor: '#ffffff', opacity: 1 } }); } function unblockDialog() { $("#divEditCustomer").unblock(); } function onTest() { $("#divEditCustomer").block({ message: '
Processing
', css: { border: '3px solid #a00' }, overlayCSS: { backgroundColor: '#ffffff', opacity: 1 } }); }   
 Customers
 
 
    
 
 
 *First Name: 
 
   
 
 
 
 *Last Name: 
 
   
 
 
 
 *Email: 
 
    
 
 
 
 Phone: 
 
  
 
 
 
 Date of Birth: 
 
   
 
 
 
   
 
 
    
 
  <!-- 

  

 -->    
 
             <asp:LinkButton ID="btnEdit" Text="Edit" CommandName="EditCustomer" CausesValidation="false" CommandArgument='' runat="server"> <asp:LinkButton ID="btnDelete" Text="Delete" CommandName="DeleteCustomer" CausesValidation="false" CommandArgument='' runat="server">               

在示例中，所有脚本标记和样式标记都放在head标记内。 我该怎么做才能让它在我的项目内容页面中运行？

---

编辑：

实际上这是一个jQuery Dialog示例，它对数据执行基本的添加，编辑和删除function（Customer）

当前的问题是，当单击链接按钮“btnAddCustomer”时，对话框没有显示，可能是javascript没有执行，但是，使用RowCommand的gridview中的编辑按钮可以调出对话框。

为了更好地澄清我的问题，这里是代码背后：

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication2 { public partial class WebForm1 : System.Web.UI.Page { private CustomerService _customerService; #region Properties private bool IsAdd { get { return (!EditCustomerID.HasValue); } } private int? EditCustomerID { get { return (int?)ViewState["EditCustomerID"]; } set { ViewState["EditCustomerID"] = value; } } #endregion protected void Page_Load(object sender, EventArgs e) { _customerService = new CustomerService(); if (!IsPostBack) { GridDataBind(); } } private void GridDataBind() { gvCustomers.DataSource = _customerService.GetAll(); gvCustomers.DataBind(); } protected void btnAddCustomer_Click(object sender, EventArgs e) { this.EditCustomerID = null; ClearEditCustomerForm(); //In case using non-modal RegisterStartupScript("jsUnblockDialog", "unblockDialog();"); } private void ClearEditCustomerForm() { //Empty out text boxes var textBoxes = new List(); FindControlsOfType(this.phrEditCustomer, typeof(TextBox), textBoxes); foreach (TextBox textBox in textBoxes) textBox.Text = ""; //Clear validators var validators = new List(); FindControlsOfType(this.phrEditCustomer, typeof(BaseValidator), validators); foreach (BaseValidator validator in validators) validator.IsValid = true; } static public void FindControlsOfType(Control root, Type controlType, List list) { if (root.GetType() == controlType || root.GetType().IsSubclassOf(controlType)) { list.Add(root); } //Skip input controls if (!root.HasControls()) return; foreach (Control control in root.Controls) { FindControlsOfType(control, controlType, list); } } protected void gvCustomer_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.DataItem == null) return; var btnEdit = (LinkButton)e.Row.FindControl("btnEdit"); btnEdit.OnClientClick = "openDialogAndBlock('Edit Customer', '" + btnEdit.ClientID + "')"; } protected void gvCustomers_RowCommand(object sender, GridViewCommandEventArgs e) { int customerID = Convert.ToInt32(e.CommandArgument); switch (e.CommandName) { //Can't use just Edit and Delete or need to bypass RowEditing and Deleting case "EditCustomer": Customer customer = _customerService.GetByID(customerID); FillEditCustomerForm(customer); this.EditCustomerID = customerID; RegisterStartupScript("jsUnblockDialog", "unblockDialog();"); //Setting timer to test longer loading //Thread.Sleep(2000); break; case "DeleteCustomer": _customerService.Delete(customerID); GridDataBind(); break; } } private void FillEditCustomerForm(Customer customer) { txtFirstName.Text = customer.FirstName; txtLastName.Text = customer.LastName; txtEmail.Text = customer.Email; txtPhone.Text = customer.Phone; txtDateOfBirth.Text = customer.DateOfBirth.HasValue ? customer.DateOfBirth.Value.ToShortDateString() : ""; } private void TriggerClientGridRefresh() { string script = "__doPostBack(\"" + btnRefreshGrid.ClientID + "\", \"\");"; RegisterStartupScript("jsGridRefresh", script); } private void RegisterStartupScript(string key, string script) { ScriptManager.RegisterStartupScript(phrJsRunner, phrJsRunner.GetType(), key, script, true); } protected void btnSave_Click(object sender, EventArgs e) { if (!Page.IsValid) return; Customer customer; if (this.IsAdd) customer = new Customer(); else customer = _customerService.GetByID(this.EditCustomerID.Value); customer.FirstName = txtFirstName.Text; customer.LastName = txtLastName.Text; customer.Email = txtEmail.Text; customer.Phone = txtPhone.Text; if (!String.IsNullOrEmpty(txtDateOfBirth.Text)) customer.DateOfBirth = DateTime.Parse(txtDateOfBirth.Text); if (this.IsAdd) _customerService.Add(customer); else _customerService.Update(customer); HideEditCustomer(); TriggerClientGridRefresh(); } private void HideEditCustomer() { ClearEditCustomerForm(); RegisterStartupScript("jsCloseDialg", "closeDialog();"); } protected void btnCancel_Click(object sender, EventArgs e) { HideEditCustomer(); } protected void btnRefreshGrid_Click(object sender, EventArgs e) { GridDataBind(); } } } 

Answer 1

关于mandava的答案，脚本应该在内容页面中正常工作，并且通过将其保留在那里，您将避免大多数缓存问题。 我相信你的问题是这个……

查看调用OpenDialog函数的链接按钮（btnAddCustomer）。 它是一个asp.net控件。 服务器端asp.net控件基于某些变量呈现不同的ID值。 试试这个：

1. 构建页面
2. 查看来源
3. 找到asp.net控件的呈现代码。
4. 请改用在“查看源代码”代码中找到的ID属性的值。

对于您在javascript代码中使用的任何asp.net控件ID，您必须这样做，但我只发现了一个。

或者更简单的方法是为控件分配一个唯一的类名（例如，Class =“myLinkBut​​tonClass”），并使用$（“。myLinkBut​​tonClass”）在jquery脚本中引用它。

希望有一天我们会有一个通用且简单的方法来引用这些asp生成的控件ID，但现在这是你最好的选择。 祝好运

更新：不使用runat =“server”属性的DIV元素应该可以正常使用jquery / javascript。 在发送到客户端之前不会修改ID。 我没有使用过Emmanuel的Control.ClientID建议，但我很想知道它是否有效。 请告诉我们这是怎么回事！

Answer 2

要获取dom / html id，请使用Control.ClientID

就像是：

  $("#"+ <%= divEditCustomer.ClientID %>) 

Answer 3

我会补充这个答案重申……

再一次，我非常肯定这是你的问题。

1. 尝试构建页面，
2. 然后查看来源，
3. 然后找到btnAddCustomer链接按钮的标签，
4. 然后查看该按钮的ID属性的值（注意它是不同的）。
5. 高亮显示这个新值并复制它。
6. 将此值粘贴到btnAddCustomer linkBut​​ton的onClientClick函数的linkID参数中。

TADA！ 你们都准备好了。

如果它仍然无效，请尝试使用onClick事件中的函数而不是客户端单击，但上述步骤肯定需要采取或不起作用。

Answer 4

嘿，为什么不在新的js文件中编写脚本并将其添加到项目中，并在内容页面/母版页中包含脚本引用。 我遇到过类似的问题，它可能对你有用。 所以试试这种方式不会花费太长时间…….

Answer 5

当我将它用于内容页面时，我就像这样使用它，它对我有用

 $("#<%= YourControlID.ClientID %>") 

Answer 6

我遇到了这个问题，我搜索了几天但是徒劳无功
我测试了以下内容：

• 在内容页面中它无法正常工作
• 在母版页中它正在工作
• 然后在内容页面我用html按钮替换了asp按钮，然后它工作了

所以问题是在内容页面asp按钮不会打到脚本，即使你使用像这样的引用ID

 $("<%= yourbutton.ClientID%>").click(yourscript)