ورود / ثبت نام
0
0

نمایش اطلاعات در modal Bootstrap توسط وب سرویس

290 بازدید
modal Bootstrap

modal Bootstrap

در این مقاله میخواهم به شما نشان دهم که چگونه میتوانیم داده در modal Bootstrap نمایش دهیم ؟ با من در ادامه همراه باشید

گام ۱ :

یک وب سرویس بسازید. در آن من از یک WebMethod استفاده کرده ام که داده را از پایگاه داده میگیرد. من یک دیکشنری نتیجه ی نام اشیا که داده ها را نگه میدارد نیز ساخته ام. اینم از کد وب سرویس.

کد برای وب سرویس

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Services;  
using System.Data;  
using System.Data.SqlClient;  
using System.Configuration;  
  
namespace Aniket_MahaOnline  
{  
   /// <summary>  
   /// Summary description for WebService1  
   /// </summary>  
   [WebService(Namespace = "http://tempuri.org/")]  
   [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
   [System.ComponentModel.ToolboxItem(false)]  
   // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.   
   [System.Web.Script.Services.ScriptService]  
   public class WebService1 : System.Web.Services.WebService  
   {  
      SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Locals_New"].ConnectionString.ToString());  
      [WebMethod]  
      public string VerifyID(string ID)  
      {  
         string Result = string.Empty;  
         try  
         {  
            DataTable dt = new DataTable();  
            using (SqlCommand cmd = new SqlCommand("DisplayServiceInfo", con))  
            {  
               cmd.CommandType = CommandType.StoredProcedure;  
               cmd.Parameters.AddWithValue("@Para", "Get_by_ID");  
               cmd.Parameters.AddWithValue("@Id", ID);  
               SqlDataAdapter da = new SqlDataAdapter(cmd);  
               da.Fill(dt);  
               if (dt.Rows.Count > 0)  
               {  
                  Result = "{\"Name\":";  
                  Result += "\"" + dt.Rows[0][0].ToString() + "\",";  
                  Result += "\"Address\":\"" + dt.Rows[0][1].ToString() + "\",";  
                  Result += "\"LastName\":\"" + dt.Rows[0][2].ToString() + "\"";  
                  Result += "}";  
               }  
  
               else  
               {  
                  Result = "Invalid";  
               }  
            }  
         }  
         catch (Exception ex)  
         {  
            Result = "Error";  
         }  
         return Result;  
   }    
}  

همانطور که میبینید من یک WebMethod بنام Varify id ساخته ام که IDرا به عنوان پارامتر به WebMethod.DisplayServiceInfo که Stored Procedure است , پاس میدهد . همچنین فراموش نکنید که خط زیر را Uncomment کنید.

[System.Web.Script.Services.ScriptService] همانطور که ما این متد را با استفاده از جاوا سکریپت صدا میزنیم.

گام ۲ :

حال در صفحه ی Aspx و نه در قسمت CS. تابعی بنویسید که متد WebService را فراخوانی کند و اگر شامل داده بود پنجره ی bootstrap modal را فراخوانی میکند. این هم تمام کد :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm17.aspx.cs" Inherits="Aniket_MahaOnline.WebForm17" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript">  
</script>  
<script src="assets/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
<script type="text/javascript" language="javascript">  
function VerifyIds() {  
if ($('#txtId').val() == "") {  
alert("Please Enter Id");  
}  
else {  
var myModal = $('#myModal');  
$.ajax({  
type: "POST",  
url: "/WebService1.asmx/VerifyID",  
data: "{'ID' : '" + $('#txtId').val() + "'}",  
contentType: "application/json; charset=utf-8",  
dataType: "json",  
success: function (msg) {  
if (msg.d == 'invalid') {  
alert('Id does not exists.');  
}  
else {  
if (msg.d.length > 0) {  
var Result = jQuery.parseJSON(msg.d);  
var Name = Result.Name;  
var Address = Result.Address;  
var LastName = Result.LastName;  
$('#lblName').html('Name : ' + Name);  
$('#lblAddress').html('Address : ' + Address);  
$('#lbllastName').html('LastName : ' + LastName);  
$('#myModal').modal('show');  
}  
else {  
alert('Some error occurred, please try after some time.');  
}  
}  
},  
failure: function () {  
alert('Some error occurred,please try after some time.');  
}  
});  
}  
return false;  
}  
</script>  
<script type="text/javascript" language="javascript">  
function onlyIds(e, t) {  
try {  
if (window.event) {  
var charCode = window.event.keyCode;  
}  
else if (e) {  
var charCode = e.which;  
}  
else { return true; }  
if (charCode > 31 && (charCode < 48 || charCode > 57)) {  
return false;  
}  
else if (charCode == 13) {  
VerifyToken();  
return false;  
}  
else {  
return true;  
}  
}  
catch (err) {  
alert(err.Description);  
}  
}  
</script>  
<link href="assets/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />  
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
<title></title>  
</head>  
<body>  
<form id="form1" runat="server">  
<!-- Button trigger modal -->  
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">  
Launch demo modal  
</button>  
<input type="button" id="btnSubmit" class="blue-bg" onclick="VerifyIds();" />  
<input runat="server" type="text" maxlength="20" id="txtId" onkeypress="return onlyIds(event,this);" />  
<!-- Modal -->  
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
<div class="modal-dialog">  
<div class="modal-content">  
<div class="modal-header">  
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>  
<h4 class="modal-title" id="myModalLabel">Applicant Details Form</h4>  
</div>   
<div class="modal-body">  
<fieldset id="Fieldset3" runat="server" visible="True">  
<h3>  
Details</h3>  
<table class="table table-striped">  
<tr>  
<td>  
<asp:Label ID="lblName" runat="server">  
</asp:Label>  
</td>  
</tr>  
<tr>  
<td>  
<asp:Label ID="lblAddress" runat="server">  
</asp:Label>  
</td>  
</tr>  
<tr>  
<td>  
<asp:Label ID="lbllastName" runat="server">  
</asp:Label>  
</td>  
</tr>  
</table>  
</fieldset>  
</div>  
<div class="modal-footer">  
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
<button type="button" class="btn btn-primary">Save changes</button>  
</div>  
</div>  
</div>  
</div>  
</form>  
</body>  
</html>

MyModal همان پنجره ی Bootstrap میباشد , Verifylds تابعی است که WebService را صدا میزند و اگر داده ای وجود داشت به کنترل های پنجره اختصاص داده میشود. شی Result که در WebMethod استفاده شده است , در تابع نیز استفاده شده. فراموش نکنید که bootstrap.js , jquery.1.10.2.js و bootstrap css را به فایل اضافه کنید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=14074
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد نمایش اطلاعات در modal Bootstrap توسط وب سرویس

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.