Post
Ask Question

How to Show Data In BootStrap PopUp

Step 1: Create a WebService. In that I have used a WebMethod which Fetches Data From DataBase, I have created a Dictionary Object name Result which Holds the Data.

Here is the Code of WebService
 
Code For WebService
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Services;  
  6. using System.Data;  
  7. using System.Data.SqlClient;  
  8. using System.Configuration;  
  9.   
  10. namespace Aniket_MahaOnline  
  11. {  
  12.    /// <summary>  
  13.    /// Summary description for WebService1  
  14.    /// </summary>  
  15.    [WebService(Namespace = "http://tempuri.org/")]  
  16.    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  17.    [System.ComponentModel.ToolboxItem(false)]  
  18.    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.   
  19.    [System.Web.Script.Services.ScriptService]  
  20.    public class WebService1 : System.Web.Services.WebService  
  21.    {  
  22.       SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Locals_New"].ConnectionString.ToString());  
  23.       [WebMethod]  
  24.       public string VerifyID(string ID)  
  25.       {  
  26.          string Result = string.Empty;  
  27.          try  
  28.          {  
  29.             DataTable dt = new DataTable();  
  30.             using (SqlCommand cmd = new SqlCommand("DisplayServiceInfo", con))  
  31.             {  
  32.                cmd.CommandType = CommandType.StoredProcedure;  
  33.                cmd.Parameters.AddWithValue("@Para", "Get_by_ID");  
  34.                cmd.Parameters.AddWithValue("@Id", ID);  
  35.                SqlDataAdapter da = new SqlDataAdapter(cmd);  
  36.                da.Fill(dt);  
  37.                if (dt.Rows.Count > 0)  
  38.                {  
  39.                   Result = "{\"Name\":";  
  40.                   Result += "\"" + dt.Rows[0][0].ToString() + "\",";  
  41.                   Result += "\"Address\":\"" + dt.Rows[0][1].ToString() + "\",";  
  42.                   Result += "\"LastName\":\"" + dt.Rows[0][2].ToString() + "\"";  
  43.                   Result += "}";  
  44.                }  
  45.   
  46.                else  
  47.                {  
  48.                   Result = "Invalid";  
  49.                }  
  50.   
  51.             }  
  52.          }  
  53.          catch (Exception ex)  
  54.          {  
  55.             Result = "Error";  
  56.          }  
  57.          return Result;  
  58.   
  59.    }  
  60.   
  61. }  
As you can See I have Created a WebMethod name Verify Id and Pass ID as a Parameter to the Webmethod.DisplayServiceInfo is my StoredProcedure. Also Do not Forget to Uncomment the Following Line.
[System.Web.Script.Services.ScriptService] as We will be Calling this method using Script.
Step 2: Now On Aspx Page,not on cs side.Write a Function Which Will call the WebService Method and If it contains Data,it will call the BootStrap modal popup.Here is the whole code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm17.aspx.cs" Inherits="Aniket_MahaOnline.WebForm17" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6.    <head runat="server">  
  7.       <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript">  
  8.       </script>  
  9.       <script src="assets/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
  10.          <script type="text/javascript" language="javascript">  
  11.             function VerifyIds() {  
  12.                if ($('#txtId').val() == "") {  
  13.                   alert("Please Enter Id");  
  14.                }  
  15.                else {  
  16.                   var myModal = $('#myModal');  
  17.                   $.ajax({  
  18.   
  19.                   type: "POST",  
  20.                   url: "/WebService1.asmx/VerifyID",  
  21.                   data: "{'ID' : '" + $('#txtId').val() + "'}",  
  22.                   contentType: "application/json; charset=utf-8",  
  23.                   dataType: "json",  
  24.                   success: function (msg) {  
  25.   
  26.                      if (msg.d == 'invalid') {  
  27.                      alert('Id does not exists.');  
  28.                   }  
  29.   
  30.                   else {  
  31.   
  32.                      if (msg.d.length > 0) {  
  33.                         var Result = jQuery.parseJSON(msg.d);  
  34.                         var Name = Result.Name;  
  35.                         var Address = Result.Address;  
  36.                         var LastName = Result.LastName;  
  37.   
  38.   
  39.                         $('#lblName').html('Name : ' + Name);  
  40.                         $('#lblAddress').html('Address : ' + Address);  
  41.                         $('#lbllastName').html('LastName : ' + LastName);  
  42.   
  43.   
  44.                         $('#myModal').modal('show');  
  45.                      }  
  46.                      else {  
  47.                         alert('Some error occurred, please try after some time.');  
  48.                      }  
  49.                   }  
  50.   
  51.                },  
  52.                failure: function () {  
  53.                   alert('Some error occurred,please try after some time.');  
  54.                }  
  55.   
  56.             });  
  57.   
  58.          }  
  59.          return false;  
  60.   
  61.       }  
  62.   
  63.       </script>  
  64.       <script type="text/javascript" language="javascript">  
  65.          function onlyIds(e, t) {  
  66.   
  67.             try {  
  68.   
  69.                if (window.event) {  
  70.   
  71.                   var charCode = window.event.keyCode;  
  72.                }  
  73.   
  74.                else if (e) {  
  75.   
  76.                  var charCode = e.which;  
  77.                }  
  78.   
  79.                else { return true; }  
  80.   
  81.   
  82.                if (charCode > 31 && (charCode < 48 || charCode > 57)) {  
  83.   
  84.                return false;  
  85.             }  
  86.             else if (charCode == 13) {  
  87.                VerifyToken();  
  88.                return false;  
  89.             }  
  90.             else {  
  91.             return true;  
  92.          }  
  93.       }  
  94.   
  95.       catch (err) {  
  96.   
  97.          alert(err.Description);  
  98.   
  99.       }  
  100.   
  101.      }  
  102.   
  103.       </script>  
  104.    <link href="assets/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />  
  105.    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  106.    <title></title>  
  107. </head>  
  108. <body>  
  109.    <form id="form1" runat="server">  
  110.       <!-- Button trigger modal -->  
  111.       <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">  
  112.          Launch demo modal  
  113.       </button>  
  114.          <input type="button" id="btnSubmit" class="blue-bg" onclick="VerifyIds();" />  
  115.             <input runat="server" type="text" maxlength="20" id="txtId" onkeypress="return onlyIds(event,this);" />  
  116.             <!-- Modal -->  
  117.                <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
  118.                <div class="modal-dialog">  
  119.                   <div class="modal-content">  
  120.                   <div class="modal-header">  
  121.                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>  
  122.                <h4 class="modal-title" id="myModalLabel">Applicant Details Form</h4>  
  123.             </div>   
  124.             <div class="modal-body">  
  125.                <fieldset id="Fieldset3" runat="server" visible="True">  
  126.             <h3>  
  127.             Details</h3>  
  128.             <table class="table table-striped">  
  129.                <tr>  
  130.                   <td>  
  131.                      <asp:Label ID="lblName" runat="server">  
  132.                         </asp:Label>  
  133.                            </td>  
  134.                            </tr>  
  135.                            <tr>  
  136.                               <td>  
  137.                                  <asp:Label ID="lblAddress" runat="server">  
  138.                                     </asp:Label>  
  139.                                  </td>  
  140.                               </tr>  
  141.                               <tr>  
  142.                              <td>  
  143.                               <asp:Label ID="lbllastName" runat="server">  
  144.                              </asp:Label>  
  145.                            </td>  
  146.                         </tr>  
  147.   
  148.                   </table>  
  149.                </fieldset>  
  150.                </div>  
  151.                   <div class="modal-footer">  
  152.                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
  153.                      <button type="button" class="btn btn-primary">Save changes</button>  
  154.                   </div>  
  155.                </div>  
  156.             </div>  
  157.          </div>  
  158.       </form>  
  159.    </body>  
  160. </html>  
myModal is the bootstrap popup,VerifyIds is the function Which Calls the WebService and if there is data then it just assigns to the controls in the Popup.Result object which is used in webmethod  is been used in the function.Do not forget to add bootstrap.js,jquey.1.10.2.js,and bootstrap css to the file.