AI/ML, AWS, Azure, DevOps, GCP, M365, Microsoft Power Platform, RPA, SharePoint,: ASP.NET UpdatePanel with jQuery in SharePoint

Wednesday, November 16, 2016

ASP.NET UpdatePanel with jQuery in SharePoint

ASP.NET UpdatePanel with jQuery in SharePoint.
Create a Visual WebPart and add below code to this WebPart.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Import Namespace="Microsoft.SharePoint" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1.ascx.cs" Inherits="VisualWebPartProject4.VisualWebPart1.VisualWebPart1" %>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<div>

Country   *

<asp:DropDownList runat="server" ID="ddlCountry">

<asp:ListItem Text="--" Value="--"></asp:ListItem>

<asp:ListItem Text="Country1" Value="Country1"></asp:ListItem>

<asp:ListItem Text="Country2" Value="Country2"></asp:ListItem>

<asp:ListItem Text="Country3" Value="Country3"></asp:ListItem>

</asp:DropDownList>

</div>

<br />

<div>

<asp:Button runat="server" ID="btnSave" CausesValidation="true" ValidateRequestMode="Enabled" Text="Register" OnClick="btnSave_Click" />

</div>

<br />

<div>

<asp:Label ID="lbl1" runat="server"></asp:Label><br />

</div>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

Create a WebPart Page and a above WebPart in this page and also add one Content Editot WebPart (CEWP) to this same page, in this CEWP add below code or use JS file reference which is having below code.

<!DOCTYPE html>

<html>

<head>

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InIEvent);

</script>

$(document).ready(function () {

$("input[id*='btnSave']").click(function () {

var country_val = $("select[id*='ddlCountry']").val();

if (country_val == '--') {

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

alert('Required Field: Please select Country');

}

});

</script>

</head>

<body>

</body>

</html>

Save Page and close edit page. now test the code. here we are doing required field validation from JQuery for DropDownList which is located inside UpdatePanel.