可视化 Web 部件中的 JQuery SharePoint Foundation
Posted
技术标签:
【中文标题】可视化 Web 部件中的 JQuery SharePoint Foundation【英文标题】:JQuery in Visual Web Part SharePoint Foundation 【发布时间】:2012-09-24 20:14:36 【问题描述】:我无法让这个简单的 JQuery 函数在 sharePoint Foundation 中触发。
这些是我遵循的一些步骤 http://sharepointdragons.com/2012/04/18/adding-jquery-to-a-visual-web-part-and-then-implement-parentchild-radio-buttons/
第 1 步:将 jquery-1.4.1.js 文件添加到 SiteAssets
第 2 步:在 Web Farm 解决方案中创建可视 Web 部件。
第 3 步:添加以下代码
第 4 步:在服务器上部署 Web 部件(成功,因为非 jquery 功能正在运行)。
第 5 步:但 jquery 功能不起作用。
这里是web部分的所有代码
WebPart1.ascx
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SanctuaryVisualWebPartUserControl.ascx.cs" Inherits="SanctuaryVisualWebPart.SanctuaryVisualWebPart.SanctuaryVisualWebPartUserControl" %>
<%@ Register assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" name="~sitecollection/SiteAssets/jquery-1.4.1.js " />
<style type="text/css">
.style1
width: 100%;
height: 247px;
.style2
width: 398px;
.style3
width: 421px;
</style>
<script type="text/javascript">
$(document).ready(function ()
alert("Fired using JQuery Document ready");
$("#btnJQ").click(function ()
$("#tboxJQ").val("Fired using JQuery");
alert("Fired using JQuery");
);
);
</script>
<table bgcolor="#CCFFCC" border="3" cellpadding="3" cellspacing="3"
class="style1">
<tr>
<td>
<asp:Button ID="btnJQ" runat="server" Text="JQuery" Width="110px" />
</td>
<td>
<asp:TextBox ID="tboxJQ" runat="server"></asp:TextBox>
</td>
</tr>
</table>
第 6 步:document.ready 的第一个警报被触发,但 buttonClick 内部的下一个警报未触发。
任何帮助将不胜感激
【问题讨论】:
【参考方案1】:您的 tboxJQ 选择器错误 - 如果您通过 id 引用元素,则需要在其前面加上一个哈希。所以....
$("tboxJQ").val("Fired using JQuery");
应该是
$("#tboxJQ").val("Fired using JQuery");
【讨论】:
我很抱歉这是一个错字。我已经纠正了它,但 Jquery 仍然没有触发。【参考方案2】:经过一番研究,我发现上述访问元素 id 的方法在 sharepoint 中不起作用,因为当 web 部件嵌入到 sharepoint 母版页时,id 会发生变化。唯一可行的方法是如果设置了 clientIdMode="Static" 在这种情况下 jquery 将能够访问元素。
但这不能在 sharepoint Foundation 或 Sharepoint 2010 中使用,因为它们是基于 .net 3.5 框架构建的,并且上述功能仅在 .NET 4.0 中可用。
解决此问题的方法是使用 html 元素
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="JqueryWebPartUserControl.ascx.cs" Inherits="JqueryWebPart.JqueryWebPart.JqueryWebPartUserControl" %>
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" name="~sitecollection/SiteAssets/jquery-1.4.1.js"/>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(
function ()
$(document).ready(function ()
$('#tboxJQ').val("Fired using JQuery Ready");
$('#btnJQ').click(function ()
$('#tboxJQ').val("Fired using JQuery");
);
);
, "sp.js");
</script>
<table>
<tr><td></td></tr>
<tr>
<td>
<input id="btnJQ" type="button" value="button" /></td>
</tr>
<tr>
<td>
<input id="tboxJQ" type="text" /></td>
</tr>
</table>
希望对你有帮助
【讨论】:
【参考方案3】:尝试如下改变:
而不是
$("#tboxJQ")
使用
$('#' + '<%=this.TextBox1.ClientID %>')
【讨论】:
【参考方案4】:感谢 Yahya M. Ammouri,我已经能够使用以下代码调用 jQuery 方法“警报”。在可视化 Web 部件中,您需要传递元素的 clientID,而不像普通网页那样传递元素 ID。
以下代码供参考:
<script type="text/javascript">
$(function ()
$('#' + '<%=this.btnWow.ClientID %>').click(function ()
alert("Hello world!");
);
);
</script>
<div>
<asp:Button ID="btnWow" Text="click" runat="server" />
</div>
【讨论】:
以上是关于可视化 Web 部件中的 JQuery SharePoint Foundation的主要内容,如果未能解决你的问题,请参考以下文章
sharepoint 2013 web 部件中的 jquery [关闭]
如何将控件添加到 Web 部件(SharePoint、C#)?
Web 部件中的更新面板在 Google Chrome 中不起作用