Question

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

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

这是我的母版页代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

这是我的内容页面代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!-- from http://encosia.com/2009/10/11/do-you-know-about-this-undocumented-google-cdn-feature/ -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
    type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%= ResolveUrl("~")%>Scripts/jquery.blockUI.js"></script>
<script type="text/javascript" src="<%= ResolveUrl("~") %>Scripts/ScriptFile.js"></script>
<!-- fix for 1.1em default font size in Jquery UI -->
<style type="text/css">
    .ui-widget
    {
        font-size: 11px !important;
    }
    .ui-state-error-text
    {
        margin-left: 10px;
    }
</style>
<script type="text/javascript">
    $(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="<%=ResolveUrl("~") %>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: '<h1>Processing</h1>',
            css: { border: '3px solid #a00' },
            overlayCSS: { backgroundColor: '#ffffff', opacity: 1 } 
        });
    }
</script>
<asp:ScriptManager ID="scriptManager" runat="server" />
<h1>
    Customers</h1>
<div id="divEditCustomerDlgContainer">
    <div id="divEditCustomer" style="display: none">
        <asp:UpdatePanel ID="upnlEditCustomer" runat="server">
            <ContentTemplate>
                <asp:PlaceHolder ID="phrEditCustomer" runat="server">
                    <table cellpadding="3" cellspacing="1">
                        <tr>
                            <td>
                                *First Name:
                            </td>
                            <td>
                                <asp:TextBox ID="txtFirstName" Columns="40" MaxLength="50" runat="server" />
                                <asp:RequiredFieldValidator ID="vtxtFirstName" runat="server" EnableClientScript="false"
                                    CssClass="ui-state-error-text" Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtFirstName" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                *Last Name:
                            </td>
                            <td>
                                <asp:TextBox ID="txtLastName" Columns="40" MaxLength="50" runat="server" />
                                <asp:RequiredFieldValidator ID="vtxtLastName" runat="server" EnableClientScript="false"
                                    CssClass="ui-state-error-text" Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtLastName" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                *Email:
                            </td>
                            <td>
                                <asp:TextBox ID="txtEmail" Columns="40" MaxLength="50" runat="server" />
                                <asp:RequiredFieldValidator ID="vtxtEmail" runat="server" EnableClientScript="false"
                                    CssClass="ui-state-error-text" Display="Dynamic" ErrorMessage="Required." ControlToValidate="txtEmail" />
                                <asp:RegularExpressionValidator ID="vtxtEmail2" runat="server" EnableClientScript="false"
                                    CssClass="ui-state-error-text" ControlToValidate="txtEmail" ValidationExpression=".*@.*\..*"
                                    ErrorMessage="Not a valid email." Display="Dynamic" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Phone:
                            </td>
                            <td>
                                <asp:TextBox ID="txtPhone" Columns="20" MaxLength="20" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Date of Birth:
                            </td>
                            <td>
                                <asp:TextBox ID="txtDateOfBirth" Columns="10" MaxLength="20" runat="server" />
                                <asp:CompareValidator ID="vtxtDateOfBirth" runat="server" EnableClientScript="false"
                                    CssClass="ui-state-error-text" ControlToValidate="txtDateOfBirth" ErrorMessage="Not a valid date."
                                    Operator="DataTypeCheck" Type="Date" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right">
                                <asp:Button ID="btnSave" OnClick="btnSave_Click" Text="Save" runat="server" />
                                <asp:Button ID="btnCancel" OnClick="btnCancel_Click" OnClientClick="closeDialog()"
                                    CausesValidation="false" Text="Cancel" runat="server" />
                            </td>
                        </tr>
                    </table>
                </asp:PlaceHolder>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>
<!-- divEditCustomerDlgContainer -->
<!--
    <br /><br />
    <input type="button" id="btnTest" onclick="onTest" value="Test" />
    <br /><br />
    -->
<asp:UpdatePanel ID="upnlCustomers" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:LinkButton ID="btnAddCustomer" Text="Add Customer" runat="server" OnClientClick="openDialogAndBlock('Add Customer', 'btnAddCustomer')"
            CausesValidation="false" OnClick="btnAddCustomer_Click"></asp:LinkButton>
        <br />
        <br />
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CellPadding="4"
            CellSpacing="1" OnRowDataBound="gvCustomer_RowDataBound" OnRowCommand="gvCustomers_RowCommand">
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <%# Eval("FirstName") + " " + Eval("LastName")%>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Phone" HeaderText="Phone" />
                <asp:BoundField DataField="Email" HeaderText="Email" />
                <asp:BoundField DataField="DateOfBirth" HeaderText="Date Of Birth" DataFormatString="{0:MMMM d, yyyy}" />
                <asp:TemplateField HeaderText="Actions">
                    <ItemTemplate>
                        <asp:LinkButton ID="btnEdit" Text="Edit" CommandName="EditCustomer" CausesValidation="false"
                            CommandArgument='<%#Eval("ID")%>' runat="server"></asp:LinkButton>
                        <asp:LinkButton ID="btnDelete" Text="Delete" CommandName="DeleteCustomer" CausesValidation="false"
                            CommandArgument='<%#Eval("ID")%>' runat="server"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:LinkButton ID="btnRefreshGrid" CausesValidation="false" OnClick="btnRefreshGrid_Click"
            Style="display: none" runat="server"></asp:LinkButton>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upnlJsRunner" UpdateMode="Always" runat="server">
    <ContentTemplate>
        <asp:PlaceHolder ID="phrJsRunner" runat="server"></asp:PlaceHolder>
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" src="Content/scripts/ScriptFile.js">
</script>

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

编辑：

实际上这是一个jQuery对话框示例，它对数据执行基本的添加，编辑和删除功能（客户）

当前的问题是，当单击链接按钮“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<Control>();
        FindControlsOfType(this.phrEditCustomer, typeof(TextBox), textBoxes);

        foreach (TextBox textBox in textBoxes)
            textBox.Text = "";

        //Clear validators
        var validators = new List<Control>();
        FindControlsOfType(this.phrEditCustomer, typeof(BaseValidator), validators);

        foreach (BaseValidator validator in validators)
            validator.IsValid = true;
    }


    static public void FindControlsOfType(Control root, Type controlType, List<Control> 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

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

类似的东西：

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

Answer 2

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

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

构建页面
查看来源
找到asp.net控件的渲染代码。
使用在“查看源代码”代码中找到的ID属性的值。

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

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

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

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

Answer 3

我会添加这个答案重申...

再一次，我绝对肯定这是你的问题。

尝试构建页面，
然后查看来源，
然后找到btnAddCustomer链接按钮的标签，
然后查看该按钮的ID属性的值（注意它是不同的）。
高亮显示此新值并将其复制。
将此值粘贴到onClientClick的linkID参数中 btnAddCustomer linkButton的功能。

TADA！你们都准备好了。

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

Answer 4

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

Answer 5

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

在内容页面中无效
在母版页中正在运行
然后在内容页面中我用html按钮取代了asp按钮，然后就可以了

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

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

Answer 6

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

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

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

6 个答案: