Display Records in Modal

Question

Hi I want list of records to be shown in a BootStrap modal. Thanks

Ramco Ramco · Answer

Hi Rajkiran In below ddlbook_selectedindexchanged i want to display data in modal if Result != null. If records are found then data should be displayed in Modal protected void ddlBook_SelectedIndexChanged(object sender, EventArgs e) { try { if (ddlBook.SelectedItem.Value != "") { GetSession(Convert.ToInt32(ddlBook.SelectedItem.Value)); List StudentCollection = new List (); BALGroupParticipant bALGroupParticipant = new BALGroupParticipant(); List objStudentList = bALGroupParticipant.GetGroupParticipantsList(Convert.ToInt32(hdfGroupID.Value)); BALStudents bALStudents = new BALStudents(); if (objStudentList != null) { foreach (var colum1 in objStudentList) { StudentCollection.Add(colum1.StudentID.ToString()); } } Int32 BookID = Convert.ToInt32(ddlBook.SelectedItem.Value); BALSessionDeliveryParticipant bALSessionDeliveryParticipant = new BALSessionDeliveryParticipant(); View_SessionDeliveryParticipant_Detailed Result = bALSessionDeliveryParticipant.GetSessionDeliveryParticipantBookHistory(Convert.ToInt32(ddlBook.SelectedItem.Value), StudentCollection); if (Result != null) { ShowMessage("For Your Information", Result.Name + " in Session - " + Result.SessionDeliveryNo + " dated : " + Convert.ToDateTime(Result.SessionDate).ToString("dd-MM-yyyy"), "info"); //Int32 sr = 1; } } else { GetSession(0); } BindData(Convert.ToInt32(hdfGroupID.Value), Convert.ToInt32(hdfModuleID.Value), false); } catch (Exception ex) { Utility.SaveErrorLog(ex.Message, System.IO.Path.GetFileName(Request.Path), System.Reflection.MethodBase.GetCurrentMethod().Name, Convert.ToInt32(hdfLoginCode.Value)); ShowMessage("Oops...", ex.Message, "error"); } } Thanks

Amit Mohanty · Answer

List of Records &times; $('#myModal').on('shown.bs.modal', function () { showRecordList(); }); function showRecordList() { // Retrieve the list of records (e.g., from an API call) const records = [ { id: 1, name: "Record 1" }, { id: 2, name: "Record 2" }, { id: 3, name: "Record 3" } ]; // Get the container element to display the list of records const recordList = document.getElementById("recordList"); // Clear the existing list recordList.innerHTML = ""; // Populate the list with the records records.forEach((record) => { const li = document.createElement("li"); li.textContent = `${record.id}: ${record.name}`; recordList.appendChild(li); }); }

Rajkiran Swain · Answer

View Records Records &times; Record ID Record Name Record Type 1 Record 1 Type A 2 Record 2 Type B 3 Record 3 Type C Close