Friday 12 April 2013

Ajax Modal Popup With Asp.net



Hi Friends,

In this article I will show you how to Show modal Popup using Ajax Modal Popup Extender

Ajax introduces Modal Popup Extender for showing popup in Asp.net Application.


Step 1: Create one Asp.net Web Application

Step 2: Add Script Manager on the Aspx Page.

     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
      
Step 3: Add reference of Ajax Assembly

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


Step 4: Add Ajax modal popup extender on the Aspx page. Where TargetControlId is on which control you want to show modal popup and PopupControlID is a panel/div where you want to show some message or content on modal popup


    <asp:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"     runat="server" CancelControlID="btnCancel" OkControlID="btnDone" TargetControlID="btnAddNew" PopupControlID="pnlpopup" Drag="true" >
            </asp:ModalPopupExtender>


Step 5: Add some CSS for better UI Looking like

<style type="text/css">
.ModalPopupBG
{
background-color: Black;
filter: alpha(opacity=10);
opacity: 0.7;
z-index: 10000;
}    </style>

Step 6: I added one panel called “pnlpopup” and  added some controls on that panel.


        <asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="400" Width="500px"
            Style="display: none">
            <table width="100%" style="border: Solid 3px #D55500;
 width: 100%; height: 100%"
                cellpadding="0" cellspacing="0">
                <tr style="background-color: #D55500">
                    <td colspan="2" style="height: 10%; color: White; 
font-weight: bold; font-size: larger"
                        align="center">
                        User Details
                    </td>
                </tr>
             
                <tr>
                    <td align="right">
                        Product Name:
                    </td>
                    <td>
   <asp:TextBox ID="txtname" runat="server" />
           </td>
       </tr>
       <tr>
           <td align="right">
               Product Quantity:
           </td>
           <td>
               <asp:TextBox ID="txtqaun" runat="server" />
           </td>
       </tr>
       <tr>
           <td align="right">
            Product Rate:
           </td>
           <td>
               <asp:TextBox ID="txtrate" runat="server" />
           </td>
       </tr>
       <tr>
           <td align="right">
               Total:
           </td>
           <td>
               <asp:TextBox ID="txtTotal" runat="server" />
           </td></tr>
<tr>
            <td>
            </td>
            <td>
                <asp:Button ID="BtnSave"  runat="server"
                    Text="Add" />
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                <asp:Button ID="btnDone" runat="server" Text="Done" />
            </td>
        </tr>
    </table>
</asp:Panel>


                                                                                                                                                                                                                                                          

                                                                                                

Step 7: You can run this application. Now your popup will look like




Happy Programming!!
Don’t forget to leave your feedback and comments below!
If you have any query mail me to Sujeet.bhujbal@gmail.com     
Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
 Blog: www.sujitbhujbal.blogspot.com
Personal Website :-http://sujitbhujbal.wordpress.com/
Facebook :-www.facebook.com/sujit.bhujbal
CodeProject:-http://www.codeproject.com/Members/Sujit-Bhujbal
DotNetHeaven:-http://www.dotnetheaven.com/Authors/sujit9923/sujit-bhujbal.aspx
CsharpCorner:-http://www.c-sharpcorner.com/Authors/sujit9923/sujit-bhujbal.aspx
Linkedin :-http://in.linkedin.com/in/sujitbhujbal
Stack-Exchange: http://stackexchange.com/users/469811/sujit-bhujbal
Twitter :-http://twitter.com/SujeetBhujbal
 JavaTalks :-http://www.javatalks.com/Blogger/sujit9923/
----------------------------------------------------------------------------------

By - No comments:
Labels: ,

Wednesday 3 April 2013

ASP.NET C# Method call using AJAX jQuery




Hi Friends,

In this article I will show you how to call an ASP.NET C# method (Web Method) using jQuery.

Step 1: Create a Web Application

Step 2: In WebForm1.aspx include jQuery file as given below. If you do not have jQuery file, you can download the latest files from http://jquery.com/

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>



Step 3: 


In code behind page (WebForm1.aspx.cs) create a web method to return some data as given below. Make sure to add the attribute [WebMethod()] to the function. You have to include the namespace System.Web.Services. (using System.Web.Services;)

Add a web method in your page as mentioned below.

   [WebMethod]
        public static string GetAllEmpName()
        {
        Employee objEmployee = new Employee { Name = "Sujeet", EmpSal = "50,000", Id = 82375 };


            return "Parameter sent to server from client side as " +
           "follows:<br/>First Name => " +
           objEmployee.Name + "<br/>Emp Sal => " +
           objEmployee.EmpSal + "<br/>Id=> " +
           objEmployee.Id + "<br/>Address => " + objEmployee.Address;
        }

This method returns All Employees from database or collection

Step 4

We will use a jQuery "Ajax" method to call, page methods.

<script type="text/javascript">
$(document).ready(
    function () {
    try {
        $('#btnTest3').click
        (
    function () {
     $.ajax(
    {
    type: "POST",
    url: "AJAXCalling.aspx/GetAllEmpName",
    data: "{}",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    async: true,
    cache: false,
    success: function (msg) {

        $('#myDiv3').text(msg.d); alert(msg.d);
    },
    error: function (x, e) {
        alert("The call to the server side failed. " + x.responseText);
    }
    });
        return false;
    });
    }

    catch (err) {
        alert(err);
    }
    });
   
    </script>


Step 5:

In the Html page we will add div and button like

   <asp:Button ID="btnTest3" runat="server" Text="Click Me"   />
  
<div id="myDiv3" style="font-family:Arial; color: Red;"/>


Run the application and click the button, you can see that the webmethod is called and data is returned.


Happy Programming!!
Don’t forget to leave your feedback and comments below!
If you have any query mail me to Sujeet.bhujbal@gmail.com     
Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
 Blog: www.sujitbhujbal.blogspot.com
Personal Website :-http://sujitbhujbal.wordpress.com/
Facebook :-www.facebook.com/sujit.bhujbal
CodeProject:-http://www.codeproject.com/Members/Sujit-Bhujbal
DotNetHeaven:-http://www.dotnetheaven.com/Authors/sujit9923/sujit-bhujbal.aspx
CsharpCorner:-http://www.c-sharpcorner.com/Authors/sujit9923/sujit-bhujbal.aspx
Linkedin :-http://in.linkedin.com/in/sujitbhujbal
Stack-Exchange: http://stackexchange.com/users/469811/sujit-bhujbal
Twitter :-http://twitter.com/SujeetBhujbal
 JavaTalks :-http://www.javatalks.com/Blogger/sujit9923/
----------------------------------------------------------------------------------
By - No comments:
Labels: , ,