How can a Grid view be displayed within a Modal PopUp Extender?

I am currently working on a mapping application using ASP.net C#.

Within my application, I have implemented a textbox and button that searches a database based on postcode and displays the results in a Grid view on my aspx page...

public partial class _Default : System.Web.UI.Page
{
// SDE connection string to extract postcode from ADDRESS (sde) table. 

private SqlConnection m_sqlConn;

protected void Page_Load(object sender, EventArgs e)
{

}

private void ShowMsg(string strMessage)
{
}

protected void Button1_Click(object sender, EventArgs e)
{
    try
    {

        if (txtPostCode.Text.Length > 0)
        {
            // Code for fetching data from database and displaying in gridview
        }

        else
        {
            ShowMsg("Error - No Postal Addresses Returned");
        }
    }
    catch (Exception ex)
    {
        ShowMsg("Error - " + ex.Message);
    }

}

private bool CloseDB()
{
    try
    {
        // Code to close database connection
        return (true);
    }
    catch (Exception ex)
    {
        return (false);
    }

}    

}

Now, I am looking to enhance the user experience by implementing a Modal PopUp where the search results are displayed modally when the user clicks the search button. I tried setting it up with a fake ControlID button but encountered some issues...

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

 <asp:Button id="BtnFake"  runat="server" Style="display: none"/>

<table id="ModalGrid">

<asp:GridView ID="GridView1" runat="server">

 </asp:GridView>

 <asp:Button id="Button2"  runat="server" Text="OK" />

 </table>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
    TargetControlID="BtnFake" PopupControlID="ModalGrid" DropShadow="false"       
    BackgroundCssClass="ModalBackground"
    CancelControlID="BtnOK" BehaviorID="ModalGrid"       RepositionMode="RepositionOnWindowScroll">
     </cc1:ModalPopupExtender>

Any suggestions or ideas? I feel like I might be missing something obvious. Thank you.

Answer №1

  1. When setting a modal popup's TargetControlId to a dummy field, remember to explicitly call ModalPopupExtender1.Show(); in order to display the modal.
  2. Where is BtnOK? Shouldn't it be Button2?

Hint - using a button for a dummy field may be unnecessary; consider using something simpler like a <span> instead

Here is a functional example if you encounter any issues, but simply calling ModalPopupExtender1.Show(); should resolve them:

ASPX:

<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="sm" runat="server">
</asp:ToolkitScriptManager>
<span ID="dummy" runat="server" />
Post code:&nbsp;<asp:TextBox ID="txtPostcode" runat="server" /><br />
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="Search" />
<asp:Panel runat="server" ID="modalPanel" CssClass="modalPanel">
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<asp:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="dummy"
    PopupControlID="modalPanel" BackgroundCssClass="ModalBackground"
     CancelControlID="btnCancel" BehaviorID="ModalGrid">
 </asp:ModalPopupExtender>
</form>

Code behind:

protected void Search(object sender, EventArgs e)
{
    List<PostalCode> codes = new List<PostalCode>()
    {
        new PostalCode{ Code="000",Province="District 0" },
        new PostalCode{ Code="111",Province="District 1" }
    };

    string code = txtPostcode.Text;

    if (codes.Where(c => c.Code == code).Any())
    {
        GridView1.DataSource = codes.Where(c => c.Code == code);
        GridView1.DataBind();
        ModalPopupExtender1.Show();
    }
}

Class I've used for testing:

public class PostalCode
{
    public string Code { get; set; }
    public string Province { get; set; }
} 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Linking MySQL Database to Javascript Quiz (Novice)

After constructing the database for my quiz, I am facing an issue with getting the user's answers to be stored in the database. Although the quiz functions properly on my browser and questions can be answered, I am unable to calculate the final score ...

The browsing function within asp.net and the issue of a disrupted connection

Update: After removing the runat="server" attribute, I am encountering an issue retrieving the value of the dialog in the code behind. Here's the scenario: On my page, I have the following code snippet: <input type="file" id="ID" runat="server" / ...

Retrieving geographical data in GeoJSON format using AJAX request and displaying it on a Leaflet

I'm completely new to Leaflet and I'm struggling with how to integrate markers from a MySQL database onto a Leaflet map. Can anyone guide me on how to accomplish this using PHP and AJAX? .....{"type":"FeatureCollection","features":[{"geometry":{ ...

Leveraging next-generation JavaScript (NextJS), incorporate sass-loader for seamless inclusion of variables in each individual

I'm having trouble implementing a custom webpack configuration in my nextjs project. My objective is to automatically import @import "src/styles/variables.scss"; for all scss files in my application. I have successfully set up a webpack con ...

The Access-Control-Allow-Origin policy does not permit the origin <origin> to be accessed

Sorry, the XMLHttpRequest cannot be loaded from http://localhost:8080/api/test. The origin http://localhost:3000 is not permitted by Access-Control-Allow-Origin. After reading up on cross-domain ajax requests, I now understand the security concerns involv ...

Encountered a network error 500 when attempting to access a CodeIgniter controller action through Ajax

I am facing an issue with my admin controller. Within this controller, I have a processReq function that is triggered by a button click event. However, every time I click the button, I encounter an error message: "NetworkError: 500 Internal Server Error ...

Can a "Solitary Island" situation be established within the .NET framework?

Recently, my studies led me to the concept of "Island Of Isolation" in garbage collection. This occurs when ObjectA points to ObjectB and ObjectB simultaneously points back to ObjectA. Does anyone have an example of this phenomenon in C#? Additionally, co ...

Develop an interactive single-page scrolling system for seamless navigation between points

Creating a navigation that scrolls to the selected element when clicking on an <a> tag is my current project. I want it to animate smoothly during the transition. The navigation should go from: <a href="#Home">Home</a> To: <div id= ...

Regular expression that allows for the inclusion of whitespace before verifying a single character

I've been trying to figure out a search pattern online, but as a beginner, I'm having trouble verifying it. I'd appreciate an example, if possible. [Check for any white spaces] [one of the following characters: ':' '|&apos ...

Differences between Angular JS Objects and Arrays

I am having trouble creating an object with 3 properties inside. Each time I try to run the code, only the code expression is displayed. How do arrays and objects interact with each other? Here is my code snippet: var app = angular.module("FundAllocati ...

Update the section tag upon submission using jQuery on a jQuery Mobile HTML page

I have integrated a jquerymobile template into Dreamweaver 6.0 to create a mobile app interface. The home screen features four buttons - specifically, View, Create, Update, Delete. Upon clicking the Create button, a new screen is opened (each screen corres ...

To create a dynamic and adaptable layout, consider utilizing JavaScript or jQuery to incorporate a flexible

Imagine needing to dynamically include CSS rules that correspond to a specific media condition. Take, for instance, the scenario below: @media only screen and (min-device-width : 500px){ .someClass: { color: blue; } } An obvious solution ...

Control the switch for CSS selectors

Consider the following scenario where CSS rules are defined: <style> table {background:red;} div {background:green;} </style> In addition, there is HTML code that calls a JavaScript function: <table onclick="tu ...

jQuery disrupts the functionality of other scripts

Let me start by saying that I have very little knowledge about scripting and HTML. Recently, I came across the following code: <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> < ...

What is the best method to synchronize a MySQL database on a Linux server with data from an ASP.Net form on a Windows server?

My current web hosting provider (1and1) has kindly suggested that I find a different platform for this particular task. I currently have two websites - one created by a .Net developer, and now I am tasked with implementing a PHP site that will retrieve da ...

Does the size of a JavaScript heap, when it's big but not enough to cause a crash, have the potential to slow down a website, aside from just having an

Utilizing angular material dialog, I have incorporated a mat stepper with three tables (one per step), where one or two of them may contain an extensive amount of records. I have already integrated virtual scrolling to improve performance. However, when ...

Using Threejs to move an object using quaternion rotations

A specific object in my program is utilizing a quaternion for rotation. Whenever a user presses a key, the quaternion is updated to rotate the object along its internal axis. The rotations are working flawlessly. In its default state, before any user input ...

Implementing Multiple Exports within the next.config.json File

I am trying to combine withPWA and withTypescript in my configurations but I'm not sure how to do it... This is the code in my next.config.json file : const withPWA = require("next-pwa"); module.exports = withPWA({ pwa: { dest: "public", }, ...

Issue with Angular 6 custom pipe causing NaN when utilizing service-sourced data

I am working on a custom pipe that converts a given number into days and hours. The HTML code for this pipe is as follows: <div *ngFor="let unit of units"> <p>Remaining Life</p> <h2>{{ unit.daysRemaining | timeRemaining }}< ...

I am consistently experiencing timeout issues when filtering data within a date range using EF Core. Is there something I am doing wrong that is causing this slow performance?

I have a challenge with managing tests and records over time. My choice of database is Postgresql to store these tests and records, and I need the ability to search for tests that have records within a specific time frame. Each test contains multiple reco ...