ASP.NET

ProudMonkey Controls for ASP.NET 4.0 - Version 3

Vincent Maverick Durano — Wed, 28 Dec 2011 12:27:19 GMT

First of all I am so happy to know that many developers around the world uses my controls (~ it's really a big surprise to me. =} ). Thank you all and hope you'll continue to provide feedback or feature suggestions so that I can work on it on my free time.

I've seen a lot of developers asking me via email, forums, blog comments, and private messages requesting how to use those controls in ASP.NET 4.0 with the latest release of AjaxControlToolkit. As you may know the previous dll of ProudMonkey controls will not work with the latest version AjaxControlToolkit dll (v4.1.51116.0). So if you want to use the MessageBox, ConfirmBox and FrameBox controls in ASP.NET 4.0 with the latest ACT version then you can download the compatible version here:

If you want to customize the look and feel of the controls then be sure to check this post: ProudMonkey Controls for ASP.NET 4.0 - Customizing the Modal

Related Downloads:

For ASP.NET 4.0 with ACT v4.1.51116.0 (Download here)
For ASP.NET 4.0 with ACT v4.1.40412.0 (Download here)
For ASP.NET 3.5 with ACT v3.0.1106.0 (Download here)

How to use it? Check this post: Using the Controls

Enjoy! =}

Technorati Tags: ASP.NET,ProudMonkey Controls

Masterpage, User Control, Modal Popup and Update Panel - Passing values to parent page.

Vincent Maverick Durano — Fri, 02 Sep 2011 12:57:25 GMT

A developer is asking how to pass data from a UserControl control to the main page. Basically, the scenario is that he has a user control which contains a GridView and wrap arround within asp Ajax UpdatePanel control. The UserControl will then be used at the page that is hosted within a master page. The page contains some TextBox in which it will be populated once the user selects a row from the GridView also on that page the Modalpop is defined.

To achieve that, here's one solution I've provided to the developer.

The Page markup:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Modal.aspx.cs" Inherits="WebAppDemo.Modal" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register src="UserControl/WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .modal-bg{
            background-color:Gray;
            filter:alpha(opacity=50);
            opacity:0.6;
            z-index:999;
        }
        .modal{
            position:absolute;
        }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>

    <asp:TextBox ID="txtProductName" runat="server" />
    <asp:TextBox ID="txtPrice" runat="server" />


    <asp:LinkButton ID="LinkButton1" runat="server" Text="Show" />
    <asp:Panel ID="pnlPopUp" runat="server" style="display:none" CssClass="modal" >
                    <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
    </asp:Panel>
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1" PopupControlID="pnlPopUp" BackgroundCssClass="modal-bg">
    </asp:ModalPopupExtender>

</asp:Content>

As you can see, there really no fancy about the markup above. It just contains two TextBox, ModalPopup, and UserControl within the panel and a LinkButton as the target control for the Modal.

UserControl markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebAppDemo.UserControl.WebUserControl1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                    <Columns>
                         <asp:BoundField DataField="ID" />
                         <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
                         <asp:TemplateField>
                            <ItemTemplate>
                                <asp:TextBox ID="txtPrice" runat="server" Text='<%# Eval("Price") %>' />
                            </ItemTemplate>
                         </asp:TemplateField>
                         <asp:TemplateField>
                            <ItemTemplate>
                                <asp:TextBox ID="txtAmount" runat="server" Text='<%# Eval("Amount") %>' />
                            </ItemTemplate>
                         </asp:TemplateField>
                         <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Button ID="Button1" runat="server" Text="Select" onclick="Button1_Click" />
                            </ItemTemplate>
                         </asp:TemplateField>
                    </Columns>
        </asp:GridView>
   </ContentTemplate>
   <Triggers>
        <asp:PostBackTrigger ControlID="GridView1" />
   </Triggers>
</asp:UpdatePanel>

CODE BEHIND:

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 AjaxControlToolkit;

namespace WebAppDemo.UserControl
{
    public partial class WebUserControl1 : System.Web.UI.UserControl
    {

        private DataTable GetSampleData()
        {

            //NOTE: THIS IS JUST FOR DEMO
            //If you are working with database
            //You can query your actual data and fill it to the DataTable
            DataTable dt = new DataTable();
            DataRow dr = null;

            //Create DataTable columns
            dt.Columns.Add(new DataColumn("ID", typeof(string)));
            dt.Columns.Add(new DataColumn("ProductName", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(string)));
            dt.Columns.Add(new DataColumn("Amount", typeof(string)));


            //Create Row for each columns
            dr = dt.NewRow();
            dr["ID"] = 1;
            dr["ProductName"] = "Galaxy S";
            dr["Price"] = "100";
            dr["Amount"] = "10";

            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 2;
            dr["ProductName"] = "iPhone 4";
            dr["Price"] = "200";
            dr["Amount"] = "2";

            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "HTC Mobile";
            dr["Price"] = "50";
            dr["Amount"] = "10";

            dt.Rows.Add(dr);
            return dt;
        }

        private void BindGrid(DataTable source)
        {
            GridView1.DataSource = source;
            GridView1.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                BindGrid(GetSampleData());
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Button b = (Button)sender;
            GridViewRow gvRow = (GridViewRow)b.NamingContainer;

            string productName = gvRow.Cells[1].Text;
            string price = ((System.Web.UI.WebControls.TextBox)gvRow.FindControl("txtPrice")).Text;

            Type thePage = Page.GetType();
            System.Reflection.PropertyInfo[] pi = thePage.GetProperties();
            foreach (System.Reflection.PropertyInfo pinfo in pi)
            {
                if (pinfo.Name == "ProductName")
                {
                    pinfo.SetValue(Page, productName, null);
                }
                else if (pinfo.Name == "Price")
                {
                    pinfo.SetValue(Page, price, null);
                }
            }

            ((ModalPopupExtender)this.Parent.Parent.FindControl("ModalPopupExtender1")).Hide(); 
            
        }
    }
}

As you can see at the Button.Click event I have used reflection to get the reference to the control from the main page and the set the needed values that I need to pass in the main page.

Running the page will display something like this:

On initial load:

After clicking the "show" link

After selecting the second row in the gridview

That's it! I hope someone find this post useful!

Product Review - ComponentOne Studio for MVC Wijmo

Vincent Maverick Durano — Mon, 22 Aug 2011 10:08:51 GMT

Wijmo is an awesome tool from ComponentOne. The goal of this tool is to help us web developers rapidly develop MVC applications with interfaces richer than WebForms.

Main Features:

1.Over 30 UI Widgets with everything from interactive menus to rich charts.
2.MVC scaffolding automation. This means that Wijmo generates rich interactive Views and Controllers for your entire Model.

Free Trial DownLoad: http://www.componentone.com/SuperProducts/StudioMVCWijmo/

In this review we'll take a look at Wijmo HTML Widgets and enhanced scaffolding feature.

PART 1: Looking at UI Widgets

STEP 1:

Fire up Visual Studio 2010 and Select -> New Project. Under Installed Templates -> Visual C#, select ASP.NET MVC 3 Wijmo Application

Name the project as you like but in this demo I'm going to name it as "MVC3Wijmo".

Now click OK to generate the default files for you. See below screen shot for a better look.

Since we are using the optimized ASP.NET MVC 3 Wijmo Application project you'll notice that it uses Wijmo controls for the default IU, and the necessary Wijmo assemblies are already referenced in the application's _Layout.cshtml page. Here's the page that I'm talking about:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="http://cdn.wijmo.com/themes/sterling/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.wijmo.com/jquery.wijmo-open.1.2.0.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.1.2.0.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/raphael.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.1.2.0.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.1.2.0.min.js" type="text/javascript"></script>

</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>
                    My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#nav").wijmenu();
            $(".button").button();
            $(":input[type='submit']").button();
            $(":input[type='checkbox']").wijcheckbox();
            $(":input[type='radio']").wijradio();
            $(":input[type='text'],:input[type='password'],textarea").not(":wijmo-wijinputnumber").not(":wijmo-wijinputmask").not(":wijmo-wijinputdate").wijtextbox();
            $("select").not(":wijmo-wijcombobox").wijdropdown();
        });
    </script>
</body>
</html>

As you can see the application already has few widgets laid out in the _Layout.cshtml file. Here's a sample usage below:

<input type="button" class="button" value="Wijmo Button" />

Calling the class "button" will enable the button to become a Wijmo HTML. Take a look the screen shot below for sample comparison.

Can you see the difference? =} Now let's try to play around with some widgets that are not pre-defined in our _Layout.cshtml file. But before that we will update the Wijmo references first via Nuget. To do this just just follow this few steps:

1. Go to Project menu -> Add Library Package Reference.
2. In the Add Library Package Reference diaglog box select Online and then click NuGet official package source.
3. At the upper right corner, type in "Wijmo" in the search field box.
4. You should be able to see the following:

5. Click Install

After installation, you'll notice that additional js files, css files and images will be added within the Content and Script folders of your application:

Now let's go ahead and try some Wijmo wigets. In this demo we'll going to use wijmo tab first. Add the following mark up in your View:

<div id="wijTab">
       <ul>
         <li><a href="#tab0">FIRST</a></li>
         <li><a href="#tab1">SECOND</a></li>
         <li><a href="#tab2">THIRD</a></li>
       </ul>

       <div id="tab0" >
              First tab content.
       </div>
       <div id="tab1">
              Second tab content.
       </div>
       <div id="tab2">
              Third tab content.
       </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $("#wijTab").wijtabs();
    });

</script>

Here's the output when running it on the browser:

We have now a cool and richer tabs in our page. Let's try something else. Let's try Wijmo accordion. Copy this mark up in your view:

<div id="wijAccordion">
        <h1>Header 1</h1>
        <div>Content 1</div>
        <h2>Header 2</h2>
        <div>Content 2</div>
        <div>Header 3</div>
        <div>Content 3</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#wijAccordion").wijaccordion();
    });
</script>

The output would look something like this:

Here's another example using Wijmo Combobox

<select id="wijCombobox">
    <option value="Vinz">Vinz</option>
    <option value="Ianne">Ianne</option>
    <option value="Jeff">Jeff</option>
    <option value="Jhen">Jhen</option>
    <option value="Jhen">Kenneth</option>
    <option value="Jhen">Xhaiden</option>
    <option value="Jhen">Kurt</option>
    <option value="Jhen">Angel</option>
</select>

<script type="text/javascript">
    $(function () {
        $("#wijCombobox").wijcombobox({
        });
</script>

The output would look something like this:

There are some more cool widgets that are available for you such as Calenda, Charts, Diaglog, Expander, Grid, List, Menu, Pager, Progress bar, Slider, Splitter, Tree, Wizard etc.. You can find more details about each widgets here: http://www.componentone.com/SuperProducts/WijmoComplete/

PART 2: Looking at Scaffolding Features:

As you may know scaffolding allows you to quickly create rich Web applications. Scaffolding does all of the work for you by automatically creating your controllers and views, complete with CRUD (create,

read, update, delete) operations and validation. Wijmo further enhances the application with Wijmo widgets and styles. If you are new to ASP.NET MVC then I'd suggest you to look at my previous article here: http://geekswithblogs.net/dotNETvinz/archive/2011/06/03/asp.net-mvc-3-creating-a-simple-sign-up-form.aspx

STEP 1: Creating the Database

For this example I created a simple database called "Demo_DB.mdf" and added it into the application's App_Data folder and use it as our database.

If you don't have a database installed then you can add a reference to EntityFramework.SqlServerCompact library. Adding this library allows you to define the object model without having any database, and when you run the project, the database will be dynamically created. To do this just:

1. Right click on the project name and select "Add Library Package Reference"
2. Under installed Packages, select Online and type in "EntityFramework.SqlServerCompact" in the search field box.

3. Click install and when it's done click Finish
4. Click Close and in the Solution explorer, right-click the project name and select Build to make sure the object model is compiled.

STEP 2: Adding the Model

I'm going to use Entity Framework as our Data Access mechanism so that we can program against the conceptual application model instead of progamming directly against our database. Before we add the EDMX file lets create a "DB" folder within the "Model" folder first and then add the EDMX file there. To add the EDMX file just

1. Right-click on the "DB" folder, select Add -> New Item
2. Select ADO.NET Entity Data Model and then click Add
3. Select "Generate from Database" and then click Next
4. Click Next again and under Table select the table that you want to use. In this case I'm going to select the "Music" table as shown below:

5. Click Finish to generate the entity model for you.

What happend there is that EF will automatically generates the Business object for you within the Entity Data Model(EDM) that we have just created and let you query against it.The EDM is the main gateway by which you retrieve objects from the database and resubmit changes.

STEP 3: Adding the View Model

Just to recap Entity Framework will generate the business objects and manage Data Access within the application. As a result, the class Music is automatically created by EF and it features all the fields in the database table as properties of the class.

I don't want to use this class direclty in the View so I decided to create a separate class so that I can have a full control over it. Now let's add a the MusicModel class by right-clicking on the "Models" folder then select Add -> Class. Here's the code block for the "MusicModel.cs" class.

using System;
using System.ComponentModel.DataAnnotations;

namespace MVC3Wijmo.Models
{
    public class MusicModels
    {
       [Required]
        public string Title { get; set; }
       [Required]
        public string Artist { get; set; }
        [Required]
        public string Genra { get; set; }
        [Required]
        public DateTime Year { get; set; }
       [DataType(DataType.MultilineText)]
        public string Description { get; set; }

        [Range(0, 10), UIHint("IntSlider")]
        public int Rating { get; set; }
    }
}

Noticed that I added the Required and some other attributes for each property in the class. This attribute is called Data Annotations. Data annotations are attribute classes that lives in the System.ComponentModel.DataAnnotations namespace that you can use to to decorate classes or properties to enforce pre-defined validation rules.

STEP 4: Adding the Controller

1. In the Solution Explorer, right-click the Controllers folder and select Add -> Controller. The Add Controller dialog box opens.
2. Enter a Controller name, for example, MusicController. Click Add to generate the file. The file should look something like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVC3Wijmo.Controllers
{
    public class MusicController : Controller
    {
       //
        // GET: /Music/
        public ActionResult Index()
        {
            return View();
        }
    }
}

3. Right Click on the Index() method and select Add View. The Add View diaglog box opens.
4. Check "Create stronly types view" and select the "MusicModel" class
5. Under Scaffold template, select "Create"
6. Check "Use a layout" and then browse the _Layout.cshtml file.
7. Click Add to generate the file.
8. Running the page will give you this cool and slicker UI in the browser.

Cool isn't it? =}

REFFERENCES AND DOWNLOADS:

http://www.componentone.com/SuperProducts/StudioMVCWijmo/
http://www.componentone.com/SuperProducts/WijmoComplete/
http://www.componentone.com/SuperProducts/WijmoScaffoldingMVC/

All I can say is that I'm really impressed with this UI Tools. It saves lots of time in developing your UI (especially if you are not that good in UI development) and it provides more flexibilty, interactive views and richer UI to make your page slicker. Thanks to ComponentOne team and Geekswithblogs team for giving me the opportunity to utilize this cool components. It's really Awesome!!! =}

Hope someone find this post useful!

Technorati Tags: ASP.NET,ASP.NET MVC,Wijmo

ASP.NET MVC 3: Creating a Simple Sign-Up Form

Vincent Maverick Durano — Fri, 03 Jun 2011 12:44:48 GMT

In this article I'm going to demonstrate how to create a simple sign-up form using ASP.NET MVC 3. So basically in this demo you will learn the following:

How to insert data to the database with Entity Framework
How to validate the Form using Data Annotations
How to Authenticate users after sign up using FormsAuthentication

Note that before you continue reading this article be sure that you have the basic understanding about ASP.NET MVC in general. You can refer the following links below to learn more about ASP.NET MVC:

http://msdn.microsoft.com/en-us/library/dd381412%28VS.98%29.aspx
http://www.asp.net/mvc/whatisaspmvc

STEP 1. Adding a new ASP.NET MVC project

Let's go ahead and fire up Visual Studio 2010 and then select File -> New Project -> ASP.NET MVC 3 Web Application. See the screen shot below for more clearer view:

Now click OK and on the next form select Empty Template -> select Razor as the View engine and then click OK to generate the default files.

STEP 2: Setting up the Model

In this demo, I'm going to use Entity framework as our Data Access mechanism sothat we can program against the conceptual application model instead of progamming directly against our database.

Add the following folders under the Models folder:

    DB
    ObjectManager
    ViewModel

The application structure would like something like below:

We will create our Entity Model (EDMX) in the DB folder. To do this right click on the "DB" folder and select Add -> New Item -> Data -> ADO.NET Entity Data Model.

Noticed that I named the entity as "SampleModel" just for the purpose of this demo. You may want to name it to a more appropriate name based on your requirements but for this example let's just use "SampleModel". Now click Add to continue and on the next step select "Generate from database" and click Next. On the next step you can connect or browse to the database that you want to use in the application and test the connection string by clicking on the "Test Connection" button and if it succeeds then you can continue by clicking OK and then Next.

Note that in this example I created a simple database called "DeveloperReport.mdf" and added it into the application's App_Data folder and use it as our database. See the screen shot below:

On the next step we can add the table(s), views or stored procedures that we want to use in the application by selecting the checkbox. See below screenshot:

Noticed that I've only selected the "SysUser" table. This is because we are going to use this table for doing insert and we don't need anything else. Now click on Finish button to generate the entity model for you. See the screenshot below:

What happend there is that EF will automatically generates the Business object for you within the Entity Data Model(EDM) that we have just created and let you query against it.The EDM is the main gateway by which you retrieve objects from the database and resubmit changes.

STEP 3: Adding the ViewModel Class

Just to recap Entity Framework will generate the business objects and manage Data Access within the application. As a result, the class SysUser is automatically created by EF and it features all the fields in the database table as properties of the class.

I don't want to use this class direclty in the View so I decided to create a separate class that just holds the properties I need in the View. Now let's add a the UserView class by right-clicking on the "ViewModels" folder then select Add -> Class. Here's the code block for the "UserView.cs" class.

using System.ComponentModel.DataAnnotations;

namespace MVCDemo.Models.ViewModels {
    public class UserView {
        [Required]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Required]
        [Display(Name = "Contact Number")]
        public string ContactNumber { get; set; }

        [Required]
        [Display(Name = "Login ID")]
        public string LoginID { get; set; }

        [Required]
        [Display(Name = "Password")]
        public string Password { get; set; }
    }
}

Noticed that I added the Required and DisplayName attributes for each property in the UserView class. This attributes is called Data Annotations. Data annotations are attribute classes that live in the System.ComponentModel.DataAnnotations namespace that you can use to to decorate classes or properties to enforce pre-defined validation rules.

I'll use this validation technique because I want to keep a clear separation of concerns by using the MVC pattern and couple that with data annotations in the model, then your validation code becomes much simpler to write, maintain, and test.

For more information about Data Annotations then you can refer this link: http://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx. And of course you can find more examples about it by doing a simple search at google /bing

STEP 4: Adding the UserManager Class

The next step that we are going to do is to create the User manager class that would handle the (CRUD operations) create,update,fetch and delete operations of a certain table. The purpose of this class is to separate the actual data opertions from our controller and to have a central class for handling insert,update,fetch and delete operations. But please note that in this example I'm only be doing the insert part in which a user can add new data from the View to the database. I'll talk about how to do update,fetch and delete with MVC in my next article. So this time we'll just focus on the insertion part first.

Now right click on the "Model" folder and add a new class by selecting Add -> Class and since we are going to manipulate the SysUser table then we will name the class as "UserManager". Here's the code block for the "UserManager.cs" class:

using System.Linq;
using MVCDemo.Models.DB;
using MVCDemo.Models.ViewModels;

namespace MVCDemo.Models.ObjectManager {
    public class UserManager {

        private DeveloperReportEntities dre = new DeveloperReportEntities();

        public void Add(UserView user) {
            DB.SysUser sysUser = new DB.SysUser();
            sysUser.SysUserLoginID = user.LoginID;
            sysUser.SysPassword = user.Password;
            sysUser.FirstName = user.FirstName;
            sysUser.LastName = user.LastName;
            sysUser.ContactNumber = user.LastName;

            dre.AddToSysUsers(sysUser);
            dre.SaveChanges();
        }

        public bool IsUserLoginIDExist(string userLogIn) {
            return (from o in dre.SysUsers where o.SysUserLoginID == userLogIn select o).Any();
        }
    }
}

STEP 4: Adding the Controllers

Since our model is already set then let's go ahead and add the "AccountController". To do this just right click on the "Controllers" folder and select Add -> Controller. Since our aim is to create a simple sign-up form then name the controller as "AccountController" and then click Add to generate the "AccountController" class for you.

Now here's the code block for the "AccountController":

using System.Web.Mvc;
using System.Web.Security;
using MVCDemo.Models.ViewModels;
using MVCDemo.Models.ObjectManager;

namespace MVCDemo.Controllers
{
    public class AccountController : Controller
    {
        // GET: /Account/SignUp
        public ActionResult SignUp() {
            return View("SignUp");
        }

        // POST: /Account/SignUp
        [HttpPost]
        public ActionResult SignUp(UserView user) {
            try {
                if (ModelState.IsValid) {
                    UserManager userManager = new UserManager();
                    if (!userManager.IsUserLoginIDExist(user.LoginID)) {
                        userManager.Add(user);
                        FormsAuthentication.SetAuthCookie(user.FirstName, false);
                        return RedirectToAction("Welcome", "Home");
                    }
                    else {
                        ModelState.AddModelError("", "LogID already taken");
                    }
                }
            }
            catch {
                return View(user);
            }

            return View(user);
        }
    }
}

The AccountController has two main methods. The first one is the "SignUp" which returns the "SignUp.cshtml" View. The second one also named as "SignUp" but it is decorated with the "[HttpPost]" attribute. This attribute specifies that the overload of the "SignUp" method can be invoked only for POST requests.

The second method is responsible for inserting new entry to the database and automatically authenticate the users using FormsAuthentication.SetAuthCookie() method. this method creates an authentication ticket for the supplied user name and adds it to the cookies collection of the response, or to the URL if you are using cookieless authentication. After authenticating, we then redirect the users to the Welcome.cshtml page.

Now add another Controller and name it as "HomeController". This controller would be our controller for our default page. We will create the "Index" and the "Welcome" View for this controller in the next step. Here's the code for the "HomeController" class:

using System.Web.Mvc;

namespace MVCDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }

        [Authorize]
        public ActionResult Welcome() {
            return View();
        }

    }
}

Noticed that we have two ActionResult method in the "HomeController". The "Index" method serve as our default redirect page and the "Welcome" method will be the page where we redirect the users after they have successfully registered. We also decorated it with the "[Authorize]" attribute so that this method will only be available for the logged-in users.

STEP 5: Adding the Views

First let's add the following folders below under the "Views" folder:

Home
Account

Note: The reason for this is that the folder name should match the name of the Controllers you've created. So if you have HomeController then you should have a "Home" folder within your View.

Now under the "Home" folder add a new View. To do this just right click on the "Home" folder and select Add -> View. Name the view as "Index" and click Add to generate the Web Page (.cshtml). Here's the mark-up of the Index.cshtml:

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

@Html.ActionLink("Click here to sign-up", "SignUp", "Account")

As you can see there's no fancy about the mark-up above except that it contains the ActionLink which redirect you to the "SignUp" view within the "Account" folder. Now add again another View under the "Home" folder and name the view as "Welcome". The reason why we add the Welcome.cshtml view is because we will redirect the user in this page after they successfully signed up and nothing more. Here's the mark-up of the Welcome.cshtml:

@{
    ViewBag.Title = "Welcome";
}

<h2>Hi <b>@Context.User.Identity.Name</b>! Welcome to my website!</h2>

Now under the "Account" folder add a new view and name it as "SignUp" and check the checkbox that says "create a strongly-typed views and in the Model class dropdownlist select "UserView" and then in the Scaffold template select "Create" and finally click Add to generate the Web Page for you. Take a look at the screen shot below for more clearer view of what I am talking about:

And here's the generated mark up of the SignUp.cshtml:

@model MVCDemo.Models.ViewModels.UserView

@{
    ViewBag.Title = "SignUp";
}

<h2>Sign-Up</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>UserView</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ContactNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactNumber)
            @Html.ValidationMessageFor(model => model.ContactNumber)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LoginID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LoginID)
            @Html.ValidationMessageFor(model => model.LoginID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Return to Home page","Index", "Home")
</div>

The mark-up above is a strongly-type view. This strongly typed approach enables better compile-time checking of your code and richer IntelliSense in the Visual Studio editor. By including a @model statement at the top of the view template file, you can specify the type of object that the view expects. In this case it uses the MVCDemo.Models.ViewModels.UserView.

The View structure would like something like below:

STEP : Running the Application

Running the page will give you the following outputs:

On initial load:

After clicking on the Sign-Up link:

Sample screen shot that shows the validation

Completing the form

After successfully registered

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET MVC,ASP.NET,Entity Framework

ProudMonkey Controls for ASP.NET 4.0 - Customizing the Modal

Vincent Maverick Durano — Mon, 02 May 2011 06:47:08 GMT

If you were using the customized MessageBox, ConfirmBox and FrameBox controls and wanted to modify the look and feel of the these controls then you should be happy because the new version of the ProudMonkey controls provide some properties that you can set to customize the modal controls including the header, buttons, body background color, header fonts etc.

You can download the new version here: ProudMonkey Controls Version 2

The MessageBox provides the following properties:

HeaderImageUrl - This property sets the ImageUrl to be used as the background in the MessageBox header. Note that the image should be 2 x 28 in size because this image will be repeated horizontally.
HeaderBackgroundColor - This property sets the background color of the MessageBox header. You can use this property if you don't want to use the default header background of the MessageBox or if you don't want to set the HeaderImageUrl property.
HeaderTextColor - This property sets the text fore color of the MessageBox header.
HeaderTextFont - This property sets the text font of the MessageBox header.
BodyBackgroundColor - This property sets the background color of the MessageBox body where the actual text is displayed.
BodyTextColor - This property sets the text fore color of the actual content dispalyed in the body.
BodyTextFont - This property sets the text font of the actual content displayed in the body
OKButtonImageUrl - This property sets the ImageUrl to be used as the background image for the OK button.
CloseButtonImageUrl - This property sets the ImageUrl to be used as the background image for the Close button.

Note that if you don't set any of those properties the default styles will be automatically applied.

Sample Usage:

<cc1:MessageBox ID="MessageBox1" runat="server" 
                HeaderImageUrl="Images/header.png"
                HeaderTextColor="White"
                HeaderTextFont="Arial Black"
                BodyBackgroundColor="#E1E5F0"
                BodyTextFont="Tahoma"
                BodyTextColor="#263F75"  
                OKButtonImageUrl="Images/btnOK.jpg"
                CloseButtonImageUrl="Images/btnClose.jpg" />

Actual Output:

The ConfirmBox also provides the same properties just like what the MessageBox does. The only additional properties are:

YesButtonImageUrl - This property sets the ImageUrl to be used as the background image for the Yes button.
NoButtonImageUrl - This property sets the ImageUrl to be used as the background image for the No button.

Again if you don't set any of those properties in the ConfirmBox control, the default styles will be automatically applied.

Sample Usage:

<cc1:ConfirmBox ID="ConfirmBox1" runat="server"
                YesButtonImageUrl="Images/btnYes.jpg"
                NoButtonImageUrl="Images/btnNo.jpg"
                CloseButtonImageUrl="Images/btnClose.jpg" 
                HeaderImageUrl="Images/header.png"
                HeaderTextColor="White"
                HeaderTextFont="Arial Black" />

Actual Output:

The FrameBox has the following properties:

HeaderImageUrl - This property sets the ImageUrl to be used as the background in the FrameBox header. Note that the image should be 2 x 28 in size because this image will be repeated horizontally.
HeaderBackgroundColor - This property sets the background color of the FrameBox header.
HeaderTextColor - This property sets the text fore color of the MessageBox header.
HeaderTextFont - This property sets the text font of the MessageBox header.
CloseButtonImageUrl - This property sets the ImageUrl to be used as the background image for the Close button.

Sample Usage:

<cc1:FrameBox ID="FrameBox1" runat="server"
              HeaderImageUrl="Images/header.png"
              HeaderTextColor="White"
              HeaderTextFont="Arial Black"
              CloseButtonImageUrl="Images/btnClose.jpg" />

Actual Output:

That's it! I hope someone find this post useful!

Technorati Tags: ProudMonkey Controls,ASP.NET

Tip Of The Day - Remove GridView Row Highlighting on Edit Mode

Vincent Maverick Durano — Tue, 26 Apr 2011 06:17:20 GMT

Typically we will attach the mouseover and mouseout client-side events on the gridview rows to highlight rows on mouseover, but there are cases that we don't want to make the row highlighted when we are on edit mode. To do this we can check the GridView EditIndex to determine if the row is on edit mode and then do the validation there. Here's a sample code block below of what I am talking about:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
            if (e.Row.RowType == DataControlRowType.DataRow) {
                string onmouseoverStyle = "this.style.backgroundColor='blue';this.style.color ='white';";
                string onmouseoutStyle = "this.style.backgroundColor='white';this.style.color ='black';";

                if (GridView1.EditIndex != -1) {
                    e.Row.Attributes.Remove("onmouseover");
                }
                else {
                    e.Row.Attributes.Add("onmouseover", onmouseoverStyle);
                    e.Row.Attributes.Add("onmouseout", onmouseoutStyle);
                }
            }
}

As you can see the code above is very straight forward. What it does is it checks if the gridview is on edit mode and when it's on edit mode we removed the onmouseover attribute and when it's not we attach the onmouseover attribute again and apply the desired styles. That's simple!

I hope someone find this post useful!

Technorati Tags: ASP.NET,GridView,TipsTricks

A Monkey Talks about ASP.NET

Vincent Maverick Durano — Thu, 14 Apr 2011 06:50:55 GMT

Last week, I was interviewed by Zandra Nilocas from Microsoft Philippines. It was my first time experience to talk about something in front of the camera so it's not surprising that I looked like an idiot in that interview (you know swiveling my chair back and forth without noticing it).

Anyway in the interview we talked about ASP.NET WebForms, MVC and Web Matrix in general and just to elaborate a bit of what we talked about and to clarify things out, I have decided to write this post... WebForms and MVC are two approaches for building ASP.NET applications. Both are good choices and both have their place in the market. WebForms is a development approach for Rapid Applications in which you can take advantage of the design surface, powerful server controls and components. So if you are familiar with drag-and-drop and event driven model or if you are coming from a Windows Application development and want to jump on web development then you can start with WebForms. ASP.NET MVC on the other hand is another approach for building up dynamic web applications and provides a clean separation of concerns (the Model, the View and the Controller) and gives you full control over your codes, HTTP, Request, Response, JavaScripts, CSS, HTML, Get and Post and so on...Aside from WebForms and MVC there's another web development tool from Microsoft called WebMatrix and it's absolutely free . It is basically designed to provide easier entry into ASP.NET development - especially for those used to scripting technologies like PHP and classic ASP or those completely new to dynamic web development. With WebMatrix you can easily build a dynamic website within less than an hour because everything you need for web development is bundled into one including IIS Express, IDE, Sql Server Compact Edition, Razor, and a new programming Framework - Web Pages. It also provides a lot of built-in web templates that you can use.

Now which development approach would I follow?

Well the answer depends on the business needs. Again all approach are good choices but here's what I would like to suggest:

If you are a windows application developer (I'm actually referring to VB6 or .Net windows forms programmers) and want to get started with ASP.NET then you can start working with WebForms.
If you wanted to build up web applications in just a short amount of time then you can go for WebForms.
If you are coming from a classic ASP, PHP or even WebForms and wanted to embrace the web, value unit testing, separation of concerns then you can go for MVC.
If you are an experienced WebForm developer and wanted to know the real web development then you should get to know MVC.
If you used PHP or classic ASP before, love scripting and wanted to enter the ASP.NET world then you go for WebMatrix.
If you wanted to build up web applications in just a short amount of time and you are already familiar with scripting technologies such as PHP or classic ASP then you go for WebMatrix.

Technorati Tags: General,ASP.NET,ASP.NET MVC,Web Matrix

Entity Framework - Editing, Updating and Deleting Data in the Form

Vincent Maverick Durano — Mon, 04 Apr 2011 12:00:25 GMT

Previously we've talked about how to fetch the data from the database and populate the form with EF. In this example I'm going to demonstrate how to do Edit,Update and Delete operations in the form with Entity Framework. And oh since this is a continuation of my previous example I would suggest you to refer that first before you go any further.

STEP 1: Setting up the UI

Since this is a continuation of my previous example then I'm jus going to use the same layout and extend it a bit by adding some buttons on the form and a label control for displaying some message. Aside from that I have also moved the form fields inside a Panel control for validation purposes and removed the ReadOnly attribute for each TextBox. Here's the updated mark-up below:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:DropDownList ID="ddlUser" runat="server" AppendDataBoundItems="true" 
        AutoPostBack="true" onselectedindexchanged="ddlUser_SelectedIndexChanged">
        <asp:ListItem Value="0">--Select--</asp:ListItem>
    </asp:DropDownList>
    <asp:Panel ID="pnlUserDetail" runat="server" Enabled="false">
        <br />First Name:
        <br /><asp:TextBox ID="tbFirstName" runat="server" />
        <br />Last Name: 
        <br /><asp:TextBox ID="tbLastName" runat="server" />
        <br />Contact Number: 
        <br /><asp:TextBox ID="tbContactNumber" runat="server" />
        <br />
        <br />
    </asp:Panel>
    <asp:Label ID="lblMessage" runat="server" ForeColor="Green" />
    <br />
    <asp:Button ID="btnEdit" runat="server" Text="Edit" onclick="btnEdit_Click" />
    <asp:Button ID="btnUpdate" runat="server" Text="Update" Visible="false" onclick="btnUpdate_Click" />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" Visible="false" onclick="btnCancel_Click" />
    <asp:Button ID="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click" />
</asp:Content>

STEP 2: Editing and Updating the Form

Add the following method below in the UserManager class:

       public void UpdateUser(UserDetail userDetail) {
            var user = (from o in dre.SysUsers
                        where o.SysUserID == userDetail.SysUserID
                        select o).First();
            user.FirstName = userDetail.FirstName;
            user.LastName = userDetail.LastName;
            user.ContactNumber = userDetail.ContactNumber;

            dre.SaveChanges();
        }

The UpdateUser() is a method that handles the updating of data. This method take the UserDetail as the parameter. If you can still remember in my previous example particularly in STEP 2, the UserDatail is a class that holds some properties such as the SysUserID, FirstName, LastName and ContactNumber.

The first line within the method is we queried the SysUser object based on the userID using LINQ syntax and assigned the result into a variable user. The FirstOrDefault function is an eager function which returns the first element of a sequence that satisfies a specified condition. Once the LINQ FirstOrDefault function is invoked then EF will autmatically issue a parameterize SQL query to the database in which the SQL Server can understand and then bring back the result to the Entity Model.

After querying the data we then assign a new value to each field and then call SaveChanges() method to update the database with the changes.

Now let's go to the code behind part of the webform and perform the update by calling the method UpdateUser() from the UserManager class. Here are the code blocks below:

       private void ToggleButton(bool isEdit){
            if (isEdit) {
                btnEdit.Visible = false;
                btnDelete.Visible = false;
                btnUpdate.Visible = true;
                btnCancel.Visible = true;
            }
            else {
                btnEdit.Visible = true;
                btnDelete.Visible = true;
                btnUpdate.Visible = false;
                btnCancel.Visible = false;
            }

            pnlUserDetail.Enabled = isEdit;
        }

        private void UpdateUserDetail(UserDetail userDetail) {
            UserManager userMgr = new UserManager();
            userMgr.UpdateUser(userDetail);
        }

        protected void btnEdit_Click(object sender, EventArgs e) {
            if (ddlUser.SelectedItem.Value != "0") {
                ToggleButton(true);
                lblMessage.Text = string.Empty;
            }
            else {
                lblMessage.Text = "Please select name from the list first.";
                lblMessage.ForeColor = System.Drawing.Color.Red;
            }
        }

        protected void btnUpdate_Click(object sender, EventArgs e) {

            UserDetail userDetail = new UserDetail();
            userDetail.SysUserID = Convert.ToInt32(ddlUser.SelectedItem.Value);
            userDetail.FirstName = tbFirstName.Text.TrimEnd();
            userDetail.LastName = tbLastName.Text.TrimEnd();
            userDetail.ContactNumber = tbContactNumber.Text.TrimEnd();

            UpdateUserDetail(userDetail);
            lblMessage.Text = "Update Successful!";
            ToggleButton(false);
        }

        protected void btnCancel_Click(object sender, EventArgs e) {
            ToggleButton(false);
        }

The ToggleButton() method is a method that returns a boolean type which is responsible for toggling the visibility of each buttons in the form during Edit,Update,cancel and Delete mode.

The UpdateUserDetail() is a method that takes UserDetail as the parameter. This method is the one who calls the UpdateUser() method from the UserManager class.

At btnUpdate_Click event we create an instance of the UserDetail class and assign the values from the form to the corresponsing fields. After that we call the method UpdateUserDetail() and pass the UserDetail object as the parameter.

Here's the output below when running it on the browser:

On initial load:

After selecting an item from the DropDownList

On Edit Mode (after clicking the edit button)

After Update

STEP 3: Deleting data from the Form

Now lets implement the deletion part of the program. In the UserManager class add this method below:

       public void DeleteUser(int userID) {
            var user = (from o in dre.SysUsers
                        where o.SysUserID == userID
                        select o).First();

            dre.DeleteObject(user);
            dre.SaveChanges();
        }

Just like the UpdateUser() method. We query the SysUser object based on the SysUserID and then assign the result in the variable user. After that we call the DeleteObject() to perform delete and then call the SaveChanges() method to reflect the changes to the database.

Here's the code in the code behind for the deletion:

        protected void btnDelete_Click(object sender, EventArgs e) {
            if (ddlUser.SelectedItem.Value != "0") {

                //Perform the Delete
                UserManager userMgr = new UserManager();
                userMgr.DeleteUser(Convert.ToInt32(ddlUser.SelectedItem.Value));

                //Re-bind the DropDownList
                ddlUser.Items.Clear();
                BindUserNames();

                //Clear the form fields
                tbFirstName.Text = string.Empty;
                tbLastName.Text = string.Empty;
                tbContactNumber.Text = string.Empty;

                lblMessage.Text = "Delete Successful!";

            }
            else {
                lblMessage.Text = "Please select name from the list first.";
                lblMessage.ForeColor = System.Drawing.Color.Red;
            }
        }

Since we don’t want users to delete the information right away, we need to prompt them a confirmation message if they wish to continue the deletion or not. To do this we could simply hook up the javascript confirm function in the delete button. Take a look at the highlighted code below:

<asp:Button ID="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click" OnClientClick="return confirm('The selected user information will be deleted. Do you wish to continue?');return false;" />

Here's the output below when running the page and perform the delete:

On Deletion:

After Deletion:

That's it! I hope someone find this post useful!

Technorati Tags: Entity Framework

Entity Framework - Fetching and Populating the Data in the Form

Vincent Maverick Durano — Mon, 04 Apr 2011 11:41:14 GMT

In Part 1 we've talked about how to insert data to the database with Entity Framework. In this part I'm going to demonstrate how to fetch the data from the database and populate the form fields with Entity Framework.

STEP 1: Setting up the Form

To get started let's go ahead and fire-up visual studio and add a new WebForm. For the simplicity of this demo I just set up the form like this:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:DropDownList ID="ddlUser" runat="server" AppendDataBoundItems="true">
        <asp:ListItem Value="0">--Select--</asp:ListItem>
    </asp:DropDownList>
    <br />First Name:
    <br /><asp:TextBox ID="tbFirstName" runat="server" />
    <br />Last Name: 
    <br /><asp:TextBox ID="tbLastName" runat="server" />
    <br />Contact Number: 
    <br /><asp:TextBox ID="tbContactNumber" runat="server" />
</asp:Content>

As you can see there's nothing fancy in the mark-up above. What we want to do here is we are going to populate the DropDownList "ddlUser" with the list of names from the database and then populate the remaining textbox with the details based on the selected name from the dropdownlist. And since we only want to display the information in the page so I set the ReadOnly attribute in the TextBox to true.

STEP 2: Creating the View Model

If you remember in Part 1 particularly in STEP 4, we had an Object Manager Class for each table which is responsible for handling any operations in the database and since we are going to fetch the list of names from the database then we will add a method in UserManager class.

As a recap, Entity Framework will generate the business objects and manage Data Access within the application. As a result, the class SysUser is automatically created by EF and it features all the fields in the database table as properties of the class.

I don't want to use this class for listing all names of the users. It would be wasteful as EF will bring back all information in the table inclusing the LastName, ContactNumber, SysUserLogIn and Password. All we need for populating the DropDownList is the SysUserID and FirstName. So I decided to create a separate class that just holds these properties:

namespace WebAppDemo.Model.ViewModel {
    public class UserName {
        public int SysUserID { get; set; }
        public string FirstName { get; set; }
    }
}

Also I created a separate class for listing the user detail information and create the necessary fields that I need to use like below:

namespace WebAppDemo.Model.ViewModel {
    public class UserDetail {
        public int SysUserID { get; set; }
        public string FirstName { get; set; }
        public string Lastname { get; set; }
        public string ContactNumber { get; set; }
    }
}

Both those classes above are stored under Model -> ViewModel folder within the application, as you can probably guess from the namespaces they have ;).

Now since we already have the fields we need for populating the DropDownList and the form then we can start adding new methods for fecthing the list of names and user details in the UserManager class. Here's the code block below:

using System.Collections.Generic;
using System.Linq;
using WebAppDemo.Model.DB;
using WebAppDemo.Model.ViewModel;

namespace WebAppDemo.Model {
    public class UserManager {

        private DeveloperReportEntities dre = new DeveloperReportEntities();

        public IEnumerable<UserName> GetUserFirstName() {
            var user = from o in dre.SysUsers
                       select new UserName {
                           SysUserID = o.SysUserID,
                           FirstName = o.FirstName
                       };
            return user.ToList();
        }

        public IEnumerable<UserDetail> GetUserDetail(int userID) {
            var user = from o in dre.SysUsers
               where o.SysUserID == userID
                       select new UserDetail {
                           SysUserID = o.SysUserID,
                           FirstName = o.FirstName,
                           LastName = o.LastName,
                           ContactNumber = o.ContactNumber
                       };
            return user.ToList();
        }

    }
}

The code above is the LINQ syntax for querying data. As you can see we query the SysUser object based on the parameter we passed on the GetUserFirstName() method. Once we invoke the LINQ ToList() function, this LINQ query will issue a parameterize SQL query to the database in which the SQL Server can understand and then bring back the results to the Entity Model.

The GetUserFirstName is a method that gets all the User FirstName along with the SysUserID. This method returns an IEnumrable of UserName class. The GetUserDetail() is a method that gets the user detail information based on the ID passed on to the query. This method returns a List of UserDetail class.

One of the cool things about EF is we don’t need to worry about how the query is being constructed because EF will take care of that for you including mapping of the data types from your table columns, mapping relationships between tables, etcetera and etcetera. Always keep in mind that EF is an ORM (Object Relational Mapper) and so we don’t need to deal directly with databases, tables and columns but instead we deal with the objects that is in the Entity and query the data against it using LINQ syntax.

STEP 3: Populating the DropDownList

Now lets proceed to the code behind file of the WebForm and populate the DropDownList. Here's the code block for binding the dropdownlist control in the webform. Typically we do this at Page_Load event within Not IsPostBack block like below:

using System;
using WebAppDemo.Model;

namespace WebAppDemo {
    public partial class WebForm2 : System.Web.UI.Page {

        private void BindUserNames() {
            UserManager userMgr = new UserManager();
            ddlUser.DataSource = userMgr.GetUserFirstName();
            ddlUser.DataTextField = "FirstName";
            ddlUser.DataValueField = "SysUserID";
            ddlUser.DataBind();
        }
        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack)
                BindUserNames();
        }
    }
}

running the code above will display something like this in the browser:

STEP 4: Populating the Form with the User Details

Now we already have the list of first names in the DropDownList, the next step is to populate the TextBox in the form with the other user information based on the selected item from the DropDownList. Here's the code block below:

       private void PopulateFormFieds(int userID) {
            UserManager userMgr = new UserManager();
            var result = userMgr.GetUserDetail(userID);
            if (result.Count > 0) {
                var user = result.First();
                tbFirstName.Text = user.FirstName;
                tbLastName.Text = user.LastName;
                tbContactNumber.Text = user.ContactNumber;
            }
            else {
                //NO RECORDS FOUND.
                tbFirstName.Text = string.Empty;
                tbLastName.Text = string.Empty;
                tbContactNumber.Text = string.Empty;
            }
            
        }


        protected void ddlUser_SelectedIndexChanged(object sender, EventArgs e) {
            PopulateFormFieds(Convert.ToInt32(ddlUser.SelectedItem.Value));
        }

As you can see the code above is very straight forward. The PopulateFormFieds() is aboviously a method for populating the TextBox with the user detail information. The first line in the method creates an instance of the UserManager class and call the method GetUserDetail and pass along the userID as the parameter. We then store the results in the result variable and check if the result count is greater than 0. If it is greater than 0 then that means there are data returned based on the query we issued and fill the TextBox with the corresponding field data.

Here's the output below after selecting an item from the DropDownList:

That's it! I hope someone find this post useful.

Technorati Tags: Entity Framework

Entity Framework - Inserting Data to Database

Vincent Maverick Durano — Mon, 04 Apr 2011 03:59:48 GMT

Few months ago I wrote a series of articles regarding how to Insert, Update, Fetch and Delete data in the form using LINQ to SQL. You can view the series of articles below:

In this article I'm going to demonstrate the basics on how to work with MS Entity Framework. Basically in this part I'm going to show you how to add data from the WebForm to the database using the MS Entity Framework.

As an overview, ADO.NET Entity Framework (EF) is an object-relational mapping (ORM) framework for the .NET Framework.EF enables developers to create data access applications by programming against a conceptual application model instead of programming directly against a relational storage schema. The goal is to decrease the amount of code and maintenance required for data-oriented applications. Entity Framework applications provide the following benefits:

    * Applications can work in terms of a more application-centric conceptual model, including types with inheritance, complex members, and relationships.
    * Applications are freed from hard-coded dependencies on a particular data engine or storage schema.
    * Mappings between the conceptual model and the storage-specific schema can change without changing the application code.
    * Developers can work with a consistent application object model that can be mapped to various storage schemas, possibly implemented in different database management systems.
    * Multiple conceptual models can be mapped to a single storage schema.
    * Language-integrated query (LINQ) support provides compile-time syntax validation for queries against a conceptual model.

You can refer the link below for more details about Entity Framework: http://msdn.microsoft.com/en-us/library/aa697427%28v=vs.80%29.aspx

STEP 1: Setting up the project

For this demo, I'm going to use Visual Studio 2010. Now lets go ahead and fire up Visual Studio and then select File -> New Project -> Visual C# -> Web - ASP.NET Web Application and then name the application the way you want and then click OK to generate the default files.

STEP 2: Adding the EDMX file

Now add a new folder under the root of the application and name it as "Model" and within that folder add another folder and name it as "DB". The application structure would look something like below:

After that right click on the "DB" folder and select Add -> New Item -> Data -> ADO.NET Entity Data Model. See below screenshot for more clearer view:

Noticed that I named the entity as "SampleModel" just for the purpose of this demo. You may want to name it to a more appropriate name based on your requirements but for this example let's just use "SampleModel". Now click Add to continue and on the next step select "Generate from database" and click Next. On the next step you can connect or browse to the database that you want to use in the application and test the connection string by clicking on the "Test Connection" button and if it succeeds then you can continue by clicking OK and then Next.

Note that in this example I created a simple database called "DeveloperReport.mdf" and added it into the application's App_Data folder and use it as our database for this demo. See the screen shot below:

On the next step we can add the table(s), views or stored procedures that we want to use in the application by selecting the checkbox. See below screenshot:

Noticed that I've only selected the "SysUser" table. This is because we are going to use this table for doing insert and we don't need anything else. Now click on Finish button to generate the entity model for you. See the screenshot below:

What happens there is that EF will automatically generates the Business object for you within the Entity Data Model(EDM) that we have just created and let you query against it.The EDM is the main gateway by which you retrieve objects from the database and resubmit changes.

STEP 3: Setting up the form

Since we already have our model in place then let's go ahead a set up our GUI. Let's add a new webform by right clicking on the project and select Add -> New Item -> Web -> Webform using Master Page and then click Add. For the simplicity of this demo I just set up the GUI like below:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebAppDemo.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h1>Add New</h1>
    <table>
        <tr>
            <td>First Name</td>
            <td><asp:TextBox ID="tbFirstName" runat="server" /></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><asp:TextBox ID="tbLastName" runat="server" /></td>
        </tr>
        <tr>
            <td>Contact Number</td>
            <td><asp:TextBox ID="tbContactNumber" runat="server" /></td>
        </tr>
        <tr>
            <td>Login ID</td>
            <td><asp:TextBox ID="tbLoginID" runat="server" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><asp:TextBox ID="tbPassword" runat="server" TextMode="Password" /></td>
        </tr>
    </table>
    <br />
    <asp:Label ID="lblMessage" runat="server" />
    <br />
    <asp:Button ID="btnAdd" runat="server" Text="Add" />
</asp:Content>

STEP 4: Creating the Object Manager class

The next step that we are going to do is create an object manager class that would handle the (CRUD operations) create,update,fetch and delete of a certain table. The purpose of this class is to separate the actual data opertions from our code behind and to have a central class for handling insert,update,fetch and delete operations. But please note that in this example I'm only doing the insert part in which a user can add new data from the GUI to the database. I'll talk about how to do the update,fetch and delete in EF in my next article. So this time we'll just focus on the insertion part first.

Now right click on the "Model" folder and add a new class by selecting Add -> Class and since we are going to manipulate the SysUser table then we will name the class as "UserManager". Here's the code block for the "UserManager.cs" class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using WebAppDemo.Model.DB;

namespace WebAppDemo.Model {
    public class UserManager {

        private DeveloperReportEntities dre = new DeveloperReportEntities();

        public void Add(string firstName, string LastName,string contactNumber, string loginID, string password) {
            SysUser user = new SysUser();
            user.FirstName = firstName;
            user.LastName = LastName;
            user.ContactNumber = contactNumber;
            user.SysUserLoginID = loginID;
            user.SysPassword = password;

            dre.AddToSysUsers(user);
            dre.SaveChanges();
        }
    }
}

STEP 5: Adding new data to database

Now switch to the WebForms code behind part and create a method that would call the object manager class to do insertion. Here's the code block below:

using System;
using WebAppDemo.Model;

namespace WebAppDemo {
    public partial class WebForm1 : System.Web.UI.Page {

        private void InsertUserInfo(string firstName, string LastName, string contactNumber, string loginID, string password) {
            UserManager userMgr = new UserManager();
            userMgr.Add(firstName, LastName, contactNumber, loginID, password);
        }

        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void btnAdd_Click(object sender, EventArgs e) {
            //You may validate the data first here
            //But assuming the data that was supplied are correct and valid
            InsertUserInfo(tbFirstName.Text,
                           tbLastName.Text,
                           tbContactNumber.Text,
                           tbLoginID.Text,
                           tbPassword.Text);

            lblMessage.Text = "Data Inserted!";

        }
    }
}

Note that I have never included some basic validations on the form such us data inputs, data formats and loginID and password

validation because I want to keep this demo as simple as possible. In real projects you should ensure that all data inputs are validated before sumbitting it to the database.

Here's the sample screen shot when viewing the page in the browser:

And here's the screenshot of the SysUser table after inserting the data from the WebForm:

That's it! I hope someone find this post useful!

Technorati Tags: Entity Framework,ASP.NET,C#