Translate

Thursday, 23 July 2015

How to convert Json String to Datatable in C#

Create a website and add webform as "Default.aspx" and add contrals as shown below



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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .pageheading
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 25px;
            height: 25px;
            border-radius: 7px;
            font-weight: bold;
            padding-left: 20px;
            background: #0071b6;
            border: 1px solid #959595;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ui_scptMgr_EmployeeDetail" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="ui_updpnl_EmployeeDetail" runat="server">
            <ContentTemplate>
                <asp:Label ID="ui_lbl_JsonString" runat="server"></asp:Label>
                <br />
                <br />
                <asp:Button ID="ui_btn_Convert2" runat="server" Text="Newtonsoft Convert into DataTable" OnClick="ui_btn_Convert2_Click" />
                <asp:Button ID="ui_btn_Reload" runat="server" Text="Reload" OnClick="ui_btn_Reload_Click" />
                <br />
                <br />
                <asp:GridView ID="ui_grdVw_EmployeeDetail1" runat="server" Width="50%" HeaderStyle-CssClass="pageheading">
                </asp:GridView>
                <br />
                <br />
                <asp:GridView ID="ui_grdVw_EmployeeDetail2" runat="server" Width="50%" HeaderStyle-CssClass="pageheading">
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>





And code shown below
you showd add json string text file in your website.




using System;
using System.Data;
using System.IO;
using Newtonsoft.Json;

public partial class _Default : System.Web.UI.Page
{
    #region Global Variable
    DataTable dt;
    string JsonString = string.Empty;
    ConvertJsonStringToDataTable jDt = new ConvertJsonStringToDataTable();
    #endregion
   
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string FileName = "JSONString.txt";
            var stream = File.OpenText(Server.MapPath(FileName));
            JsonString = stream.ReadToEnd();
            ui_lbl_JsonString.Text = JsonString;
        }
    }
  
    protected void ui_btn_Convert2_Click(object sender, EventArgs e)
    {
        JsonString = ui_lbl_JsonString.Text;
        dt = (DataTable)JsonConvert.DeserializeObject(JsonString, (typeof(DataTable)));
        ui_grdVw_EmployeeDetail2.DataSource = dt;
        ui_grdVw_EmployeeDetail2.DataBind();
    }
    protected void ui_btn_Reload_Click(object sender, EventArgs e)
    {
        Response.Redirect(Request.RawUrl);
    }
}


the json string in text file as

[{"id":"10","name":"User","add":false,"edit":true,"authorize":true,"view":true},
    {"id":"11","name":"Group","add":true,"edit":false,"authorize":false,"view":true},
    {"id":"12","name":"Permission","add":true,"edit":true,"authorize":true,"view":true}]



the output shown below


Wednesday, 13 May 2015

Google Maps in mvc4



Google Maps shown below



<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map-canvas {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        function initialize(location) {

            console.log(location);

            var mapOptions = {

                center: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
                zoom: 8
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
        }

        $(document).ready(function () {
            navigator.geolocation.getCurrentPosition(initialize);
        });
    </script>
</head>
<body>
    <div id="map-canvas" />
</body>
</html>


Output Map

Tuesday, 12 May 2015

Apply watermark text for text boxes in HTML in different Ways


we can apply water mark to html text boxes.

Using watermark plugin

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="~/Scripts/WaterMark.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#txtName,#Email,#Mobile").WaterMark();
        });
    </script>
<body>
<table>

        <tr>
            <td>Name:</td>
            <td>
                <input type="text" id="txtName" title="Enter Name" />
            </td>
        </tr>
        <tr>
            <td>Email:</td>
            <td>
                <input type="text" id="Email" title="Enter Email" /></td>
        </tr>
        <tr>
            <td>Mobile:</td>
            <td>
                <input type="text" id="Mobile" title="Enter Mobile" /></td>
        </tr>
    </table>

</body>





using naormal place holder

<body>

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

</body>