Sunday, 20 October 2013

using partial view in mvc 3.0

First take controller name Emp


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcPartialView.EF;


namespace MvcPartialView.Controllers
{
    public class EmpController : Controller
    {
        //
        // GET: /Emp/
        test_dbEntities db = new test_dbEntities();
       
        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult ShowEmployee()
        {
            return PartialView(db.emps);
        }

    }
}
----------------------------------------------------------------------

and add view with partial view so it is user control like .aspx 
with name 

@model IEnumerable<MvcPartialView.EF.emp>

<table>
<tr>
<td style="background-color:Silver;color:Navy;">Emp Id</td>
<td style="background-color:Silver;color:Navy;">Emp Name</td>
<td style="background-color:Silver;color:Navy;">Emp age</td>
</tr>
@foreach (var item in Model)
{
  <tr>
<td style="background-color:Silver;color:Navy;">@item.id</td>
<td style="background-color:Silver;color:Navy;">@item.name</td>
<td style="background-color:Silver;color:Navy;">@item.age</td>
</tr>  
}
<tr>
<td style="background-color:Silver;color:Navy;">
    <input id="txt" type="text" /></td>
<td style="background-color:Silver;color:Navy;"></td>
<td style="background-color:Silver;color:Navy;"></td>
</tr>  
</table>

-------------------------------------------------------------------------
now goes to global.aspx

 public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Emp", action = "ShowEmployee", id = UrlParameter.Optional } // Parameter defaults
            );

        }

now run this it will give output like this:

Emp Id Emp Name Emp age
23 deepak 45
24 hari 35
32 abc 23
33 xyz 23
34 pqw 45
35 huj 45
36 bnm 45
37 ghf 45
38 qas 45
39 tyu 45
40 jkl 45
41 lop 45
42 der 67
-----------------------------------------------------------------------------
now we will  call this usercontrol in our index page;

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.5.1.js"
     type="text/javascript"></script>

     <script type="text/javascript">
         $(document).ready(function () { show(); });

         function show() {
             $.get('/Emp/ShowEmployee', null, function (data) { chk(data); });          
         }
         function chk(abc) {            
             $('#d1').html(abc);
         }

         function chk1() {
             alert($("#txt").val());
         }
     </script>

</head>
<body>

    <input id="Button1" type="button" onclick="chk1();" value="button" />

    <div id="d1" >
        
    </div>
</body>
</html>
------------------------------------------------------------
now change our global.aspx and change action index like this

 public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Emp", action = "index", id = UrlParameter.Optional } // Parameter defaults
            );

        }



Sunday, 13 October 2013

generating imagecaptcha using javacript

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Captcha</title>
   
    <script type="text/javascript">

        //Created / Generates the captcha function  
        function DrawCaptcha() {
            var a = Math.ceil(Math.random() * 10) + '';
            var b = Math.ceil(Math.random() * 10) + '';
            var c = Math.ceil(Math.random() * 10) + '';
            var d = Math.ceil(Math.random() * 10) + '';
            var e = Math.ceil(Math.random() * 10) + '';
            var f = Math.ceil(Math.random() * 10) + '';
            var g = Math.ceil(Math.random() * 10) + '';
            var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' ' + f + ' ' + g;
            document.getElementById("txtCaptcha").value = code
        }

        // Validate the Entered input aganist the generated security code function  
        function ValidCaptcha() {
            var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
            var str2 = removeSpaces(document.getElementById('txtInput').value);
            if (str1 == str2) return true;
            DrawCaptcha();
            return false;

        }

        // Remove the spaces from the entered and generated code
        function removeSpaces(string) {
            return string.split(' ').join('');
        }
   

    </script>
   
   
   
</head>
<body onload="DrawCaptcha();">
<table>
<tr>
    <td>
        Welcome To Captcha<br />
    </td>
</tr>
<tr>
    <td>
        <input type="text" id="txtCaptcha"
            style="background-image:url(1.jpg); text-align:center; border:none;
            font-weight:bold; font-family:Modern" />
      <%--  <input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" />--%>
    </td>
</tr>
<tr>
    <td>
        <input type="text" id="txtInput"/>  
    </td>
</tr>
<tr>
    <td>
        <input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
    </td>
</tr>
</table>
</body>
</html>

--------------------------------------------------------------------------------------------
ouput look like this


Welcome To Captcha

Saturday, 12 October 2013

custom Control to display data using jquery for listing and progress bar while loading data in control

<%@ Page Title="" Language="C#" MasterPageFile="~/site.Master" AutoEventWireup="true"
    CodeBehind="default.aspx.cs" Inherits="WebApplication3._default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
 
    <div id="rpOrders" style=" width:100%; height:150px; margin-left:15%; margin-right:15%">
    <fieldset>
     <table>
        <tr>
        <td style=" width:40%">
        URL:<a href="detail.aspx?id={D:Id}">{D:Id}</a><br />
        NAME: {D:Name}<br />
        Price:  {D:Price}<br />
        Gender:{D:sex}<br />
        Image:<img src="css/img/ajax-loader-bar.gif" alt="" />
        <br />
        <input type="button" value="Find" />

        </td>
           <td style=" width:60%">
             
            </td>
        </tr>
         </table>
         </fieldset>
    </div>
 
</div>
    <script type="text/javascript">
        $(document).ready(function () {
            rpItemsDataBind('#rpOrders', 'Default.aspx/GetOrders');
        });
    </script>
</asp:Content>

------------------------------------------------------------------------------------------------
                                  revolver.js



function regexReplace(str, reg) {
    var re = new RegExp(reg);
    var m = re.exec(str);
    if (m == null) {
        return '';
    } else {
        var s = '';
        for (i = 0; i < m.length; i++) {
            s = s + m[i];
        }
        return s;
    }
}
function rpItemsDataBind(rpSelector, url) {
    var rp = $(rpSelector).html();
    $(rpSelector).html('<img src="css/img/ajax-loader-bar.gif" style="margin-bottom: -3px" /> Progress...');
    $.ajax({
        type: "POST",
        url: url,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $(rpSelector).html('');
            var c = eval(msg.d);
            for (var i in c) {
                var item = rp;
                while (true) {
                    var r = regexReplace(item, '{D:\\w+}')
                    if (r == '') {
                        break;
                    }
                    var ri = r.replace('{D:', '');
                    ri = ri.replace('}', '');
                    item = item.replace(r, c[i][ri]);
                }
                $(rpSelector).append(item);
            }
            $(rpSelector).replaceWith($(rpSelector).html());
        },
        error: function () {
            $(rpSelector).html('Could not load data');
        }
    });
}
----------------------------------------------------------------------------------------------
make class like this


 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;
using System.Web.Script.Services;
using System.Collections;

namespace WebApplication3
{
    public class Order
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
    }

    public partial class _default : System.Web.UI.Page
    {  
        private static List<Order> FieldOrders;
        public static List<Order> OrderList
        {
            get
            {
                if (FieldOrders == default(List<Order>))
                {
                    FieldOrders = new List<Order>();
                    for (int i = 1; i < 11; i++)
                    {
                        FieldOrders.Add(new Order() { Id = Guid.NewGuid(), Name = "Order Name" + i.ToString(), Price = i * 10 });
                    }
                }
                return FieldOrders;
            }
        }  
 
        [WebMethod()]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static IEnumerable GetOrders()
        {
            System.Threading.Thread.Sleep(3000);
            return OrderList.AsEnumerable();
        }
    }
}

-------------------------------------------------------------------------------------------------------
output look like this:


URL:b64dccdd-dd06-46ae-82cd-91bc5a1861ee
NAME: Order Name1
Price: 10
Gender:male
Image:
URL:332d50e5-8860-46f2-9f39-98f8bc901816
NAME: Order Name2
Price: 20
Gender:male
Image:
URL:a76d37e0-908e-4efc-ac39-15eebf7e5b77
NAME: Order Name3
Price: 30
Gender:male
Image:
URL:03769b96-4bef-4bf9-8d4c-fad4d3cfd35b
NAME: Order Name4
Price: 40
Gender:male
Image:
URL:17102de5-523b-49ba-93ee-16375c759726
NAME: Order Name5
Price: 50
Gender:male
Image:
URL:218cdede-a0ad-416f-9e8f-5ac38425f155
NAME: Order Name6
Price: 60
Gender:male
Image:
URL:cd6b047e-bd78-444b-9a81-ab33f6f0249c
NAME: Order Name7
Price: 70
Gender:male
Image:
URL:dcc44495-ef7e-4903-abf7-1baf90b72ca1
NAME: Order Name8
Price: 80
Gender:male
Image:
URL:b8440c3f-3d37-48b2-b133-5a50e5282b6d
NAME: Order Name9
Price: 90
Gender:male
Image:
URL:e8c5a3e5-5d60-42ec-8085-a39c425b63bc
NAME: Order Name10
Price: 100
Gender:male
Image:

bind li using jquery in asp.net with css class dynamically

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>

   <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<%--<script type="text/javascript" language="javascript">
 function showData() {

            $.ajax({
                url: 'Default4.aspx/Show',
                type: 'post',
                data: '{}',
                contentType: 'application/json;charset=utf-8',
                dataType:'json',
                success: function (amit) {
                 chkShowData(amit);
                 },
             Error: function (amit) {
                alert(amit)
                }
            });
     }
     function chkShowData(abc) {
         //debugger;
         FillEmployee(abc.d);
     }

     function FillEmployee(EmpData) {
         var table = "<table>"
         + "<tr>"
         + "<td style=width:100px;background-color:silver;color:navy;>Emp Id</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>Emp Name</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>Emp age</td>"
         + "</tr>";
         var Row = "";
         for (var indx in EmpData) {
             Row += "<tr>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         EmpData[indx].id+ "</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         EmpData[indx].name + "</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         EmpData[indx].age + "</td>"
         + "</tr>"
         }
         table += Row;
         table += "</table>";
         $('#d1').html(table);
     }
     
</script>--%>


<script type="text/javascript" language="javascript">
    function showData() {

        $.ajax({
            url: 'Default4.aspx/Show',
            type: 'post',
            data: '{}',
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (amit) {
                chkShowData(amit);
            },
            Error: function (amit) {
                alert(amit)
            }
        });
    }
    function chkShowData(abc) {
        //debugger;
        FillEmployee(abc.d);
    }

    function FillEmployee(EmpData) {
//        debugger;
//        $("#div3").html('');
      // var div3Content = '';
//        for (var i = 0; i < EmpData.length; i++)
//         {
//            div3Content += '<p>' + EmpData[i].name + '</p>'; //if Name is property of your Person object
//        }
        //        $("#div3").append(div3Content);

        debugger;
        var listString = '<ul id="customerList" class="dropv">';

        // running a loop
       for (var i = 0; i < EmpData.length; i++) {
           listString += '<li><a href="Default2.aspx " style="text-decoration:none;" >' + EmpData[i].name + '</a></li>';
        }
        listString += '</ul>';
        //appending to the div
        $('#LankanLists').html(listString);
    }  
</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="d1"></div>
    <input id="Button1" onclick="showData();" type="button" value="Show" />

    </div>  
     
        <div id="LankanLists"></div>


    </form>
</body>
</html>

Thursday, 3 October 2013

call webservice using jquery

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

<!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></title>
    <script src="jquery-1.5.1.js" type="text/javascript"></script>
    <script src="jquery.xml2json.js" type="text/javascript"></script>

    <script  type="text/javascript">
        $(document).ready(function () { CallService(); });

        function CallService() {
               
            $.ajax({
                url: "http://localhost/Service8sep2013/Service.asmx/HelloWorld",
                type: 'post',
                data: "{}",
                contentType: 'text/xml;charset=utf-8',
                dataType: 'xml',
                success: function (amit) {
                    chkService(amit);
                },
                error: function (amit) {
                    chkService(amit);
                }

            });
        }

        function chkService(abc) {
            //debugger;
            var data = $.xml2json(abc);  // we need to add this js file which will convert xml to json
            FillEmployee(data.Employee);
           // debugger;
         }
         function FillEmployee(EmpData) {
             var table = "<table>"
         + "<tr>"
         + "<td style=width:100px;background-color:silver;color:navy;>Emp Id</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>Emp Name</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>Emp Salary</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>Insertion</td>"
         + "</tr>";
             var Row = "";
             for (var indx in EmpData) {
                 Row += "<tr>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         EmpData[indx].EmpId + "</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         EmpData[indx].EmpName + "</td>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         EmpData[indx].EmpSalary + "</td>"
         + "<td style=width:100px;background-color:silver;color:navy;></td>"
         + "</tr>"
             }
             table += Row;

             var RowFooter = "<tr>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         "<input id=txtEmpId type=text /> </td>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         "<input id=txtEmpName type=text /> </td>"
         + "<td style=width:100px;background-color:silver;color:navy;>" +
         " <input id=txtEmpSalary type=text /> </td>"
         + "<td style=width:100px;background-color:silver;color:navy;>"
         + "<input id=btnSave onclick=saveData() type=button value=Save />  </td>"
         + "</tr>"
             table += RowFooter;
             table += "</table>";
             $('#d1').html(table);
         }  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="d1" >
   
    </div>
    </form>
</body>
</html>