Bind SharePoint List items in dropdown list programmatically using CSOM

This SharePoint tutorial explains, how to bind SharePoint list items into a dropdown list using the client-side object model (CSOM) in SharePoint Online or SharePoint 2013/2016.

Bind SharePoint List items in dropdown list programmatically using CSOM

Now we will see how we can bind SharePoint list items to a dropdown list programmatically using csom in SharePoint. Here we will use an asp.net web application to bind the data to the dropdown list.

We will also see, how we can delete an item from the SharePoint list using csom.

Create a SharePoint list and Bind List items to DropDownList and Next select item from the dropdown and click on delete button then the item from the SharePoint list will be deleted.

Here, bind List items to the Data Table before going to bind items to the Dropdown List.

Now I created a SharePoint list name is MyCompanyEmployeeList as shown below.

Bind SharePoint List items in dropdown list programmatically
Bind SharePoint List items in dropdown list programmatically

For Creating Web Application Open Visual Studio, Go to ->file->New->Project, it will open New Project Dialogue Box, come to the left side of Templates, expand installed Templates, Visual C# -> Windows and then select Asp.Net Web Application like below:

Now add the two required dlls in References to solution explorer:

Microsoft.SharePoint.Client.Runtime.dll
Microsoft.SharePoint.Client.dll.

Right-click on the Reference folder and then click on Add Reference and then add the dlls from the below folder.

C:\Program Files\Common Files\Microsoft shared\Web Server Extensions\16\ISAPI

Now create a form for that we need to Default.aspx page. Here copy and paste below code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DisplayDataInGridView._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<table class="nav-justified" style="width: 34%; height: 75px">
<tr>
<td>
<asp:Label ID="lblTitle" runat="server" Text="Title"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlTitle" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<asp:Button ID="btnDelete" runat="server" OnClick="btnDelete_Click" Text="Delete" />
</td>
</tr>
</table>
</asp:Content>

Now go to the Default.aspx.cs page, copy and paste below the code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.Client;
using System.Security;
using System.Data;

namespace DisplayDataInGridView
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindItemsToDropDownList();
}
}

void BindItemsToDropDownList()
{
using (ClientContext context = new ClientContext("https://onlysharepoint2013.sharepoint.com/sites/DevSite/"))
{
context.AuthenticationMode = ClientAuthenticationMode.Default;
context.Credentials = new SharePointOnlineCredentials("lakshminarayana@onlysharepoint2013.onmicrosoft.com", GetSPOSecureStringPassword());
Web wb = context.Web;
List oList = wb.Lists.GetByTitle("MyCompanyEmployeeList");
CamlQuery camlQuery = new CamlQuery();
camlQuery.ViewXml = "<View><Query /><ViewFields><FieldRef Name='Title' /><FieldRef Name='ID' /></ViewFields><QueryOptions /></View>";

Microsoft.SharePoint.Client.ListItemCollection collListItem = oList.GetItems(camlQuery);
context.Load(collListItem);
context.ExecuteQuery();
DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(Int32));
dt.Columns.Add("Title", typeof(string));
foreach (Microsoft.SharePoint.Client.ListItem item in collListItem)
{
DataRow dr = dt.NewRow();
dr["ID"] = item["ID"];
dr["Title"] = item["Title"];
dt.Rows.Add(dr);
}
ddlTitle.DataSource = dt;
ddlTitle.DataValueField = "ID";
ddlTitle.DataTextField = "Title";
ddlTitle.DataBind();
}
}

protected void btnDelete_Click(object sender, EventArgs e)
{
DeleteListItems();
}

private void DeleteListItems()
{
int itemid = Convert.ToInt32(ddlTitle.SelectedValue);
using (ClientContext context = new ClientContext("https://onlysharepoint2013.sharepoint.com/sites/DevSite/"))
{
context.AuthenticationMode = ClientAuthenticationMode.Default;
context.Credentials = new SharePointOnlineCredentials("lakshminarayana@onlysharepoint2013.onmicrosoft.com", GetSPOSecureStringPassword());
Web wb = context.Web;
List oList = wb.Lists.GetByTitle("MyCompanyEmployeeList");
Microsoft.SharePoint.Client.ListItem listItem = oList.GetItemById(itemid);
listItem.DeleteObject();
context.ExecuteQuery();
}
BindItemsToDropDownList();
}

private SecureString GetSPOSecureStringPassword()
{
try
{
var secureString = new SecureString();
foreach (char c in "Mypassword")
{
secureString.AppendChar(c);
}
return secureString;
}
catch
{
throw;
}
}
}
}

Here is the Result of the Dropdown List.

Delete Items from sharepoint list using CSOM
Delete Items from sharepoint list using CSOM

Click on Dropdown it will display Titles from the list.

Now select “title=Lakshmi” from the dropdown, the item will be deleted from the drop-down and list.

Delete Items from list using CSOM
Delete Items from list using CSOM

Now see the selected “Title=Lakshmi” is deleted from the drop-down.

Now checklist. EmpName(Title) of Lakshmi is deleted from my list.

Bind SharePoint List items in dropdown list programmatically using CSOM
Bind SharePoint List items in dropdown list programmatically using CSOM

You may like following SharePoint csom tutorials:

Hope this SharePoint tutorial helps to know, how to bind SharePoint list items to a dropdown list using client-side object model (csom) in SharePoint Online. We also discussed how to delete items from SharePoint list programmatically using csom in SharePoint.

>