Reputation: 1950

How to use javascript in content page, asp.net

I got a jQuery sample code from tutorial, it's even a single webform sample.

When I integrate it to my project and use it in a content page, the JavaScript doesn't work.

This is my master page code:

<%@ 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>

this is my content page code:

<%@ 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>

In the sample, all script tags and style tags are placed inside the head tag. what should I do to get it to work in my project in the content page?

Edit:

Actually this is a jQuery Dialog example which performs basic add, edit and delete functions on data (Customer)

Current problem is, when the link button "btnAddCustomer" is clicked, dialog box doesn't show, it's probably the javascript is not executing, however, the edit button in gridview using RowCommand can bring up the dialog box.

to better clarify my question, here is the code behind:

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();
    }
}
}

Upvotes: 3

Answers (6)

ArunPratap

Reputation: 5020

when i use it for Content Page i used it like this and it's working for me

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

Upvotes: 1

Khalid Hasan

Reputation: 1

I faced this problem and I searched this for days but in vain
I tested the following:

in content page it is not working
in master page it is working
then in content page I replaced the asp button with html button, then it worked

so the problem is in content page asp button will not hit the script even if you use the reference Id like this

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

Upvotes: 0

Ross Brasseaux

Reputation: 4150

I'll add this answer to reiterate...

Once again, I'm pretty absolutely definitely sure this is your issue.

Try building the page,
then view source,
then find the tag for the btnAddCustomer link button,
then look at the value of the ID property for that button (notice it is different).
Hi-light this new value and copy it.
Paste this value into the linkID parameter of the onClientClick function of the btnAddCustomer linkButton.

TADA! You're all set.

If it still doesn't work try using the function within the onClick event instead of client click, but the above steps definitely need to be taken or it will not work.

Upvotes: 2

Ross Brasseaux

Reputation: 4150

Regarding mandava's answer, the script should work just fine within the content page and by keeping it there you will avoid most caching issues. I believe your problem is this...

Look at your link button that calls the OpenDialog function (btnAddCustomer). It is an asp.net control. Server-side asp.net controls are rendered a different ID value based on certain variables. Try this:

Build the page
View the source
Find the rendered code for the asp.net control.
Use the value of the ID property found in that "view source" code instead.

You'll have to this for any asp.net control ID you are using in your javascript code, but I only spotted the one.

Or an even easier way would be to assign a unique class name to the control (e.g., Class="myLinkButtonClass") and just reference that in the jquery script using $(".myLinkButtonClass")

Hopefully one day we'll have a universal and easy way to reference these asp-generated control IDs but for now this is your best bet. Good luck

Update: DIV elements that do not use the runat="server" property should work just fine with jquery/javascript. The IDs are not modified before being sent to the client. I haven't used Emmanuel's Control.ClientID suggestion, but am very interested to know if it works. Please let us know how that goes!

Upvotes: 2

Emmanuel N

Reputation: 7449

To get dom/html id use Control.ClientID

Something like:

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

Upvotes: 3

mandava

Reputation: 346

Hey why dont you write your script in a new js file and add it to the project and include the script reference in the content page / master page . I had faced a similar issue not exactly the same it may work for you. so try it this way it won't take long any way .......

Upvotes: 1

How to use javascript in content page, asp.net

Answers (6)

Related Questions