در این مقاله میخواهم به شما نشان دهم که چگونه میتوانیم داده در 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 را به فایل اضافه کنید.
هیچ دیدگاهی نوشته نشده است.