Asp.Net: September 2014

Friday 12 September 2014

How to Get Data From Wikipedia Using API and jQuery in C#

How to Get Data From Wikipedia Using API and jQuery in C#

.Aspx File

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="WikirRference.aspx.vb" Inherits="Default2" %>

<!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="https://googledrive.com/host/0Bw4NrxH2nTVqMnliTHpSY0U4ZE0" type="text/javascript"></script>

    <script src="https://googledrive.com/host/0Bw4NrxH2nTVqYndKU2p0Z2s3M1E" type="text/javascript"></script>

    <script src="https://googledrive.com/host/0Bw4NrxH2nTVqX3VZazJtMmxSNW8" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
        });
        function searchdata() {

            var q = $("#searchterm").val();
            $.getJSON("http://en.wikipedia.org/w/api.php?callback=?",
              {
                  srsearch: q,
                  action: "query",
                  list: "search",
                  format: "json"

              },
              function (data) {
                  $("#results").empty();
                  $("#results").append("Results for <b>" + q + "</b> </br>");
                  $("#results").append("<div> </div>");
                  $.each(data.query.search, function (i, item) {
                      $("#results").append("<div><a href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a> : " + item.snippet + "</div>");
                  });
              });

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="border: 2px solid #a1a1a1; padding: 10px 40px; background: #dddddd; width: 300px; border-radius: 25px; height: 60px; text-align: left;">
            <b>Wikipedia API Search Using jQuery By http://fantasyaspnet.blogspot.in/</b><br />
            (This Wikipedia API will give the search results and references more than one.)
        </div>
        <div style="padding-left: 75px; padding-top: 15px;">
            <input id="searchterm" type="text" />
            <input id="search" type="button" value="Search" onclick="searchdata();" />
        </div>
        <div> </div>
        <div id="results" style="width: 300px; box-shadow: 10px 10px 5px #888888;">
        </div>
    </form>
</body>
</html>

Live Demo

Thursday 11 September 2014

How to Call C# Method/Function Using jQuery Ajax

How to Call C# Method/Function Using jQuery Ajax

pageUrl = '<%= ResolveUrl("~/Default.aspx/jqueryAjaxCall") %>';
Default.aspx = Page Name and jqueryAjaxCall= c# method This is static web method.
firstName = $("#<%= txtFirstName.ClientID %>").val(); First Name parameters
lastName = $("#<%= txtLastName.ClientID %>").val(); Second Name parameters
parameter = { "firstName": firstName, "lastName": lastName }
Json format here first name and last name will we pass as the parameters to my jqueryAjaxCall method

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">
    <title>Call C# method/function using JQuery Ajax</title>

    <script src="Script/jquery-1.11.0.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

        function JqueryAjaxCall() {
            var pageUrl = '<%= ResolveUrl("~/Default.aspx/jqueryAjaxCall") %>';
            var firstName = $("#<%= txtFirstName.ClientID %>").val();
            var lastName = $("#<%= txtLastName.ClientID %>").val();
            var parameter = { "firstName": firstName, "lastName": lastName }

            $.ajax({
                type: 'POST',
                url: pageUrl,
                data: JSON.stringify(parameter),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function(data) {
                    onSuccess(data);
                },
                error: function(data, success, error) {
                    alert("Error : " + error);
                }
            });

            return false;
        }

        function onSuccess(data) {
            alert("welcome " + data.d + " to http://fantasyaspnet.blogspot.in/");
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="3" cellspacing="0" style="width: 25%;">
            <tr>
                <td>
                    First Name:
                </td>
                <td>
                    <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Last Name:
                </td>
                <td>
                    <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" OnClientClick="return JqueryAjaxCall();"
                        Text="Submit" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string jqueryAjaxCall(string firstName, string lastName)
    {
        return firstName + " " + lastName;
    }
}

Demo:

How to Print DIV Content with CSS using jQuery Print Plugin in JavaScript jQuery

How to Print DIV Content with CSS using jQuery Print Plugin in JavaScript jQuery

.Aspx File

<html data-ng-app="myApp">
<head>
    <title>demo</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0Bw4NrxH2nTVqbmVOVkdOenhDU0U"></script>
<script type="text/javascript">
    $(function () {
        $("#hrefPrint").click(function () {
            $("#printdiv").print();
            return (false);
        });
    });
</script>
<style type="text/css">
body {
font-family: verdana ;
font-size: 14px ;
}
h1 {
font-size: 180% ;
}
h2 {
border-bottom: 1px solid #999999 ;
}
.printable {
border: 1px dotted #CCCCCC ;
padding: 10px 10px 10px 10px ;
}
img {
background-color: #E0E0E0 ;
border: 1px solid #666666 ;
padding: 5px 5px 5px 5px ;
}
a {
color: red ;
font-weight:bold;
}
</style>
</head>
<body>
    <div>
        <div id="printdiv" class="printable">
<h2>
fantasyaspnet.blogspot.in
   <a href="#" id="hrefPrint">Print DIV</a>
</h2>
<p>
Welcome to fantasyaspnet.blogspot.in. It will provide many articles relating asp.net, c#, sql server, jquery, json etc...
</p>
<p>
</p>
</div>
    </div>
</body>
</html>