Pages

Thursday, October 21, 2010

To Retrieve Read only text box value in code behind

Scenario:
Some times we might need to display the value in text box with read only property. But on some events, we would have to change it and finally retrieve the text box value from code behind.

Example:
a text box with calendar tagged to it. Here the text box is set with read only property, but the values is changed based on the date selected with the calendar control. and finally we try to retrieve the date selected with the help of text box value.

Problem:
When we try to get retrieve the read only text box value from code behind it just returns blank.
In the above mentioned example, when the user changes the date, then the selected date will be displayed in the text box. so we assume that the text box is getting updated properly. but then, when we try to get it value from code behind, it just returns blank.

Solution:
in code behind, give

textbox.Attributes.Add("readonly", "readonly");

By doing this we could set the text box with read only property, also could retrieve the text box value from code behind.

Loading image in asp:UpdatePanel.

Here is a simple method to display a loading image on any process in update panel.
This is helpful, to show user that some function is processing on any event.


Wednesday, October 20, 2010

ASP.Net MVC2 - View,Create, Edit, Delete a Record

This blog gives step by step procedure to create a Asp.Net MVC application with methods to display, Create, Edit and Delete a record.

The steps are as follows :

1. Create a new project with MVC2.

2. It asks whether to create a unit test project. Check “no, do not create a test project

3. The structure of the solution explorer is as follow
4. The project is divided into 3 parts – controller, Model, View.

5. For sample application let’s, just start with creating a database, and make a connection with the MVC application, and finally do some simple methods for creating a new record, edit and delete the same.

6. Create a database – Employee with 2 tables – Employee, Designation.
Employee table contains the employee information’s and a foreign key DesignationID referring to Designation table.
Designation table contains the Designation information’s.

7. Now to create a connection between MVC application and the SQL server,

a. Right click Models -> add -> New Item.
b. In the new dialog box, under categories select on ‘Data’, and select on ‘ADO.Net entity data model’, and specify the name – ‘Employee’. And click on Add.
c. Now entity data model wizard appears, select ‘Generate form Database’, and click next.
d. Now specify the server, database name and create a new connection. Note for the entity name generated based on the database name. And click ‘Next’.
e. Now check the tables to be included. And give ‘Finish’.

8. Now add a controller to do any actions on the model.
a. Right click on controller -> Add -> Controller
b. Give the controller Name – ‘Employee’. Note that the ‘controller’ suffix is added by default.
c. Check – Add action methods for Create, Update, Delete, Details. And give ‘Add’.
d. This adds a new controller called ’EmployeeController’ under Controller folder with action methods for Index, Create, Edit, Details, Delete.
e. Now it is these action methods which initiate its corresponding views.

9. Now, build the application. And check for no errors.

10. Now create an object for the Employee Entity created.
a. Include the namespace of the Model.
b. Create an object of EmployeeEntity,
EmployeeDBEntities _db = new EmployeeDBEntities ();
11. Create view for the ‘Index’ method to display the Employee table values.
a. Right click on the Index method and give ’Add View’.
b. Give the View Name, and check – Create a strongly typed view.
c. In the view data-class dropdown, select
Namespace. Models.Employee
d. In View content drop down, select ‘View’.
e. Give ‘Add’.
f. This creates a view ‘Index.aspx’ in Views -> Employee folder. This view enables to list the employee details, with Edit, Delete, Details options for every record.
g. In the Employee controller. Replace the Index method with the following,
public ActionResult Index()
{
return View(_db.Employee.ToList());
}
h. In the Global.ascx, in RegisterRoutes method change the Controller as ‘Employee’. This sets the Employee - > Index.aspx as the start up page.
i. Now build and execute the application.

12. Create a View for ‘Create’ method to insert a new record for Employee.
a. Now right click the ‘Create’ method, and give Add View.
b. In view Name - give ‘Create’, and check – Create a strongly typed view.
c. In the view data – class drop down list, select ‘Namespace. Models.Employee’.
d. In the view content drop down list, select ‘Create’.
e. Give ‘Add’.
f. This creates a view ‘Create.aspx’ in views -> Employees folder. This view enables to add a new record to the Employee table. In the controller replace the Create methods with the following.
public ActionResult Create()
{
return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(Employee empData)
{
try
{
if (!ModelState.IsValid)
return View();
_db.AddToEmployee(empData);
_db.SaveChanges();
return RedirectToAction("Index");
}
catch (Exception ex)
{
return View();
}
}
g. Now build and execute the application.

13. Create a view for 'Edit' method which helps to update the selected record.
a. Now right click the ‘Edit’ method, and give Add View.
b. Give the name for the view and check – Create a strongly typed view.
c. In the view data – class drop down list, select ‘Namespace. Models.Employee’.
d. In the view content dropdown list, select ‘Edit’.
e. Give ‘Add’.
f. This creates a view ‘Edit.aspx’ in views -> Employees folder. This view enables to edit the selected record. In controller replace the edit methods with the following

public ActionResult Edit(string id)
{
var empToEdit = (from emp in _db.Employee where emp.EmpNo.Equals(id) select emp).First();
return View(empToEdit);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(Employee empToEdit)
{
try
{
var originalEmp = (from emp in _db.Employee where emp.EmpNo.Equals(empToEdit.EmpNo) select emp).First();
if (!ModelState.IsValid)
return View(originalEmp);
_db.ApplyPropertyChanges(originalEmp.EntityKey.EntitySetName, empToEdit);
_db.SaveChanges();
return RedirectToAction("ViewEmployee");
}
catch (Exception ex)
{
return View();
}
}

14. Create a view for ‘Delete’ method which enables to delete the selected record with confirmation.
a. Now right click the ‘Delete’ method, and give Add View.
b. Give the name for the view and check – Create a strongly typed view.
c. In the view data – class drop down list, select ‘Namespace. Models.Employee’.
d. In the view content dropdown list, select ‘Delete.
e. Give ‘Add’.
f. This creates a view ‘Delete.aspx’ in views -> Employee folder. This view enables to delete the selected record with a confirmation from user.
g. In the controller replace the delete methods with the following.

public ActionResult Delete(string id)
{
var empToDelete = (from emp in _db.Employee where emp.EmpNo.Equals(id) select emp).First();
return View(empToDelete);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Delete(string id, string s)
{
try
{
var originalEmp = (from emp in _db.Employee where emp.EmpNo.Equals(id) select emp).First();
_db.DeleteObject(originalEmp);
_db.SaveChanges();
return RedirectToAction("Index");
}
catch (Exception ex)
{
return View();
}
}
h. Build and execute the application.