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