How can I add jQuery to a WebPart (to respond to certain events on the WebPart)?

问题

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.

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.

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.).

As an example, I'm currently conditionally creating a RadioButton in C# like so:

var radbtnEmployeeQ = new RadioButton
{
    CssClass = "dplatypus-webform-field-input"
};

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"
};

...and then add jQuery of this nature (pseudocode):

$('radbtnEmp').click {
    // visiblize/invisiblize other controls, assign certain vals to their properties
}

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...???

UPDATE

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>

(derived from an example here)

...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";

(I dragged the .js file onto the code to get the path)

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.

UPDATE 2

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...

回答1:

Use below code on Page load method

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

回答2:

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.

来源：https://stackoverflow.com/questions/30583399/how-can-i-add-jquery-to-a-webpart-to-respond-to-certain-events-on-the-webpart

标签

jquery

sharepoint-2010

web-parts