ASP.NET UpdatePanel with jQuery in SharePoint.
Create a Visual WebPart and add below code to this WebPart.
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">
<ContentTemplate>
<div runat="server" id="div1">
<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>
</div>
</ContentTemplate>
<Triggers>
<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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InIEvent);
</script>
<script type="text/javascript">
$(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.
