ASP.NET 4.5 and ASP.NET Core 1 Hosting BLOG

Tutorial and Articles about ASP.NET 4.0 and the latest ASP.NET 4.5 Hosting

ASP.NET 4.5.1 Hosting - with ASPHostPortal.com :: How to Load GMap Direction from Database in ASP.NET

clock March 11, 2014 06:45 by author Kenny

Well i am going to explain how to load GMap direction from database in ASP.NET.
Google maps is a web mapping service application and technology provided by Google, powering many map-based services, including the Google maps website, Google ride finder, Google transit, and maps embedded on third-party websites via the Google maps API. ASP.NET is a server-side web application framework designed for web development to produce dynamic web pages.
Let’s check the steps for run this program.

For the first: Go to file > new > project > select asp.net web forms application > entry application name > click ok.

And then add a database: Go to solution explorer > right click on app_data folder > add > new item > select sql server database under data > enter database name > add.


After that create table: Open database > right click on table > add new table > add columns > save > enter table name > ok.

This is the table sample:

Next, create a stored procedure in sql server: Open database > right click on stored procedure > add new stored procedure > write below sql code > save.

Next step, add a webpage: Go to solution explorer > right click on project name form solution explorer > add > new item > select web form/ web form using master page under web > enter page name > add.
Html code



Js code

Write this below js code for load gmap direction from database.

<script src="//maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=abqiaaaaupsjpk3mbtdpj4g8cqbnjrragtyh6uml8madna0ykuwnna8vnxqczvbxtx2dyyxgstoxpwhvig7djw" type="text/javascript"></script><script language="javascript">
        var gmap;

        var directionpanel;
        var direction;
        function initialize() {
            gmap = new gmap2(document.getelementbyid("map"));
            gmap.setcenter(new glatlng(22.573438, 88.36293), 15);
// here i have set kolkata as center and 15 zoom level

            directionpanel = document.getelementbyid("route");
            direction = new gdirections(gmap, directionpanel);
        }
        $(document).ready(function ()
{
            initialize();

            $('#btngetdirection').click(function () {
                //here populate data from database and get to gmap direction
                populatedirection();
            });
        });
        function populatedirection() {
            var from = $('#<%=ddfrom.clientid%>').val();
            var to = $('#<%=ddto.clientid%>').val();

            $.ajax({
                url: "default.aspx/getdirectioin",
// here url for code behind function
                type: "post",
                data: "{from: '"+from+"', to: '"+to+"'}",
                datatype: "json",
                contenttype: "application/json; charset=utf-8",
                success: function (data) {
                    direction.load(data.d.tostring());

                },
                error: function () {
                    alert("error!");
                }
            });
        }
    </script>

And then: write following code in page_load event:
Protected void page_load(object sender, eventargs e)
{
    if (!ispostback)
    {
        populatelocation();
    }}


Here is the function...

Private void populatelocation(){

// populate location here
    datatable dt = new datatable();
    using (sqlconnection con = new sqlconnection(configurationmanager.connectionstrings["con"].connectionstring))
    {
        string query = "select * from locations";
        sqlcommand cmd = new sqlcommand(query, con);
        if (con.state != connectionstate.open)
        {
            con.open(); }
        dt.load(cmd.executereader());}
    ddfrom.datasource = dt;
    ddfrom.datatextfield = "locname";
    ddfrom.datavaluefield = "locid";
    ddfrom.databind();
    ddto.datasource = dt;
    ddto.datatextfield = "locname";
    ddto.datavaluefield = "locid";
    ddto.databind();}


Don’t forget write this function into your page code behind for called from jquery code:

// this is the function is for called from jquery
[webmethod]
Public static string getdirectioin(string from, string to){
    string returnval = "";
    datatable dt = new datatable();
using (sqlconnection con = new sqlconnection(configurationmanager.connectionstrings["con"].connectionstring))
    {
        sqlcommand cmd = new sqlcommand("getdirection", con);
        cmd.commandtype = commandtype.storedprocedure;
        cmd.parameters.addwithvalue("@locfrom", from);
        cmd.parameters.addwithvalue("@locto", to);
        if (con.state != connectionstate.open)
        {
            con.open();}
        dt.load(cmd.executereader());}
    returnval = "from: " + dt.rows[0]["fromloc"].tostring() + " to: " + dt.rows[0]["toloc"].tostring();
    return returnval;}


And the last, Just run your application



Free Trial ASP.NET 4.5.1 Hosting - with ASPHostPortal.com :: How to make Scrollable GridView with a Fixed Header in .NET 4.5.1

clock March 7, 2014 05:38 by author Diego

In this article I will explain how to implement scrollable gridview with fixed header in asp.net using JQuery. GridView control of ASP.NET 4.5.1 makes our task much simpler as compared to HTML tables. But one problem which I always faced with GridView control is of scrolling headers. I tried several forums and websites, but didn’t come up with a good solution. GridView doesn’t have the ability to scroll. But if the GridView contains the larger number of rows or columns (say more than 100 rows and 15 columns), we want it to have scrollbars.

Now it is time to see all the activity in detail :

  • create a database in the SQL ServerCreate an ASP.NET website.
  • Create jquery-1.4.1.min.js and ScrollableGridPlugin.js and write this code in the header section. copy and paste it inside  <Head>.
    These script files by using these files we can manage the GridView header fixed postion.


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

    <
    script type="text/javascript" src="Scripts/ScrollableGridPlugin.js"></script>
  • Write the jQuery code that is given below.

    script
    type="text/javascript">
            $(document).ready(function () {
                $('#<%=GridView1.ClientID %>').Scrollable();
            });

    </
    script
    >

  • The next step is to create a new HTML table in HeaderDiv which will contain the new header for the GridView. This job will be done by a JavaScript function (say CreateGridHeader()). This JavaScript function also sets the HeaderDiv style as per the DataDiv and new HTML table style as per GridView style and also we will hide the original header of GridView. This function will be called every time after filling the GridView with data as well as on the Page Load.
    created in the Page Load Default.aspx page like this :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" 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">
    <title>Scrollable GridView With a Fixed Header Using jQuery</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <
script type="text/javascript" src="Scripts/ScrollableGridPlugin.js"></script>
      <
script type="text/javascript">
        $(document).ready(function () {
            $('#<%=GridView1.ClientID %>').Scrollable();
        });
      </script
>
<
body>
    <form id="form1" runat="server">
    <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false">
        <RowStyle BackColor="#EFF3FB" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <AlternatingRowStyle BackColor="White"
/>
        <Columns>
            <asp:BoundField DataField="id" HeaderText="Id" />
            <asp:BoundField DataField="name" HeaderText="Name" />
            <asp:BoundField DataField="salary" HeaderText="Salary" />\
            <asp:BoundField DataField="addres" HeaderText="Address" />
        </Columns>
    </asp:GridView>
    </form>
</
body
>

</html>

  • Binding the GridView with a DataTable object in the code behind file of Default.aspx page.

    using
    System;
    using
    System.Collections.Generic;
    using
    System.Linq;
    using
    System.Web;
    using
    System.Web.UI;
    using
    System.Web.UI.WebControls;
    using
    System.Data;
    using
    System.Data.SqlClient;


    public
    partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection(@"Data Source=.;Initial Catalog=akshay;Persist Security Info=True;User ID=sa;Password=wintellect";
            SqlDataAdapter adap = new SqlDataAdapter("select * from Person",con);
            DataSet ds=new DataSet();
            adap.Fill(ds,"Person");
            GridView1.DataSource = ds.Tables["Person"];
            GridView1.DataBind();
            GridView1.UseAccessibleHeader = true;
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
        }

    }
  • Run the Page by f5, you will see that the Header and Footer is fixed when you scrolling. You are now ready with the GridView with fixed headers.

If you looking for windows web hosting services who support ASP.Net 4.5.1 please visit our Site ASPHostPortal.com



Cheap ASP.NET 4.5 Hosting

We’re a company that works differently to most. Value is what we output and help our customers achieve, not how much money we put in the bank. It’s not because we are altruistic. It’s based on an even simpler principle. "Do good things, and good things will come to you".

Success for us is something that is continually experienced, not something that is reached. For us it is all about the experience – more than the journey. Life is a continual experience. We see the Internet as being an incredible amplifier to the experience of life for all of us. It can help humanity come together to explode in knowledge exploration and discussion. It is continual enlightenment of new ideas, experiences, and passions


Author Link


 

Corporate Address (Location)

ASPHostPortal
170 W 56th Street, Suite 121
New York, NY 10019
United States

Tag cloud

Sign in