Mohammed Osman » ASP.NET

Crystal Reports and Silverlight

admin — Fri, 05 Aug 2011 16:39:28 +0000

http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/20795

Feed enhanced by Better Feed from Ozh

jqGrid 3.5 is finally released

admin — Tue, 04 Aug 2009 14:27:31 +0000

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

© admin for Mohammed Osman, 2009. | Permalink | No comment | Add to del.icio.us
Post tags: Ajax-enabled, Javascript, jqGrid

Feed enhanced by Better Feed from Ozh

ASP.NET MVC ExtJS using LINQ

admin — Tue, 31 Mar 2009 23:26:41 +0000

Someone recently requested me to send me the sample asp.net application using MVC ExtJS and LINQ.

Here is the application with our infamous northwind database and Categories table.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
 
using Northwind;
 
namespace Controllers
{
    public class CategoryController : Controller
    {
    	public ActionResult Index()
		{
			ViewData[&quot;Title&quot;] = &quot;Category Page&quot;;
            ViewData[&quot;Message&quot;] = &quot;Welcome to Category Page!&quot;;
 
            return View();
		}
		public void LoadCategory()
        {
            int id = int.Parse(Request.Form[&quot;id&quot;]);
            string message = string.Empty;
            NorthwindDataContext db = new NorthwindDataContext();
            var query = from c in db.Categorys
                        where c.CategoryID == id
                        select new
                        {
                        	c.CategoryID,
							c.CategoryName,
							c.Description,
							c.Picture
 
                        };
 
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            message = &quot;{\&quot;results\&quot;:&quot; + serializer.Serialize(query.ToList()) + &quot;}&quot;;
 
            Response.Write(message);
        }
        public void ListCategory(int limit, int start, string dir, string sort)
        {
            string message = string.Empty;
            NorthwindDataContext db = new NorthwindDataContext();
            var query = from c in db.Categorys
                        select new
                        {
                        	c.CategoryID,
							c.CategoryName,
							c.Description,
							c.Picture
 
                        };
            int totalRecords = query.ToList().Count;
            JavaScriptSerializer serializer = new JavaScriptSerializer();
 
            var list = query.Skip(start).Take(limit);
            message = &quot;{\&quot;total\&quot;: \&quot;&quot; + totalRecords + &quot;\&quot;, \&quot;results\&quot;:&quot; + serializer.Serialize(list.ToList()) + &quot;}&quot;;
 
            Response.Write(message);
        }
        public void New()
        {
            Category _Category = new Category();
 
			string _CategoryID = Request.Form[&quot;CategoryID&quot;];
			if(_CategoryID != null &amp;&amp; _CategoryID != string.Empty)
			{
				_Category.CategoryID = int.Parse(_CategoryID);
			}
 
			string _CategoryName = Request.Form[&quot;CategoryName&quot;];
			if(_CategoryName != null &amp;&amp; _CategoryName != string.Empty)
			{
				_Category.CategoryName = _CategoryName;
			}
 
			string _Description = Request.Form[&quot;Description&quot;];
			if(_Description != null &amp;&amp; _Description != string.Empty)
			{
				_Category.Description = _Description;
			}
 
			string _Picture = Request.Form[&quot;Picture&quot;];
			if(_Picture != null &amp;&amp; _Picture != string.Empty)
			{
				_Category.Picture = null;
			}
			NorthwindDataContext db = new NorthwindDataContext();
            try
            {
                db.Categorys.InsertOnSubmit(_Category);
                db.SubmitChanges();
            }
            catch (Exception ex)
            {
                string error = ex.Message;
                //log the error here
            }
 
        }
        public void Edit()
        {
        	int id = int.Parse(Request.Form[&quot;id&quot;]);
	        NorthwindDataContext db = new NorthwindDataContext();
            Category obj = db.Categorys.Single<category>category>(c =&gt; c.CategoryID == id);
 
			string _CategoryName = Request.Form[&quot;CategoryName&quot;];
			if(_CategoryName != null &amp;&amp; _CategoryName != string.Empty)
			{
				obj.CategoryName = _CategoryName;
			}
 
			string _Description = Request.Form[&quot;Description&quot;];
			if(_Description != null &amp;&amp; _Description != string.Empty)
			{
				obj.Description = _Description;
			}
 
			string _Picture = Request.Form[&quot;Picture&quot;];
			if(_Picture != null &amp;&amp; _Picture != string.Empty)
			{
				obj.Picture = null;
			}
 
	  		try
            {
                db.SubmitChanges();
            }
            catch (Exception ex)
            {
                string error = ex.Message;
                //log the error here
            }
		}
        public void Delete()
        {
        	NorthwindDataContext db = new NorthwindDataContext();
            string data = Request.Form[&quot;data&quot;];
 
            foreach (object o in data.Split(','))
            {
            	int id = int.Parse(o.ToString());
	            Category obj = db.Categorys.Single<category>category>(c =&gt; c.CategoryID == id);
                db.Categorys.DeleteOnSubmit(obj);
            }
            db.SubmitChanges();
        }
 
	}
}

namespace Northwind
{
	using System.Data.Linq;
	using System.Data.Linq.Mapping;
	using System.Data;
	using System.Collections.Generic;
	using System.Reflection;
	using System.Linq;
	using System.Linq.Expressions;
	using System.ComponentModel;
	using System;
 
	[System.Data.Linq.Mapping.DatabaseAttribute(Name=&quot;Northwind&quot;)]
	public partial class NorthwindDataContext : System.Data.Linq.DataContext
	{
		private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMappingSource();
 
		#region Extensibility Method Definitions
	    partial void OnCreated();
 
	    partial void InsertCategory(Category instance);
	    partial void UpdateCategory(Category instance);
	    partial void DeleteCategory(Category instance);
	        #endregion
 
	    public NorthwindDataContext() :
				base(global::System.Configuration.ConfigurationManager.ConnectionStrings[&quot;NorthwindConnectionString&quot;].ConnectionString, mappingSource)
		{
			OnCreated();
		}
 
		public NorthwindDataContext(string connection) :
				base(connection, mappingSource)
		{
			OnCreated();
		}
 
		public NorthwindDataContext(System.Data.IDbConnection connection) :
				base(connection, mappingSource)
		{
			OnCreated();
		}
 
		public NorthwindDataContext(string connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
				base(connection, mappingSource)
		{
			OnCreated();
		}
 
		public NorthwindDataContext(System.Data.IDbConnection connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
				base(connection, mappingSource)
		{
			OnCreated();
		}
 
		public System.Data.Linq.Table<category>category> Categorys
		{
			get
			{
				return this.GetTable<category>category>();
			}
		}
 
	}
}

<asp:content contentplaceholderid="MainContent" runat="server" id="indexContent"> <h2>--Html.Encode(ViewData["Message"])-->h2>  <script type="text/javascript">
 
   Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
   Ext.namespace('myNameSpace');
 
   myNameSpace.myModule = function(){
 
   	var ds;
	var grid;
	var colModel;
	var myRecordObj;
	var myReader;
	var primaryKey='CategoryID';
 
	var setupDataSource = function(){
		myRecordObj = Ext.data.Record.create([
			{name: 'CategoryID', type: 'int'},
			{name: 'CategoryName', type: 'string'},
			{name: 'Description', type: 'string'},
			{name: 'Picture', type: 'string'}
 
		]);
 
		myReader = new Ext.data.JsonReader(
		{
		  	root: 'results',
		  	totalProperty: 'total',
		  	id: primaryKey
		},
		  	myRecordObj
		);
 
		ds = new Ext.data.GroupingStore({
			proxy: new Ext.data.HttpProxy({
		    url: '/Category/ListCategory',
		    method: 'POST'
		    }),
		    reader: myReader,
		    remoteSort: true
		});
 
	};//end setupDataSource
 
	var getColumnModel = function() {
		if(!colModel) {
 
	        colModel = new Ext.grid.ColumnModel([
 
		   	{
		      header: 'CategoryID',
		      dataIndex: 'CategoryID',
		      sortable: true,
		      width: 50
		    },
		   	{
		      header: 'CategoryName',
		      dataIndex: 'CategoryName',
		      sortable: true,
		      width: 50
		    },
		   	{
		      header: 'Description',
		      dataIndex: 'Description',
		      sortable: true,
		      width: 50
		    },
		   	{
		      header: 'Picture',
		      dataIndex: 'Picture',
		      sortable: true,
		      width: 50
		    }
	        ]);//end colModel
		}//end if colModel
		return colModel;
	}//end getColumnModel
 
	var buildGrid = function(){
 
      	function addRecord() {
 
	      	var c_CategoryID = new Ext.form.NumberField
			({
				fieldLabel: 'CategoryID',
				name: 'CategoryID',
				width: '180',
				allowDecimals: true,
				allowNegative: false,
				blankText: '0',
				maxLength: 19
			});
			var c_CategoryName = new Ext.form.TextField
			({
				fieldLabel: 'CategoryName',
				name: 'CategoryName',
				width: '180',
				maskRe: /([a-zA-Z0-9\s]+)$/
			});
			var c_Description = new Ext.form.TextArea
			({
				fieldLabel: 'Description',
				name: 'Description',
				width: '180',
				hideLabel: false
			});
			var c_Picture = new Ext.form.TextField
			({
				fieldLabel: 'Picture',
				name: 'Picture',
				width: '180',
				maskRe: /([a-zA-Z0-9\s]+)$/
			});
 
			var	newForm = new Ext.FormPanel({
 
			  bodyStyle: 'padding: 8px',
			  url:'/Category/New',
			  items: [
 
			  	c_CategoryID,
			  	c_CategoryName,
			  	c_Description,
			  	c_Picture
			  ]
		    });
 
		    var	newWin = new Ext.Window({
  				title: 'Add a new Category',
				width: 390,
				height:500,
				minWidth: 300,
				minHeight: 250,
				layout: 'fit',
				plain:true,
				bodyStyle:'padding:5px;',
				buttonAlign:'center',
			  	items: newForm,
			  	buttons: [{
					text: 'Save',
					handler: function() {
				  		if (newForm.form.isValid()) {
				  			newForm.form.submit({
				  				waitMsg:'In processing',
				  				failure: function(form, action) {
				  					Ext.MessageBox.alert('Error Message', action.result.errorInfo);
				  				},
				  				success: function(form, action) {
				  					Ext.MessageBox.alert('Success:', action.response.responseText);
				  					refreshGrid();
				  					newWin.hide();
				  				}
				  			});
				  		}
				  		else {
				  			Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
				  		}
				  	}
				    },{
				  	text: 'Clear',
				    handler: function(){
				     newForm.getForm().reset();
				    }
				}]
			 });
 
  			newWin.on('minimize', function(){
  				newWin.toggleCollapse();
  			});
  			newWin.show();
      	};// end addRecord
 
		function deleteRecord(btn) {
			if(btn=='yes') {
		  		var selectedKeys = grid.selModel.selections.keys;
 
		  		Ext.Ajax.request({
		  			waitMsg: 'Saving changes...',
		  			url: '/Category/Delete',
		  			params: {
						data: selectedKeys
		  			},
		  			callback: function (options, success, response) {
		  				if (success) {
		  					Ext.MessageBox.alert('OK',response.responseText);
		  					var json = Ext.util.JSON.decode(response.responseText);
		  					Ext.MessageBox.alert('OK',json.del_count + ' record(s) deleted.');
		  				} else{
		  					Ext.MessageBox.alert('Sorry, please try again. [Q304]',response.responseText);
		  				}
		  			},
		  			failure:function(response,options){
		  				Ext.MessageBox.alert('Warning','Oops...');
		  			},
		  			success:function(response,options){
		  				refreshGrid();
		  			}
		  		});
			}
		};
 
		function handleDelete() {
 
            var selectedKeys = grid.selModel.selections.keys;
            if(selectedKeys.length > 0)
            {
                Ext.MessageBox.confirm('Message','Do you really want to delete selection?', deleteRecord);
            }
            else
            {
                Ext.MessageBox.alert('Message','Please select at least one item to delete');
            }
        }; // end handleDelete 
 
		function toggleDetails(btn, pressed){
 
	        var view = grid.getView();
	        view.showPreview = pressed;
	        view.refresh();
 
	    }
 
	    function refreshGrid() {
            ds.reload(); //
        };
 
		grid = new Ext.grid.GridPanel({
        	clicksToEdit:2,
        	colModel: getColumnModel(),
        	height:350,
        	//iconCls: 'icon-grid',
        	id: 'myGridID',
        	loadMask: true,
        	selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
        	store: ds,
        	stripeRows: true,
        	title:'Category List',
        	width:600,
        	bbar: new Ext.PagingToolbar({
 
                pageSize: myNameSpace.myModule.perPage,
                store: ds,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No data to display",
                items:[
                    '-', {
                    pressed: true,
                    enableToggle:true,
                    text: 'Show Preview',
                    cls: 'x-btn-text-icon details',
                    toggleHandler: toggleDetails
                }]
            }),
            tbar: [
                {
                    text: 'Add',
                    tooltip: 'Click to Add a row',
 
					//iconCls:'add',
                    handler: addRecord
                }, '-', //add a separator
                {
                    text: 'Delete',
                    tooltip: 'Click to Delete selected row(s)',
 
                    //function to call when user clicks on button
                    //iconCls:'remove',
                    handler: handleDelete
 
                }, '-',
                {
                    text: 'Refresh',
                    tooltip: 'Click to Refresh the table',
                    //iconCls:'refresh',
                    handler: refreshGrid
 
                }
            ],
            view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            })
        });//end grid
 
  		grid.on('rowdblclick', function(grid, rowIndex, e) {
        	var id = ds.data.items[rowIndex].id;
 
        	var u_CategoryID = new Ext.form.NumberField
			({
				fieldLabel: 'CategoryID',
				name: 'CategoryID',
				width: '180',
				allowDecimals: true,
				allowNegative: false,
				blankText: '0',
				maxLength: 19
			});
			var u_CategoryName = new Ext.form.TextField
			({
				fieldLabel: 'CategoryName',
				name: 'CategoryName',
				width: '180',
				maskRe: /([a-zA-Z0-9\s]+)$/
			});
			var u_Description = new Ext.form.TextArea
			({
				fieldLabel: 'Description',
				name: 'Description',
				width: '180',
				hideLabel: false
			});
			var u_Picture = new Ext.form.TextField
			({
				fieldLabel: 'Picture',
				name: 'Picture',
				width: '180',
				maskRe: /([a-zA-Z0-9\s]+)$/
			});
 
			var	updateForm = new Ext.FormPanel({
 
				  bodyStyle: 'padding: 8px',
  				  url:'/Category/Edit',
  				  reader: new Ext.data.JsonReader(
				  { root: 'results'},
				  [
				  	{name: 'CategoryID', type: 'int'},
					{name: 'CategoryName', type: 'string'},
					{name: 'Description', type: 'string'},
					{name: 'Picture', type: 'string'}
 
				  ]),
				  items: [
 
				  	u_CategoryID,
				  	u_CategoryName,
				  	u_Description,
				  	u_Picture
				  ]
			  });
 
			  updateForm.form.load({
		  		url:'/Category/LoadCategory',
		  		params: { id: id },
		  		waitMsg:'Loading'
			  });
 
			  var window = new Ext.Window({
				  title: 'Edit Existing Category',
				  width: 390,
				  height:500,
				  minWidth: 300,
				  minHeight: 250,
				  layout: 'fit',
				  plain:true,
				  bodyStyle:'padding:5px;',
				  buttonAlign:'center',
				  items: updateForm,
				  buttons: [{
					text: 'Save',
					 handler: function() {
					  if (updateForm.form.isValid()) {
					  	updateForm.form.submit({
					  		params:{id : id},
					  		waitMsg:'In processing',
					  		failure: function(form, action) {
					  			Ext.MessageBox.alert('Error Message', action.result.errorInfo);
					  		},
					  		success: function(form, action) {
					  			Ext.MessageBox.alert('Confirm', action.response.responseText);
					  			window.hide();
					  			ds.load({params:{start:0, limit:10}});
					  		}
					  	});
					  }
					  else{
					  	Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
					  }
				    }
					},
					{
					text: 'Cancel',
					  handler: function(){window.hide();}
				}]
			});
			window.show();
		});
	}//end function buildGrid
 
	var renderGrid = function() {
	    grid.render('CustomersList');
	}; //end function renderGrid
 
	var loadStore = function() {
	  ds.load({
	  params: {
	  start: 0,
	  limit: myNameSpace.myModule.perPage
	  }
	  });
	  grid.getSelectionModel().selectFirstRow();
	};
 
   	return {
		perPage: 10,
		init : function(){
			this.getMyGrid();
 
		}, //end of init method
		getMyGrid: function() {
 
			Ext.QuickTips.init();
			setupDataSource();
			buildGrid();
			renderGrid();
			loadStore();
		},
		getDataSource: function() {
	        return ds;
	    }
	}//end of return
   }();
 
   Ext.onReady(myNameSpace.myModule.init, myNameSpace.myModule, true);
script> asp:content>

Northwind.Category.model.cs

Northwind.Category.Controller.cs

Northwind.Category.view.aspx

Feed enhanced by Better Feed from Ozh

AutoComplete using jQuery, ASP.NET & C#

admin — Fri, 23 Jan 2009 17:38:05 +0000

I took Jörn Zaffaerer jquery plugin PHP demo and changed to ASP.NET C#.

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Current version: 1.0.2
Compressed filesize: 7596 bytes
License: MIT/GPL
Tested in: Firefox 2, IE 6 & 7, Opera 9, Safari 3

Files:

Download
Changelog
Demos
Documentation (Plugin Options)

Required

jQuery 1.2.6

ASPX Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteJquery.aspx.cs" Inherits="jQueryAndAspNetDemo.AutoCompleteJquery" %>
 

 


    Auto complete Demo
  
 
  
  
  


    
    
     (autocomplete box)

HttpHandler:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.IO;
using System.Text.RegularExpressions;
namespace jQueryAndAspNetDemo
{
    ///     /// Summary description for $codebehindclassname$    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class AutoComplete : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            string strJSON = string.Empty;
            StreamReader reader = null;
            List<String> itemList = new List<String>();
            if (context.Request.QueryString["q"] != null)
            {
                string q = context.Request.QueryString["q"];
                string limit = context.Request.QueryString["limit"];
                //For example purpose , i'm reading from Text file.
                try
                {
                    string strFilePath = "~/TestJSON.txt";
                    reader = new StreamReader(context.Server.MapPath(strFilePath));
                    string strMatchText = null;
                    while ((strMatchText = reader.ReadLine()) != null)
                    {
                        if (Regex.IsMatch(strMatchText, q, RegexOptions.IgnoreCase))
                        {
                            itemList.Add(strMatchText);
                        }
                    }
                    strJSON = String.Join(System.Environment.NewLine, itemList.Take(int.Parse(limit)).ToArray());
                }
                catch { }
                finally
                {
                    if (reader != null)
                    {
                        reader.Close();
                    }
                }
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write(strJSON);
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

© admin for Mohammed Osman, 2009. | Permalink | 7 comments | Add to del.icio.us
Post tags: ASP.NET & C#, AutoComplete using jQuery

Feed enhanced by Better Feed from Ozh

Using ExtJS Grid with ASP.NET Ajax WCF WebServices & C#

admin — Fri, 16 Jan 2009 21:28:43 +0000

I have been using ExtJS Javascript framework from long time and it is Intuitive, very very extensive, great DOM manipulation, solid effects. The fastest to get things done when puzzling out on the commandline. As in one of my earlier post I talked about Coolite. Coolite Toolkit is an Ext official suite of ASP.NET Web Controls built on the Ext JavaScript Framework. I would really recommend to use the above instead of using ExtJS seperately with ASP.NET Framework. But, if for any reason here is the sample. Step 1: Create aspx page Simple ASPX page which enables to search by last name or first name

<%@ Page Language="C#" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="true" CodeFile="UserSearch.aspx.cs" Inherits="Webforms_UserSearch" Title="Search User" %><%@ Register    Assembly="AjaxControlToolkit"    Namespace="AjaxControlToolkit"    TagPrefix="ajaxToolkit" %>


    
        
    
    
        
    

    
	
	
    
	
		
			
 
                    
                    
                        
                        
                    
                    
                        
                            Last Name
                        
                        
                        
                        
                            
                        
                        
                        
                        
                            First Name
                        
                        
                        
                        
                            
                        
                    

                        
                        
                    
                 
		
	
	
	
    
    
    
    
        
        
    
    
        
             
        
    
    
    
    
        
            
       
       
       
       
            
       
     
         
        
        
    
     
    
 
    
        User Search

Step 2 : Creating Web Service ( If you look at aspx page, i called it ExtJSWebService.asmx

using System.Text;
using System.Runtime.Serialization.Formatters.Binary;
using System.Security.Principal;
using System.Data.Common;
using System.IO;
using System.Configuration;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Collections;
using System.Data;
 
///  
/// Summary description for WebService 
/// 
[System.Web.Services.WebService(Namespace = "MR")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ExtJSWebService : System.Web.Services.WebService
{
    string strResponse = string.Empty;
 
    public ExtJSWebService()
    {
        //Uncomment the following line if using designed components        //InitializeComponent(); 
    }
 
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
    public JSONCollection<MembershipUserCollection> GetUserCollectionJSON(int start, int limit, string i_Params, string sort, string dir)
    {
 
        UserDataSource objDS = new UserDataSource();
        MembershipUserCollection objCollection = objDS.GetUserCollection(i_Params, start, limit, sort + " " + dir);
        JSONCollection<MembershipUserCollection> objJSON = new JSONCollection<MembershipUserCollection>();
        objJSON.List = objCollection;
        objJSON.TotalCount = objDS.GetUsersCount(i_Params);
 
        return objJSON;
    }
}
 
public class JSONCollection<T>
{
    private T m_value;
    private int intCount;
 
    public T List
    {
        get
        {
            return m_value;
        }
        set
        {
            m_value = value;
        }
    }
 
    public int TotalCount
    {
        get
        {
            return this.intCount;
        }
        set
        {
            this.intCount = value;
        }
    }
 
}
 
public class MembershipUserCollection : System.Collections.ObjectModel.Collection<MembershipUser>
{
 
}
 
[Serializable]
public class MembershipUser
{
    public MembershipUser();
 
    public string ErrorMessage { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Step 3: Javascript by name UserSearch.js (as reference in aspx)

var usWin;
function BindGrid(){
        Ext.lib.Ajax.defaultPostHeader = 'application/json';
         var gridDiv = $get('grid-user');
         gridDiv.innerHTML = '';
         var fieldMap = new Ext.data.Record.create(
                    [
                        {name : 'LastName'},
                        {name : 'FirstName'}
 
                    ]);
 
                    var usDataStore = new Ext.data.Store(
                    {
                        //Note that I have renamed the web service proxy class
                        proxy: new Ext.ux.AspWebServiceProxy(
                        {
                            webServiceProxy: ExtJSWebService,
                            webServiceProxyMethod: ExtJSWebService.GetUserCollectionJSON
                        }),
                        reader: new Ext.data.JsonReader({
                                    root: 'List',
                                    totalProperty: 'TotalCount',
                                    id: 'LastName'
                        },fieldMap),
 
                        remoteSort: true
                    });
 
                    usDataStore.setDefaultSort('LastName', 'desc');
            // 5. Now you can bind this ExtJS based “Store” to any ExtJS based “GridPanel” or Select list or can use the store as a temporary data place holder for further manipulation later on.
            var usColModel = new Ext.grid.ColumnModel([
 
                {header: "Last Name", width: 105, sortable: true, dataIndex: 'LastName'},
                {header: "First Name", width: 105, sortable: true, dataIndex: 'FirstName'},
            ]);
 
            var usGrid = new Ext.grid.GridPanel({
                el:'grid-user',
                ds: usDataStore,
                cm: usColModel,
                sm: new Ext.grid.RowSelectionModel({
                   singleSelect: true
               }),
                stripeRows: true,
                bbar: new Ext.PagingToolbar({
                    pageSize: 10,
                    store: usDataStore,
                    displayInfo: true,
                    displayMsg: 'Displaying Users {0} - {1} of {2}',
                    emptyMsg: "No topics to display"
                    }),
                viewConfig: {
                    emptyText: '<div style="color:Red;" align="center">No Users found...</div>'
                },
                autoHeight:true,
                plugins:[new Ext.ux.grid.Search({
                             mode:'local'
                            ,iconCls:false
                            ,dateFormat:'m/d/Y'
                        })]
            });
            usGrid.render();
 
           usGrid.on('rowclick', function (grid, rowIndex, e){
                var record = grid.getStore().getAt(rowIndex);  // Get the Record
                var userID = record.data['LastName'];
                window.location='ManageUser.aspx?Mode=Update&LastName='+LastName;
             });
 
            var paramXML = PrepareParamXML();
 
            usDataStore.on('beforeload', function() {
                        usDataStore.baseParams = {
                        i_Params: paramXML
                      };
             });
 
            usDataStore.load({params:{start:0, limit:10}});
            usDataStore.on('loadexception', function(a,conn,resp) {
                     if (resp.status == '304') {
                                //Ext.Msg.alert('Content has not changed');
                            } else if (resp.status == '401') {
                                //Ext.Msg.alert('Authentication required - You need to Login');
                            }
                });
 
        // create the window on the first click and reuse on subsequent clicks
        if(!usWin){
            usWin = new Ext.Window({
                el:'grid-win',
                layout:'fit',
                width:600,
                modal:true,
                autoHeight:true,
                closeAction:'hide',
                plain: true,
                items: [usGrid],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        usWin.hide();
                           var button = Ext.get('ctl00_ContentPlaceHolder1_btnSearch');
                           button.dom.focus();
                           var txt = Ext.get('ctl00_ContentPlaceHolder1_txtLastName');
                           txt.dom.focus();
                    }
                }]
            });
        }
        usWin.show();
        return false;
}
 
Ext.namespace('Ext.ux');
 
Ext.ux.AspWebServiceProxy = function(conn)
           {
              Ext.ux.AspWebServiceProxy.superclass.constructor.call(this);
              Ext.apply(this, conn);
           };
 
Ext.extend(Ext.ux.AspWebServiceProxy, Ext.data.DataProxy,
{
     load : function (params, reader, callback, scope, arg)
            {
               var userContext = {
                                    callback: callback,
                                    reader: reader,
                                    arg: arg,
                                    scope: scope
                                 };
 
               var proxyWrapper = this;
 
               //debugger;
               //Handles the response we get back from the web service call
               var webServiceCallback = function(response, context, methodName)
                                        {
                                            proxyWrapper.loadResponse(response, userContext, methodName);
                                        }
 
               var serviceParams = [];
 
               //Convert the params into an array of values so that they can be used in the call (note assumes that the properties on the object are in the correct order)
               for (var property in params)
               {
                  serviceParams.push(params[property]);
               }
 
               //Add the webservice callback handlers
               serviceParams.push(webServiceCallback);
               serviceParams.push(this.handleErrorResponse);
 
               //Make the actual ASP.Net web service call
               this.webServiceProxyMethod.apply(this.webServiceProxy, serviceParams);
            },
 
     handleErrorResponse : function(response, userContext, methodName)
                           {
                               window.location.reload();
//                               Ext.MessageBox.show({
//                                       title: 'Error',
//                                       msg: response.get_message(),
//                                       buttons: Ext.MessageBox.OK,
//                                       icon: Ext.MessageBox.ERROR
//                                   });
                              //alert("Error while calling method: " + methodName + "n" + response.get_message());
                           },
 
     loadResponse : function (response, userContext, methodName)
                    {
                        var result = userContext.reader.readRecords(response);
                        userContext.callback.call(userContext.scope, result, userContext.arg, true);
                    }
 
});

I’m assuming you have master page and it has reference to javascript

    <script type="text/javascript" src="../Scripts/ext-2.0/adapter/ext/ext-base.js">script>
    

    <script type="text/javascript" src="../Scripts/ext-2.0/ext-all.js">script>
    <script type="text/javascript" src="../Scripts/Ext.ux.AspWebServiceProxy.js">script>

© admin for Mohammed Osman, 2009. | Permalink | 18 comments | Add to del.icio.us
Post tags: ExtJS Grid ASP.NET Ajax WCF C#

Feed enhanced by Better Feed from Ozh

Ajax file upload using jQuery, ASP.NET & C#

admin — Thu, 08 Jan 2009 16:29:51 +0000

This plugin allows users to easily upload multiple files without refreshing the page.

Ajax file upload plugin allows users to easily upload multiple files without refreshing the page. In addition, you can use any element to show file selection window.

Demo

View an usage examples with various options. This is a PHP version,

Download

Latest version – 0.6 (8 December 2008) Fixed bug in the “disable” method. Full (7KB) Minified (3KB)

How to use?

Dependencies

Plugin requires jQuery 1.2 or above.

Creating ASPX Page

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Demo Pagetitle>
    <script type="text/javascript" src="Scripts/jquery-1.2.6.min.js">script>
    <script type="text/javascript" src="Scripts/jquery.ajax_upload.0.6.min.js">script>
<script type="text/javascript">/*<![CDATA[*/
$(document).ready(function(){
	var button = $('#button1'), interval;
	$.ajax_upload(button,{
		action: 'FileHandler.ashx',
		name: 'myfile',
		onSubmit : function(file, ext){
			// change button text, when user selects file
			button.text('Uploading');

			// If you want to allow uploading only 1 file at time,
			// you can disable upload button
			this.disable();

			// Uploding -> Uploading. -> Uploading...
			interval = window.setInterval(function(){
				var text = button.text();
				if (button.text().length < 13){
					button.text(button.text() + '.');
				} else {
					button.text('Uploading');
				}
			}, 200);
		},
		onComplete: function(file, response){
			button.text('Upload');

			// Although plugins emulates hover effect automatically,
			// it doens't work when button is disabled
			button.removeClass('hover');

			window.clearInterval(interval);

			// enable upload button
			this.enable();

			// add file to the list
			$('<li>li>').appendTo('#example1 .files').text(file);
		}
	});

});/*]]>*/script>

head>
<body>
    <form id="form1" runat="server">
<ul>
	<li id="example1" class="example">
		<p>You can style button as you wantp>
		<div class="wrapper">
			<div id="button1" class="button">Uploaddiv>
		div>
		<p>Uploaded files:p>
		<ol class="files">ol>
	li>
ul>
    form>
body>
html>

Server Side Code

If you look at javascript, I’m posting to HttpHandler called “FileHandler.ashx”. Here is the code

using System;
using System.Web;
using System.IO;

public class FileHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string strResponse = "error";
        try
        {

            string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
            string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
            string strSaveLocation = context.Server.MapPath("Upload") + "\\" + strFileName;
            context.Request.Files[0].SaveAs(strSaveLocation);
            strResponse = "success";
        }
        catch
        {

        }

        context.Response.ContentType = "text/plain";
        context.Response.Write(strResponse);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

jQueryDemo

© admin for Mohammed Osman, 2009. | Permalink | 58 comments | Add to del.icio.us
Post tags: Ajax file upload using jQuery ASP.NET C#

Feed enhanced by Better Feed from Ozh

Ajax Data Controls from DotNetSlackers

admin — Mon, 05 Jan 2009 17:33:26 +0000

This looked interesting so I thought I would share it.

Please let me know what you think…..

From the CodePlex Description.

The Ajax Data Controls is a DotNetSlackers project. Developed on top of Asp.net Ajax Extension, the main goal of this project is to provide rich set of data controls for Client Centric Development Model. Since the data controls of Asp.net like GridView, DataList, Repeater etc does not have any Client Side Object Model thus it is not possible to work with these controls with Web Service / Page Methods call. The included controls exposes same API in the client side as the Asp.net version with few more enhancements. Currently the project contains the following controls:

Repeater
GridView
DataList
Pager

http://www.codeplex.com/AjaxDataControls

Feed enhanced by Better Feed from Ozh

Add Custom JavaScript Intellisense

admin — Mon, 05 Jan 2009 17:29:49 +0000

If you reference an ASP.NET page that contains a scriptmanager in your js file like below you get intellisense for the entire Microsoft AJAX Library plus any additional scripts ref’d by the scriptmanager. The easiest way to get the /// entry in your js file is to drag n drop your .aspx page from solution explorer into the contents of your js file. VS magically adds the refJ

Since I tend to use stand-alone .js files I can just add this.

///

to my consuming page and intellisense is wired to my JavaScript code.

Feed enhanced by Better Feed from Ozh

REST in WCF Series

admin — Tue, 23 Dec 2008 21:28:38 +0000

Rob Bagby is in the midst of a blog series on REST in WCF and been building a series of screencasts on the same subject (in conjunction with Ron Jacobs).

Since it’s such an interesting topic, especially to AJAX developers I thought I’d share them here.

Blog Series:

Screencast Series:

Feed enhanced by Better Feed from Ozh

Coolite Studio: Ext Web Controls for ASP.Net

admin — Tue, 16 Dec 2008 14:50:25 +0000

With Microsoft’s .Net development platform increasing in both popularity and features, we’re receiving more inquiries than ever as to how clients can leverage the Ext framework within .Net web applications. While Ext, being a client-side framework, has always worked with ASP.Net applications, the team at Coolite has taken Ext & .Net integration a step further.

Introducing Coolite Studio

Coolite, the same team that brought you the very cool DateJS date parsing library, have really embraced the Ext framework creating a suite of ASP.Net controls name Coolite Studio that are based on Ext and integrate with Visual Studio 2008:

“The suite of web controls were built with a focus on bringing full Visual Studio Design-Time support to the Ext JavaScript Framework. A marriage of server-side and client-side frameworks.”

Tight Integration, Extensive Features, Support

The suite of controls will include the following:

Powerful integration of the Ext JavaScript Framework.
Full Design-Time support in Microsoft Visual Studio 2005 & 2008 and Visual Web Developer 2005 & 2008.
Drag-and-drop ease of use.
Current support for Window, Panel and a many Form Controls including DatePicker, Calendar and HtmlEditor.
New Controls being added weekly.
Dual Licensed (LGPL 3.0 and Coolite Commercial License).
Professional support options available shortly.

Coolite has setup a community forum to help get developers introduced to Coolite Studio and plans to expand their support options in the future.

Coolite Studio is immediately available for download and supports both .Net 2.0 and 3.5.

Feed enhanced by Better Feed from Ozh