如何将 jQuery 添加到 WebPart(以响应 WebPart 上的某些事件)?
How can I add jQuery to a WebPart (to respond to certain events on the WebPart)?
我开始尝试将 UpdatePanel 添加到我的 Sharepoint 页面,以便我可以响应发生的事件(例如选中复选框和组合单选按钮等)。然而,到目前为止,这已经被挫败感和所有腐烂所造成,正如可以从 this question.
中推断的那样
所以我现在可能要遍历(没有双关语意)jQuery 路线,并试图弄清楚 out/find 如何将 jQuery 添加到 WebPart。
目前,我正在根据用户在 WebPart 编辑器中的选择在 C# 中动态创建控件(如果他们选择显示第 1 部分,我会为第 1 部分创建所有控件,等等)。
例如,我目前正在 C# 中有条件地创建一个 RadioButton,如下所示:
var radbtnEmployeeQ = new RadioButton
{
CssClass = "dplatypus-webform-field-input"
};
现在如果我想给它添加 jQuery,我可以像这样给它添加一个 ID:
var radbtnEmployeeQ = new RadioButton
{
CssClass = "dplatypus-webform-field-input",
ID = "radbtnEmp"
};
...然后加上jQuery这个性质(伪代码):
$('radbtnEmp').click {
// visiblize/invisiblize other controls, assign certain vals to their properties
}
这对我来说似乎可行,但我该如何将 jQuery 添加到 WebPart?是在*.ascx.cs文件的同一目录级别添加.js文件,然后从*.ascx.cs文件中引用它,还是...???
更新
为了 POC 测试,我将一个名为 "directpaydynamic.js" 的文件添加到我的项目中,内容如下:
<script>
$(document).ready(function () {
$('input:radio[name=radbtnEmp]:checked').change(function () {
if ($("input[name='radbtnEmp']:checked").val() == 'Employee?') {
alert("radbtnEmp checked");
}
else {
alert("radbtnEmp not checked");
}
});
});
</script>
(源自示例here)
...并在我的 *.ascx.cs 文件中引用 .js 文件,如下所示:
SPWeb site = SPContext.Current.Web;
site.CustomJavaScriptFileUrl = @"C:\Projects\DirectPaymentWebForm\DirectPaymentSectionsWebPart\DPSVisualWebPart\directpaydynamic.js";
(我是把.js文件拖到代码上获取路径的)
但是,运行 解决方案和混合单选按钮不会导致 alert() 显示,所以我认为我选择了一条人迹罕至的道路。
更新 2
意识到我不需要脚本业务(因为这是一个 .js 文件,而不是 html 文件),我删除了那些,并且还在其中放入了一个 "at any rate" alert() jQuery:
$(document).ready(function () {
alert("What's new, pussycat, whoa-oh-oh-oh-OH-oh?");
$('input:radio[name=radbtnEmp]:checked').change(function () {
if ($("input[name='radbtnEmp']:checked").val() == 'Employee?') {
alert("radbtnEmp checked");
}
else {
alert("radbtnEmp not checked");
}
});
});
...但我仍然忍受着警报的严重缺乏...
在页面加载方法中使用以下代码
string url = SPContext.Current.Site.ServerRelativeUrl;
if (!url.EndsWith("/"))
{
url += "/";
}
HtmlGenericControl styleCss = new HtmlGenericControl("link");
styleCss.Attributes.Add("rel", "stylesheet");
styleCss.Attributes.Add("type", "text/css");
styleCss.Attributes.Add("href", url + "Style Library/css/style.css");
HtmlGenericControl JsLink = new HtmlGenericControl("script");
JsLink.Attributes.Add("src", url + "Style Library/js/jquery.min.js");`enter code here`
this.Controls.Add(styleCss);
this.Controls.Add(JsLink);
要做的事情(或者也许我应该写,“a”要做的事情)是在WebPart 的 *.ascx 文件:
<script>
$(document).ready(function () {
alert("The ready function has been reached");
});
$(document).on("change", '[id$=ckbxEmp]', function () {
alert('Function has been reached');
if ($(this).is(":checked")) {
alert("Checked");
} else {
alert("Not checked");
}
});
</script>
上面的效果非常好。
我开始尝试将 UpdatePanel 添加到我的 Sharepoint 页面,以便我可以响应发生的事件(例如选中复选框和组合单选按钮等)。然而,到目前为止,这已经被挫败感和所有腐烂所造成,正如可以从 this question.
中推断的那样所以我现在可能要遍历(没有双关语意)jQuery 路线,并试图弄清楚 out/find 如何将 jQuery 添加到 WebPart。
目前,我正在根据用户在 WebPart 编辑器中的选择在 C# 中动态创建控件(如果他们选择显示第 1 部分,我会为第 1 部分创建所有控件,等等)。
例如,我目前正在 C# 中有条件地创建一个 RadioButton,如下所示:
var radbtnEmployeeQ = new RadioButton
{
CssClass = "dplatypus-webform-field-input"
};
现在如果我想给它添加 jQuery,我可以像这样给它添加一个 ID:
var radbtnEmployeeQ = new RadioButton
{
CssClass = "dplatypus-webform-field-input",
ID = "radbtnEmp"
};
...然后加上jQuery这个性质(伪代码):
$('radbtnEmp').click {
// visiblize/invisiblize other controls, assign certain vals to their properties
}
这对我来说似乎可行,但我该如何将 jQuery 添加到 WebPart?是在*.ascx.cs文件的同一目录级别添加.js文件,然后从*.ascx.cs文件中引用它,还是...???
更新
为了 POC 测试,我将一个名为 "directpaydynamic.js" 的文件添加到我的项目中,内容如下:
<script>
$(document).ready(function () {
$('input:radio[name=radbtnEmp]:checked').change(function () {
if ($("input[name='radbtnEmp']:checked").val() == 'Employee?') {
alert("radbtnEmp checked");
}
else {
alert("radbtnEmp not checked");
}
});
});
</script>
(源自示例here)
...并在我的 *.ascx.cs 文件中引用 .js 文件,如下所示:
SPWeb site = SPContext.Current.Web;
site.CustomJavaScriptFileUrl = @"C:\Projects\DirectPaymentWebForm\DirectPaymentSectionsWebPart\DPSVisualWebPart\directpaydynamic.js";
(我是把.js文件拖到代码上获取路径的)
但是,运行 解决方案和混合单选按钮不会导致 alert() 显示,所以我认为我选择了一条人迹罕至的道路。
更新 2
意识到我不需要脚本业务(因为这是一个 .js 文件,而不是 html 文件),我删除了那些,并且还在其中放入了一个 "at any rate" alert() jQuery:
$(document).ready(function () {
alert("What's new, pussycat, whoa-oh-oh-oh-OH-oh?");
$('input:radio[name=radbtnEmp]:checked').change(function () {
if ($("input[name='radbtnEmp']:checked").val() == 'Employee?') {
alert("radbtnEmp checked");
}
else {
alert("radbtnEmp not checked");
}
});
});
...但我仍然忍受着警报的严重缺乏...
在页面加载方法中使用以下代码
string url = SPContext.Current.Site.ServerRelativeUrl;
if (!url.EndsWith("/"))
{
url += "/";
}
HtmlGenericControl styleCss = new HtmlGenericControl("link");
styleCss.Attributes.Add("rel", "stylesheet");
styleCss.Attributes.Add("type", "text/css");
styleCss.Attributes.Add("href", url + "Style Library/css/style.css");
HtmlGenericControl JsLink = new HtmlGenericControl("script");
JsLink.Attributes.Add("src", url + "Style Library/js/jquery.min.js");`enter code here`
this.Controls.Add(styleCss);
this.Controls.Add(JsLink);
要做的事情(或者也许我应该写,“a”要做的事情)是在WebPart 的 *.ascx 文件:
<script>
$(document).ready(function () {
alert("The ready function has been reached");
});
$(document).on("change", '[id$=ckbxEmp]', function () {
alert('Function has been reached');
if ($(this).is(":checked")) {
alert("Checked");
} else {
alert("Not checked");
}
});
</script>
上面的效果非常好。