3

我从教程中得到了一个 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>

在示例中，所有 script 标签和 style 标签都放在 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();
    }
}
}
4

6 回答 6

3

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

就像是：

 $("#"+ <%= divEditCustomer.ClientID %>)
于 2012-12-27T15:49:00.277 回答
2

关于 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 建议，但很想知道它是否有效。请让我们知道情况如何！

于 2012-12-27T15:30:51.083 回答
2

我将添加此答案以重申...

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

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

多田！你都准备好了。

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

于 2012-12-27T19:18:04.310 回答
1

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

于 2012-12-27T15:26:52.523 回答
1

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

$("#<%= YourControlID.ClientID %>")
于 2018-06-29T07:32:32.137 回答
0

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

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

所以问题出在内容页面中，即使您像这样使用参考 ID，asp 按钮也不会命中脚本

$("<%= yourbutton.ClientID%>").click(yourscript)
于 2016-07-22T11:50:47.847 回答