JQuery in ASP.Net Web form with a master page

问题

I have a page named CoursesPage.aspx and it has a Master Page. In CoursesPage.aspx I'm using the autocomplete jquery on the course name for better searching. This is my script code:

<link rel="stylesheet" href="css/jquery-ui.css" />

    <script src="js/jquery-1.8.3.js" type="text/javascript" language="javascript"></script>

    <script src="js/jquery-ui.js" type="text/javascript" language="javascript"></script>

    <script type="text/javascript" language="javascript">
        function LoadList() {
            var ds = null;
            ds = <%=listFilter %>
        $("#txtName3").autocomplete({
            source: ds
        });
        }
    </script>

This code works fine if I don't use the Master Page. However, I can't put this in the Content tag in the CoursesPage.aspx. It needs to be in the head tag but I can't add that in a content tag. Please guide me.

Secondly, this function is called on the load of the body tag but I can't add a body tag either.

回答1:

You can add a content place holder in the head of the masterpage for example:

<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>

Then in the page, you can add your script to the head of the master page, by wrapping it in a content tag that references head like so:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="css/jquery-ui.css" />

    <script src="js/jquery-1.8.3.js" type="text/javascript" language="javascript"></script>

    <script src="js/jquery-ui.js" type="text/javascript" language="javascript"></script>

    <script type="text/javascript" language="javascript">
        function LoadList() {
            var ds = null;
            ds = <%=listFilter %>
        $("#txtName3").autocomplete({
            source: ds
        });
        }
    </script>
</asp:Content>

This cannot be nested in any other content tags.

回答2:

In your master page there are two ContentPlaceHolder tags, one in the head and the other in the body. You'll have to add two Content tags in your Courses.aspx page and set the one of the ContenetPlaceHolderID attributes to the master page head's ContentPlaceHolder. For example: Your master page:

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

<!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">
<asp:ContentPlaceHolder ID="Head" runat="server">

</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="Content" runat="server">

</asp:ContentPlaceHolder>
</body>
</html>

and your aspx page:

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="WebForm2.aspx.cs" Inherits="ResponsiveTemplate.WebForm2" %>

<asp:Content ID="content1" runat="server" ContentPlaceHolderID="Head">
<link rel="stylesheet" href="css/jquery-ui.css" />

<script src="js/jquery-1.8.3.js" type="text/javascript" language="javascript"></script>

<script src="js/jquery-ui.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript" language="javascript">
    function LoadList() {
        var ds = null;
        ds = <%=listFilter %>
    $("#txtName3").autocomplete({
        source: ds
    });
    }
</script>
</asp:Content>
<asp:Content ID="content2" runat="server" ContentPlaceHolderID="Content">
</asp:Content>

来源：https://stackoverflow.com/questions/22664066/jquery-in-asp-net-web-form-with-a-master-page

标签

javascript

jquery

ASP.NET

master-pages