如何将jQuery添加到WebPart(以响应WebPart上的某些事件)? [英] How can I add jQuery to a WebPart (to respond to certain events on the WebPart)?
问题描述
我开始将UpdatePanel添加到我的Sharepoint页面的路径，以便我可以响应发生的事件(例如，复选框的选中和单选按钮的融合等).但是，到目前为止，这种情况令人沮丧，并且产生了所有的腐烂，可以从
I started down the path of adding an UpdatePanel to my Sharepoint page so that I can respond to events that take place (such as the checking of checkboxes and mashing of radio buttons, etc.). That so far has, however, been wrought with frustration and all that rot, as can be deduced from this question.
因此，我现在可能要遍历(无双关语)jQuery路线，并试图找出/查找如何将jQuery添加到WebPart中.
So I'm now probably going to traverse (no pun intended) the jQuery route and am trying to figure out/find out how to add jQuery to a WebPart.
出于好奇，我根据用户在WebPart的编辑器中选择的内容在C#中动态创建控件(如果他们选择显示第1部分，则为第1部分创建所有控件，等等.)
Currenlty, I am dynamically creating controls in C# based on what a user selects in the WebPart's Editor (if they elect to show Section 1, I create all the controls for Section 1, etc.).
作为示例，我目前正在有条件地在C#中创建RadioButton，如下所示:
As an example, I'm currently conditionally creating a RadioButton in C# like so:
var radbtnEmployeeQ = new RadioButton
{
CssClass = "dplatypus-webform-field-input"
};
现在，如果我想向其中添加jQuery，则可以向其添加一个ID，如下所示:
Now if I want to add jQuery to it, I can add an ID to it like so:
var radbtnEmployeeQ = new RadioButton
{
CssClass = "dplatypus-webform-field-input",
ID = "radbtnEmp"
};
...然后添加这种性质的jQuery(伪代码):
...and then add jQuery of this nature (pseudocode):
$('radbtnEmp').click {
// visiblize/invisiblize other controls, assign certain vals to their properties
}
这对我来说似乎可行，但是如何将jQuery添加到WebPart中呢?是在与* .ascx.cs文件位于同一目录级别的.js文件中添加文件，然后从* .ascx.cs文件中引用它，还是... ???
This seems feasible to me, but how do I go about adding jQuery to a WebPart? Is it a matter of adding a .js file at the same directory level as the *.ascx.cs file, and then referencing it from the *.ascx.cs file, or...???
对于POC测试，我在项目中添加了一个名为"directpaydynamic.js"的文件，内容如下:
For POC testing, I added a file to my project named "directpaydynamic.js" with this content:
<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>
(源自示例此处)
...并像这样在我的* .ascx.cs文件中引用.js文件:
...and reference the .js file in my *.ascx.cs file like so:
SPWeb site = SPContext.Current.Web;
site.CustomJavaScriptFileUrl = @"C:\Projects\DirectPaymentWebForm\DirectPaymentSectionsWebPart\DPSVisualWebPart\directpaydynamic.js";
(我将.js文件拖到代码中以获取路径)
(I dragged the .js file onto the code to get the path)
但是，运行解决方案并捣碎单选按钮不会显示alert()，因此我认为我走过的路少了.
However, running the solution and mashing the radiobutton causes neither alert() to display, so I reckon I've taken the road that was for a good reason less traveled.
意识到我不需要脚本业务(因为这是一个.js文件，而不是html文件)，所以我删除了这些文件，并在jQuery中放置了"at a rate" alert():
Realizing I didn't need the script business (as this is a .js file, not an html file), I removed those, and also put an "at any rate" alert() in the 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");
}
});
});
...但是我仍然忍受着警报不足的警报...
...but I still endure an alarming dearth of alerts...
推荐答案
要使此功能正常运行的事情(或者也许我应该写" a "事情) WebPart的* .ascx文件末尾的代码如下:
The thing to do (or perhaps I should write, "a" thing to do) to get this to work is to add code like the following to the end of the WebPart's *.ascx file:
<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>
以上内容就像冠军一样.
The above works like a champ.
这篇关于如何将jQuery添加到WebPart(以响应WebPart上的某些事件)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
