Archive

Author Archive

This page cannot be shown”, when creating web application in sharepoint through CA

January 25, 2014 Leave a comment

Yesterday, I created a new web application in SharePoint 2013 using CA, after showing “This shouldn’t take long” popup, IE showed me an error that “Internet Explorer cannot display the webpage”, other browsers chrome and FF were not showing me an error page but taking too much time and I had to close popup forcefully.
2

22
Although a new web application was added into web application list, but that was corrupted and I could not have created site collection on it. After some research I found the reason why that was not working fine. During web application creation using CA, the request will time out as default CA site application pool Shutdown Time limit is 90. We need to increase it around 300 to 400. Now you can create web application without an error.
3
But what if we have corrupted web application item and we need to repair it. The solution is that, select the corrupted web application item and click on “Authentication Provider” button on the ribbon. It will show an “Authentication Provider” pop. You just need to click on default Zone and click save button.

4

5

6

That’s it, now corrupted web application has been repaired and it will add all missing files into IIS web application. You can create site collection on it. Hope this would help you.

Advertisements

Introduction to HTML5 at ACM Developer Day (National University FAST)

March 16, 2012 Leave a comment

Yesterday I invited at Developer Day Event which was held at Fast National University main Campus Karachi. The Event was organized by ACM-NUCES. I was there to share my knowledge and experience about the HTML5. That was a great experience for me and huge numbers of students were there to take knowledge about HTML5.

The Agenda of the Session was

  •  Offline / Storage
  • Realtime / Communication
  • File / Hardware Access
  • Semantics & Markup
  • Graphics / Multimedia
  • CSS3

 

I would thank to all, who participated in session and those were not able to take part of the session, they can take idea from my slides and demos, by the help of below link you can download the slides and demos.

sample code

Categories: Events, HTML5

Tips n Tools to Start Using HTML5 Today! at MIC

March 4, 2012 3 comments

Yesterday, I invited at MIC (Microsoft Innovation Center) from the user group of Emerging .NET Devs, where I spoke about the topic on Tips n Tools to Start Using HTML5 Today!. As we know that, these days HTML5 is one of the most admired terms in the world of web application development. Beside that we have other challenge, that how can we make use of html5 on the legacy browsers, what kind of features can we adopt currently. As we know that htm5 specification is still in a process way and it will take time to complete it, but beside of these entire thing there are some features can adopt and should be incorporated to our current practices. I exposed all of these things in the session, which features can utilize today by the help of using ployfills. The Agenda of the Session was:

  • Defining HTML5
  • HTML5 as standard platform
  • Building Making your legacy browser understand HTML5
  • Semantic
  • JavaScript API
  • CSS 3

 


I would thank to all of those who participated in the session and made it interactive. You may find demos and ppt by clicking on below icon.
sample code

Categories: Events, HTML5

Android with WCF Services

March 1, 2012 24 comments

These days, android-based phones are gaining popularity and great apps are available and built every day to enhance its popularity. At this time, I want to work on android development and trying to find out how to communicate android with my existing application. The simplest way to do this is to expose the services to enable communication between android and my existing applications. In this blog post, I am going to look at how android can make use of WCF Services. But before moving forward, I would emphasize that since Android does not provide great support of XML or SOAP-based services, we are going to build WCF Restful Services responsible for providing response in JSON format. So, let’s start by looking first at how we can create WCF services.

I will begin by creating a WCF application named “EmployeeServices “with VS 2010 and deploy it on IIS Server. Although VS2010 provides us with a development server where we can test our services, Android will not be able to communicate withVS2010 Development Server, hence you would be required to deploy your services at IIS and with help from your local system IP address, provide DNS to Android.

Settings -> Wireless Control -> Mobile Networks -> Access Point Names, Select the active and replaced the proxy and port of your DNS

The Employee Entity is mention below

[DataContract]
public class Employee
{
[DataMember]
public int EmployeeId { get; set; }
[DataMember]
public string FirstName { get; set; }
[DataMember]
public string LastName { get; set; }
[DataMember]
public string Address { get; set; }
[DataMember]
public string BloodGroup { get; set; }
}

Here is the code of Contract and Services

[ServiceContract(Namespace = "http://services.example.com")]
public interface IEmployeeInfo
{
[OperationContract]
[WebGet(UriTemplate = "GetEmployee/?key={employeeId}" )]
Employee GetEmployee(int employeeId);
}

public class EmployeeInfo : IEmployeeInfo
{
public Employee GetEmployee(int employeeId)
{
Employee employeeInfo = GetEmployees().Where(employee => employee.EmployeeId == employeeId).FirstOrDefault();

return employeeInfo;
}

private List<Employee> GetEmployees()
{
return new List<Employee> {
new Employee { EmployeeId = 11, FirstName = "Waqas", LastName = "Yousuf", Address="A-175 Block 1" , BloodGroup = "B+" },
new Employee { EmployeeId = 22, FirstName = "Moiz", LastName = "Ahmed", Address="B-176 Block 2" , BloodGroup = "O-" },
new Employee { EmployeeId = 33, FirstName = "Waqas", LastName = "Raza", Address="C-177 Block 3" , BloodGroup = "A+" },
new Employee { EmployeeId = 44, FirstName = "Yasir", LastName = "Amin", Address="D-178 Block 4" , BloodGroup = "AB+" },
new Employee { EmployeeId = 55, FirstName = "Adeel", LastName = "Ali", Address="E-179 Block 5" , BloodGroup = "B+" },
new Employee { EmployeeId = 66, FirstName = "Fahad", LastName = "Ahmed", Address="F-180 Block 6" , BloodGroup = "B+" },
new Employee { EmployeeId = 77, FirstName = "Mahboob", LastName = "Ikram", Address="G-181 Block 7" , BloodGroup = "B+" },
new Employee { EmployeeId = 88, FirstName = "Saif", LastName = "Ali", Address="H-182 Block 8" , BloodGroup = "O+" },
new Employee { EmployeeId = 99, FirstName = "Nasir", LastName = "Saleem", Address="J-183 Block 9" , BloodGroup = "B+" },
new Employee { EmployeeId = 111, FirstName = "Yasir", LastName = "Shah", Address="I-184 Block 10" , BloodGroup = "O+" },
new Employee { EmployeeId = 222, FirstName = "Saad", LastName = "Usman", Address="J-185 Block 11" , BloodGroup = "B+" },
new Employee { EmployeeId = 333, FirstName = "Yaseen", LastName = "Wahid", Address="K-186 Block 12" , BloodGroup = "B+" },
new Employee { EmployeeId = 444, FirstName = "Qasim", LastName = "Wasi", Address="L-187 Block 13" , BloodGroup = "B+" },
new Employee { EmployeeId = 555, FirstName = "Asad", LastName = "Tamoor", Address="M-188 Block 14" , BloodGroup = "A+" },
new Employee { EmployeeId = 666, FirstName = "Idress", LastName = "Khan", Address="N-189 Block 15" , BloodGroup = "B+" },
new Employee { EmployeeId = 777, FirstName = "Rafa", LastName = "Rauf", Address="O-190 Block 16" , BloodGroup = "B+" },
new Employee { EmployeeId = 888, FirstName = "Fazain", LastName = "Farooq", Address="P-191 Block 17" , BloodGroup = "B+" },
new Employee { EmployeeId = 999, FirstName = "Ali", LastName = "Akber", Address="Q-192 Block 18" , BloodGroup = "B+" },
new Employee { EmployeeId = 1111, FirstName = "Irfan", LastName = "Khan", Address="R-193 Block 19" , BloodGroup = "B+" },
new Employee { EmployeeId = 2222, FirstName = "Omair", LastName = "Ali", Address="S-194 Block 20" , BloodGroup = "B+" },
new Employee { EmployeeId = 3333, FirstName = "Wasi", LastName = "Ahmed", Address="T-195 Block 21" , BloodGroup = "B+" },

};
}
}

Now here is the Code for Web.Config File.

<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
<standardEndpoints>
<webHttpEndpoint>
<standardEndpoint helpEnabled="true"
automaticFormatSelectionEnabled="true"/>
</webHttpEndpoint>
</standardEndpoints>
<services>
<service name="EmployeeService.EmployeeInfo">
<endpoint kind="webHttpEndpoint"
contract="EmployeeService.IEmployeeInfo" />
</service>
</services>
</system.serviceModel>
</configuration>

In the WCF services I created an Employee Entity which has some employee information properties, and wrote a method which provides the collection of dummy data. You can replace it with your desired repository. To keep things simple, I am going to with simple approach. Next I created a contract in services named “GetEmployee” which is responsible to take the EmployeeID (at some places I refer to it as employee code) and if the matching employee exists the system will provide the complete entity of employee otherwise send it to blank. At the contract, annotate the URI Template,and I am creating an automated formatted service, which means that the same services will provide the data in form of XML or JSON based on the header information of the request. For further clarification, you may refer to one of my previous blog post. WCF 4.0 Automatic Formatting with Jquery Ajax.

Now the services are finalized and it’s time to move towards the Android side. For Android development, I have configured the required ADT plug-in, AVDand Android SDK in Eclipse IDE. Now, I am going to create Android Project named “EmployeeInfo” and click on Next button.

At this stage, I will select ‘Android 2.2’(Froyo)because as AVD I have configured Android 2.2

In the image below, you can find other information where Create Activity name is EmployeeInfoActivity.

Here is the code for EmployeeInfoActivity, in which I am using JSON Object to parse the JSON string I received from services. HttpGet has setter method of header, using which we can request the server for JSON data. Retrieve the data from the server and set them with TextView which are already placed at Android UI.

public class EmploeeInfoActivity extends Activity {

	private final static String EMPLOYEE_SERVICE_URI = "http://192.168.1.3/EmployeeService/EmployeeInfo.svc/GetEmployee/?key=";

	private EditText evEmployeeId;
private TextView tvEmployeeCode;
private TextView tvName;
private TextView tvAddress;
private TextView tvBloodGroup;
	private Button bSearchEmployee;
	private LinearLayout linearLayoutEmp;
	private LinearLayout linearLayoutError;

	/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

evEmployeeId = (EditText)findViewById(R.id.evEmployeeCode);

tvEmployeeCode = (TextView)findViewById(R.id.tvEmployeeCode);
tvName = (TextView)findViewById(R.id.tvEmployeeName);
tvAddress = (TextView)findViewById(R.id.tvAddress);
tvBloodGroup = (TextView)findViewById(R.id.tvBloodGroup);

linearLayoutEmp = (LinearLayout)findViewById(R.id.lLayoutEmployeeInfo);
linearLayoutError = (LinearLayout)findViewById(R.id.lLayoutError);

linearLayoutEmp.setVisibility(View.GONE);
linearLayoutError.setVisibility(View.GONE);
}

public void onSearchClick(View view)
{
try	{

	    	DefaultHttpClient client = new DefaultHttpClient();
	    	// http get request
	    	HttpGet request = new HttpGet(EMPLOYEE_SERVICE_URI + evEmployeeId.getText());

	    	// set the hedear to get the data in JSON formate
	    	request.setHeader("Accept", "application/json");
	        request.setHeader("Content-type", "application/json");

	        //get the response
	        HttpResponse response = client.execute(request);

	        HttpEntity entity = response.getEntity();

	        //if entity contect lenght 0, means no employee exist in the system with these code
	        if(entity.getContentLength() != 0) {
	        	// stream reader object
	        	Reader employeeReader = new InputStreamReader(response.getEntity().getContent());
		        //create a buffer to fill if from reader
	        	char[] buffer = new char[(int) response.getEntity().getContentLength()];
		        //fill the buffer by the help of reader
	        	employeeReader.read(buffer);
		        //close the reader streams
	        	employeeReader.close();

	        	//for the employee json object
		        JSONObject employee =  new JSONObject(new String(buffer));

		        //set the text of text view
		        tvEmployeeCode.setText("Code: " + employee.getString("EmployeeId"));
		        tvName.setText("Name: " + employee.getString("FirstName") + " " + employee.getString("LastName"));
		        tvAddress.setText("Address: " + employee.getString("Address"));
		        tvBloodGroup.setText("Blood Group: " + employee.getString("BloodGroup"));

		        //show hide layout
		        linearLayoutError.setVisibility(View.GONE);
		        linearLayoutEmp.setVisibility(View.VISIBLE);
	        }
	        else {
	        	 linearLayoutEmp.setVisibility(View.GONE);
	        	 linearLayoutError.setVisibility(View.VISIBLE);
	        }

}
catch (Exception e) {
//any exception show the error layout
linearLayoutEmp.setVisibility(View.GONE);
linearLayoutError.setVisibility(View.VISIBLE);
e.printStackTrace();
}

}
}

Now I am going to place control at layout.xml file for UI of the android, Search button is bound with onSearchClick event in EmployeeInfoActivity. One EditText, four TextView objects to display the employee information and if the employee information does not exist or garbage input, then it will display an error message.

After that, we have to put the internet permission in AndroidManifest.xml


<uses-permission android:name="android.permission.INTERNET" />

Now here are the final results:

Now if there is an error, error message(s) will  be displayed:

In this post, I just demonstrated how we can facilitate communication between Android and WCF services, using which we can easily perform all the CURD Operations. I hope you will enjoy the post and give your valuable feedback on it

Happy Coding 🙂

Categories: Android, WCF

jqGrid with ASP.NET MVC and MS SQL/Oracle Store Procedure

January 16, 2012 12 comments

As we know that, when we need to represent the data in tabular form, we have better option to use a grid, The Grid is the name of a control which not only represents data in a tabular form but also provides features like paging, sorting and some cool features to show the data on web page in an interactive and easy to read manner. We have various ways to show the data in tabular form and one of the simplest way is to use table tab of HTML language.

In this post I am going to discuss about jqGrid, which is one of finest plug-in of jQuery (assuming that you have basic idea about JQuery)which is made by Tony Tomov. The main beauty of the grid is that it works on client side and communicating with Server side by the help of AJAX hits. It’s quite fast responsive and easy to use; we can incorporate it with any server side languages like ASP.NET, PHP etc.  At the starting level, I am using it with basic features. I will be using ASP.NETMVC with simpleADO.NET for database interaction (we may also use any ORM like Entity Framework, nHibernate etc.), and the jqGrid binds with the data. So let’s move on to work on it.

At the very first step, I am going to create a database named “studentDB” which has a single table Student(we are using here MS SQL EXPRESS for this demo but Oracle can also be used). Student Table Contain following fields.

Student table contains four fields and StudentID is a primary Key. Sample recordsare showing below

For MS SQL

Now let’s move to write some TSQL .I’ll start with some very basic stored procedures:

CREATE PROCEDURE SELECT_STUDENT
	@SortColumnName VARCHAR(100),
	@SortOrderBy VARCHAR(4),
	@NumberOfRows INT,
	@StartRow INT
AS
BEGIN
	SET NOCOUNT ON;
SELECT *
FROM   (SELECT Row_Number() Over(ORDER BY CASE
                              WHEN @SortColumnName = 'StudentID'
                              AND @SortOrderBy = 'asc'
                              THEN StudentID
                              END ASC, CASE
                              WHEN @SortColumnName = 'StudentID'
                              AND @SortOrderBy = 'desc'
                              THEN StudentID
                              END DESC, CASE
                              WHEN @SortColumnName = 'FirstName'
                              AND @SortOrderBy = 'asc'
                              THEN FirstName
                              END ASC, CASE
                              WHEN @SortColumnName = 'FirstName'
                              AND @SortOrderBy = 'desc'
                              THEN FirstName
                              END DESC, CASE
                              WHEN @SortColumnName = 'LastName'
                              AND @SortOrderBy = 'asc'
                              THEN LastName
                              END ASC, CASE
                              WHEN @SortColumnName = 'LastName'
                              AND @SortOrderBy = 'desc'
                              THEN LastName
                              END DESC , CASE
                              WHEN @SortColumnName = 'Email'
                              AND @SortOrderBy = 'asc'
                              THEN Email
                              END ASC, CASE
                              WHEN @SortColumnName = 'Email'
                              AND @SortOrderBy = 'desc'
                              THEN Email
                              END DESC) as Sno,
               COUNT(*) Over() TOTALROWS,
               StudentID,
               FirstName,
               LastName,
               Email
        FROM   STUDENT) as RECORDS
		WHERE  RECORDS.Sno BETWEEN (@StartRow - @NumberOfRows) AND (@StartRow -1);
END

For Oracle

Oracle Package and the PLSQL are quite similar as above:

CREATE OR REPLACE PACKAGE BODY Student_Pkg IS
       PROCEDURE SELECT_STUDENT(p_SortColumnName VARCHAR2,
                                p_SortOrderBy VARCHAR2,
                                p_NumberOfRows INT,
                                p_StartRow INT,
                                p_Studnet_Ref OUT Studnet_Ref) IS
    BEGIN
    OPEN p_Studnet_Ref FOR
      SELECT *
      FROM   (SELECT Row_Number() Over(ORDER BY CASE
                                  WHEN p_SortColumnName ='StudentID'
                                  AND p_SortOrderBy ='asc'
                                  THEN STUDENTID
                                  END ASC,CASE
                                  WHEN p_SortColumnName ='StudentID'
                                  AND p_SortOrderBy ='desc'
                                  THEN STUDENTID
                                  END DESC,CASE
                                  WHEN p_SortColumnName ='FirstName'
                                  AND p_SortOrderBy ='asc'
                                  THEN FIRSTNAME
                                  END ASC,CASE
                                  WHEN p_SortColumnName ='FirstName'
                                  AND p_SortOrderBy ='desc'
                                  THEN FIRSTNAME
                                  END DESC,CASE
                                  WHEN p_SortColumnName ='LastName'
                                  AND p_SortOrderBy ='asc'
                                  THEN LASTNAME
                                  END ASC,CASE
                                  WHEN p_SortColumnName ='LastName'
                                  AND p_SortOrderBy ='desc'
                                  THEN LASTNAME
                                  END DESC,CASE
                                  WHEN p_SortColumnName ='Email'
                                  AND p_SortOrderBy ='asc'
                                  THEN EMAIL
                                  END ASC,CASE
                                  WHEN p_SortColumnName ='Email'
                                  AND p_SortOrderBy ='desc'
                                  THEN EMAIL
                                  END DESC)as Sno,
               COUNT(*) Over() as TOTALROWS,
               STUDENTID,
               FIRSTNAME,
               LASTNAME,
               EMAIL
        FROM   STUDENT) RECORDS
        WHERE  RECORDS.Sno BETWEEN(p_StartRow - p_NumberOfRows)AND(p_StartRow -1);
	END;
END;

As we can see above the Store Procedure contains the sub query, outer query is responsible to manage the grid paging and inner query responsible to manage the sorting and total records of the table. The Store Procedure contains four parameters:

@SortColumnName/p_SortColumnName:- The data will be sorted by Column Name
@SortOrderBy/p_SortOrderBy:- It can be ‘desc’ for decneding and ‘asc’ for ascending order
@NumberOfRows/p_NumberOfRows:- Total Number of rows that will be showing at the jqGrid
@StartRow/p_StartRow:- Row number where the data will be started for new page of grid

The DB side work is done; now let’s move to work on coding side, I am going to create new project for ASP.NET MVC2 named “jqGridDemo”

For the Demo purpose I am not going with MVC Test project, so just use simple application project

Now to write the domain, it won’t be complex StudentModel

In StudentModel we have two Classes; one is Student and second is StudentDAL, the complete code of the StudentModel.cs file is being mentioned below:

namespace JQGridDemo.Models
{
    ///
<summary> /// Studnet Entity
 /// </summary>
    public class Student
    {
        public int StudentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public int TotalRows { get; set; }
        public int Sno { get; set; }
    }

    ///
<summary> /// Student Data Access Layer
 /// </summary>
    public class StudentDAL
    {
        ///
<summary> /// Fetch student collection as per grid criteria
 /// </summary>
        ///sorted colum name
        ///sorting order
        ///page index of grid
        ///total number of rows of grid
        /// Collection of Students
        public static List SelectStudnets(string sidx, string sord, int page, int rows)
        {
            const string spName = "SELECT_STUDENT";
            List studentCollection;

            string connectionString = ConfigurationManager.ConnectionStrings["StudentDatabase"].ConnectionString;
            if (string.IsNullOrEmpty(connectionString))
                return null;
            using (SqlConnection sqlConnection = new SqlConnection(connectionString))
            {
                SqlCommand sqlCommand = new SqlCommand(spName, sqlConnection);
                sqlCommand.CommandType = CommandType.StoredProcedure;
                SqlParameter[] sqlParameterCollection = SetParameter(sidx, sord, page, rows);
                sqlCommand.Parameters.AddRange(sqlParameterCollection);
                sqlConnection.Open();
                studentCollection = FillStudentEntity(sqlCommand);
            }
            return studentCollection;
        }

        ///
<summary> /// Fill SQL paramter for Stored Procedure
 /// </summary>
        ///sorted colum name
        ///sorting order
        ///page index of grid
        ///total number of rows of grid
        /// Collection of SQL paramters object
        private static SqlParameter[] SetParameter(string sidx, string sord, int page, int rows)
        {
            SqlParameter sortColNameParam = new SqlParameter("@SortColumnName", SqlDbType.VarChar, 100);
            sortColNameParam.Value = sidx;

            SqlParameter sortOrderParam = new SqlParameter("@SortOrderBy", SqlDbType.VarChar, 4);
            sortOrderParam.Value = sord;

            SqlParameter numberOfRowsParam = new SqlParameter("@NumberOfRows", SqlDbType.Int);
            numberOfRowsParam.Value = rows;

            SqlParameter startRowParam = new SqlParameter("@StartRow", SqlDbType.Int);
            startRowParam.Value = page;

            return new SqlParameter[]
            {
                sortColNameParam,sortOrderParam,numberOfRowsParam,startRowParam
            };
        }

        ///
<summary> /// Fill the Studnet Entity by using sql reader of command
 /// </summary>
        ///sql command object for excute reader
        /// colletion of students
        private static List FillStudentEntity(SqlCommand sqlCommand)
        {
            List students = new List();
            using (SqlDataReader sqlDataReader = sqlCommand.ExecuteReader())
            {
                while (sqlDataReader.Read())
                {
                    students.Add(new Student
                    {
                        StudentId = Convert.ToInt32(sqlDataReader["StudentID"]),
                        FirstName = sqlDataReader["FirstName"].ToString(),
                        LastName = sqlDataReader["LastName"].ToString(),
                        Email = sqlDataReader["Email"].ToString(),
                        Sno = Convert.ToInt32(sqlDataReader["Sno"]),
                        TotalRows = Convert.ToInt32(sqlDataReader["TotalRows"])
                    });
                }
            }
            return students;
        }
    }

As I have mentioned above that we are using MS SQL Express, so the code is according to MS SQL, for Oracle user can replace SQL objects with oracle objects and rest of the logic is similar as above. There are three methodsin Student DAL Class, which are responsible to fetch student records from the Database, comments have been mentioned at methods and classes, so we can easily identify that what the methods or classes are performing. The connection string of the database is available in Web.Config file with the key name ‘StudentDatabase’. Now the Model is completed, it’s time to move towards Controller.

For the Controller I am using existence available controller, HomeController , I am going to add GetStudents method in HomeController

public JsonResult GetStudents(string sidx, string sord, int page, int rows)
        {
            int pageIndex = page;
            int pageSize = rows;
            int startRow = (pageIndex * pageSize) + 1;
            List students = StudentDAL.SelectStudnets(sidx, sord, startRow, rows);
            int totalRecords = students.Select(x => x.TotalRows).FirstOrDefault();
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = (
                    from student in students
                    select new
                    {
                        i = student.StudentId,
                        cell = new string[] { student.StudentId.ToString(), student.FirstName, student.LastName, student.Email }
                    }).ToArray()
            };
            return Json(jsonData);
        }

As we can see above the GetStudents method returns the JsonResult object and performing all the necessary logic which is required for make the functionality of the paging and sorting. The important object of the method is JsonData , which is responsible to provide the desired data of the grid and it should be required all fields for grid input, otherwise the gird will not be showing data on web page.

Here we need to work on View, where the GetStudent method would be calling by AJAX; we have to add some files in our project. You may take the jqGrid scripts from following URL

http://www.trirand.com/blog/?page_id=6

Here you may take idea about that how the jqGrid can be installed.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install#development_installation

I have to included jqGrid scripts and its CSS/images files in project solution

Now here I need to replace Index.aspx markup with existence markup

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
<%--CSS Files--%>
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<%--jQuery Library--%>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<%--Must load language tag BEFORE script tag--%>
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<%--jqGrid Code - refer http://www.trirand.com/blog/jqgrid/jqgrid.html --%>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/GetStudents/',
datatype: 'json',
mtype: 'POST',
colNames: ['StudentID', 'FirstName', 'LastName', 'Email'],
colModel: [
{ name: 'StudentID', index: 'StudentID', width: 150, align: 'left' },
{ name: 'FirstName', index: 'FirstName', width: 150, align: 'left', sortable: true },
{ name: 'LastName', index: 'LastName', width: 150, align: 'left', sortable: true },
{ name: 'Email', index: 'Email', width: 200, align: 'left', sortable: true}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'StudentID',
sortorder: "asc",
viewrecords: true,
caption: 'JQgrid'
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%-- HTML Required--%>
<h2>Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</asp:Content>

First I have added reference of the CSS and all the JavaScript files like jQuery and jqGrid at the top of the page. For implementing jqGrid we table’s markup on the aspx page, as you can see above I have used table with ID name list, and for the paging of the grid, we have a div markup with the ID name pager. After that I would like to give a basic idea about some properties of the jqGrid, after DOM initialization of jQuery, we have to create a jQuery object of the table and add initialize the jqGrid object, there are some properties of the jqGrid which are being mentioned below,

  • url :- url which should be called by AJAX
  • datatype :- here we are using json type it can be xml.
  • mtype :- method type it can be post or get
  • colNames :- name of the columns which would be displaced at jqgrid header
  • colModel :- define the model of the columns
  • pager :- object of jquery object of the html element where the page will be render
  • rowNum:- default number of rows will be displayed at grid
  • rowList:- number of rows list will be showing on row list of the grid
  • sortname:- by default sorting of the column name
  • sortorder :- sorting order , it can be des or asc
  • viewrecords :- total number of rows at bottom of the grid will be display or not
  • caption:-caption of the grid

You can take further knowledge of above or more properties of the jqGrid by following URL

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Finally the grid is ready to show the data on page

The grid is AJAX based, so all the communication with server is done by using JSON objects to transfer or receive  the data, for clarification we may take idea by the help of  IE9 Networking tab.

I explained basic features of the jqGrid , in my future article I will be exploring  more features of the grid. Complete solution of the Project has been attached in the article. I hope you enjoyed it and give me your valuable feedback to encourage me to write more.

Happy Coding  🙂


sample code

Categories: Asp.Net, ASP.NET MVC, C#, jqGrid, Jquery

Session Summary: Connecting Your Apps with Database at NED

October 6, 2011 4 comments

Today 10 October 2011, I was Invited at NED University for conducting a session of Connecting Your Apps with Database, organized by DevNext user group. The session for around lasted for around an hour where the core objective was to enable students connecting web applications with databases.

The agenda of the session was how to connect varies Databases like Microsoft SQL Server, MySQL and Oracle with different server side platform like ASP.NET and PHP. There were a great number of technical audiences in front of me and really interested to learn something about the topic. I would like thank to all students for attending the session and for making it interactive.

I would like also thank to DevNext user group team especially Adil Ahmed Mugal and volunteers at NED for providing me an opportunity to have interact with students of one of the finest University of Engineering .

Here, I am going to share  sample codes with Database scripts and software links where you can find trial software.

sample code

Categories: Events

ASP.NET MVC 4 Developer Preview Release

September 14, 2011 Leave a comment

Microsoft has announced ASP.NET MVC4 Developer Preview Release. The number of new features have been included, you can take the updated information from http://www.asp.net/mvc/mvc4

For running the ASP.NET MVC4 in your machine you have Visual Studio 2010 or above of it, as below you can find the links where the ASP.NET MVC4 can be download

As per the release note here is some new features have been included.

  • Provide new Default Project Templates for MVC4 .At this time MVC 4 template comes with new look and feel which gives ease to learn lot of new things. The Login and Register screens using Jquery Dialog Plugin which shows really cool look in your website.
  • Second Project template for mobile or tablet applications. Jquery Mobile script has been incorporated with it and you can take full advantage of it while doing development.
  • Another great addition of Concept of Display Modes which offers the idea about that, the request comes from desktop machine or mobile and then it will show the view of website as per the device nature.
  • The new Recipe feature gives great power and ease to Developer for writing code generation plugin using NUGET
  • If you are using C#5 (or using the Async CTP).so you can able to write asynchronous action methods as single methods which return back you Task or Task<ActionResult> object.

There are also some known pending issues where you can take list of them from here

At the last I must say that, as per the ASP.NET MVC 4 Roadmap documentation, it’s just an initial preview and I hope so some of  great new features will be incorporated in near future.

Categories: Asp.Net, ASP.NET MVC
%d bloggers like this: