CRUD operations with PetaPoco and ASP.NET MVC

In this post we are going to see how we can do CRUD operations with ASP.NET MVC and PetaPoco Micro ORM.

What is PetaPoco?

Petapoco is a tiny ORM developed by topten software. As per them it’s a tiny, fast, single-file micro-ORM for .NET and Mono.
  • Like Massive it's a single file that you easily add to any project
  • Unlike Massive it works with strongly typed POCO's
  • Like Massive, it now also supports dynamic Expandos too - read more
  • Like ActiveRecord, it supports a close relationship between object and database table
  • Like SubSonic, it supports generation of poco classes with T4 templates
  • Like Dapper, it's fast because it uses dynamic method generation (MSIL) to assign column values to properties

Features of PetaPoco:

As per topten software it contains following features.
  • Tiny, no dependencies... a single C# file you can easily add to any project.
  • Works with strictly undecorated POCOs, or attributed almost-POCOs.
  • Helper methods for Insert/Delete/Update/Save and IsNew
  • Paged requests automatically work out total record count and fetch a specific page.
  • Easy transaction support.
  • Better parameter replacement support, including grabbing named parameters from object properties.
  • Great performance by eliminating Linq and fast property assignment with DynamicMethod generation.
  • Includes T4 templates to automatically generate POCO classes for you.
  • The query language is SQL... no weird fluent or Linq syntaxes (yes, matter of opinion)
  • Includes a low friction SQL builder class that makes writing inline SQL much easier.
  • Hooks for logging exceptions, installing value converters and mapping columns to properties without attributes.
  • Works with SQL Server, SQL Server CE, MySQL, PostgreSQL and Oracle.
  • Works under .NET 3.5 or Mono 2.6 and later.
  • Experimental support for dynamic under .NET 4.0 and Mono 2.8
  • NUnit unit tests.
  • OpenSource (Apache License)
  • All of this in about 1,500 lines of code

How to consume ASP.NET WebAPI from jQuery

Before some months Microsoft has launched WebAPI framework for building and consuming HTTP services. This WebAPI can be called from anything like from mobile sites to JavaScript anything. I thought it will be a good idea to call a WebAPI from jQuery.

In this post I am going to explain how to consume ASP.NET WebAPI from jQuery.

Creating a basic WebAPI:

To create a web API you need to install ASP.NET MVC 4.0 and then you create a new project for MVC .

How to Create Webp API in Visual studio 2012

Now once you click Ok. It will ask for type of project. You want to create you need to select Web API there.

What’s new in ASP.NET and Web Tools 2012.2 Release Candidate

Recently before some time, Scott Gu announced ASP.NET and Web Tools 2012.2 Release Candidate. I have downloaded it and used it for a while and I have found following new things.

ASP.NET Enhancements:

  • New facebook asp.net mvc template is  there. Creating facebook application with asp.net mvc become very easy. In just a few step you can easily create facebook application and get data of users and friends of facebook.
  • Real Time Signal R support is there. You can easily create chat kind of applications with it. You can also take advantage of new web socket in .NET 4.5.
  • New updates with ASP.NET WEB Api now supports OData, Integrated tracing and automatically generating help document for your api
  • ASP.NET Friendly URLs: This feature makes developers life very easy with creating SEO friendly and cleaner looking URLs with out .aspx extension. The Friendly URLs feature also makes it easier for developers to add mobile support to their applications with support for mobile .ASPX pages and  supporting switching between desktop and mobile views.  It can be used with existing ASP.NET v4.0 applications
  • Enhancement to Web publishing
  • All new single page application template with knock out JavaScript library and restful UI.

Getting started with Twitter Bootstrap and ASP.Net MVC

In this blog I am going explain how we are  going integrate Twitter Bootstrap library with ASP.Net MVC.

What is Twitter bootstrap:

Twitter Bootstrap is open source library created by Twitter. As per twitter it’s Sleek, intuitive, and powerful front-end framework for faster and easier web development. It’s full featured framework for creating web sites. It includes CSS framework, JavaScript, JavaScript plug-ins,typography, Html scaffolding. There are lots of themes also available that are available so you can use that right away.

Integrating Twitter bootstrap with ASP.Net MVC:

Earlier we have to manually integrate Twitter bootstrap into the ASP.NET MVC like here. But now We have Twitter.Bootstrap.MVC4 Nuget packages that saves lots of time to adding bootstrap to MVC4 template. It’s very easily combines bootstrap into ASP.NET MVC application thanks  to it’s authors Matt Hinze and Eric Hexter.

As per Eric Hexter It’s provide following features.
  • JS and CSS bundling/minification of Twitter Bootstrap files the MVC4 way
  • Incorporate a jQuery validation fix to work with the bootstrap javascript
  • Razor Layout templates using Twitter Bootstrap markup.
  • Menus using Navigation Routes, including submenus and hiding menus by context(logged in vs anonymous)
  • Runtime Scaffolding – default Index, Edit and Detail views.. You provide thePOCOs and we will render the CRUDviews.
  • Post Redirect Getsupport using the Bootstrap Alert styles.
  • A Sample to show how to use all of this stuff

Multiple file upload with asp.net mvc and HTML5

Few days I have written a blog post about Multiple file upload with asp.net 4.5 and Visual studio 2012. It was greatly appreciated by the community and also been part of www.asp.net community daily spot light.  On that post one of my reader Ciwan Kurd has requested the asp.net mvc version of that post. So in this post I will explain how we can do multiple file upload with HTML5.

For this post I am going to use asp.net mvc 3 with HTML5 template and visual studio 2012 but you can use same techniques in any version of asp.net mvc.  First things we needs to do create a HTML form for the uploading file in asp.net mvc view so following is a code for that.

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
    <label for="file">Upload Image:</label>
    <input type="file" name="files" value="" multiple="multiple"/>
    <input type="submit" value="Upload Image" />
}

In above code that I have use @HTML.BeginForm to create a HTML form with multipart as this attribute is required to upload any kind of files on the server. I have mapped that form to upload action result. Also I have used the file input control with HTML5 multiple attribute which allow us to upload multiple files on the server. Now its time to write code in asp.net mvc controller. Following is a code for that.

Dividing web.config into multiple files in asp.net

When you are having different people working on one project remotely you will get some problem with web.config, as everybody was having different version of web.config. So at that time once you check in your web.config with your latest changes the other people have to get latest that web.config and made some specific changes as per their local environment. Most of people who have worked things from remotely has faced that problem. I think most common example would be connection string and app settings changes.

For this kind of situation this will be a best solution. We can divide particular section of web.config into the multiple files. For example we could have separate ConnectionStrings.config file for connection strings and AppSettings.config file for app settings file.

Most of people does not know that there is attribute called ‘configSource’ where we can  define the path of external config file and it will load that section from that external file. Just like below.

<configuration>
 <appSettings configSource="AppSettings.config"/>
 <connectionStrings configSource="ConnectionStrings.config"/>
</configuration>

And you could have your ConnectionStrings.config file like following.

ASP.NET Web API Basics

We have seen that now web is really becoming cross plate form and you can see your services or API can be exposed to any client. Till now one of big challenges is to choose platform for this kind of service. There are so many options available like web services, WCF services,Generic Handlers, directly writing responses on aspx page etc. There are plenty of options available and each one has their own pros and cons.  But now we have one simpler answer for that is ASP.NET Web API.

What is Web API?

ASP.NET Web API is a framework for building web API on the top of .NET framework. It’s a framework for building and consuming web services that can be use at broad range of clients like browsers,tablets phones etc. You can expose JSON or XML whatever you want to use.

Why to use Web API?

Think about a situation where a jQuery script that is making a ajax request and we need some thing who can expose data from the server to the client at that time WEB API can be very handy you can expose server data in XML or JSON form and you can make that call with simple http request. No lengthy code required to call WEB API.

File Upload in ASP.NET MVC3

If you are a web developer you often need to upload file on the web server or database. In today’s post I am going explain how we can upload file in ASP.NET MVC 3 with razor syntax.

So, first thing we need to create a view that will contain the file upload control. I am going to use an existing asp.net mvc template for this demo. So I have just modified the default Index view like following.

Dynamically creating meta tags in asp.net mvc

As we all know that Meta tag has very important roles in Search engine optimization and if we want to have out site listed with good ranking on search engines then we have to put meta tags. Before some time I have blogged about dynamically creating meta tags in asp.net 2.0/3.5 sites, in this blog post I am going to explain how we can create a meta tag dynamically very easily.

To have meta tag dynamically we have to create a meta tag on server-side. So I have created a method like following.

Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

I have done lots breadcrumb kind of things in normal asp.net web forms I was looking for same for asp.net mvc. After searching on internet I have found one great nuget package for mvpsite map provider which can be easily implemented via site map provider. So let’s check how its works. I have create a new MVC 3 web application called breadcrumb and now I am adding a reference of site map provider via nuget package like following.

URL–New HTML5 input element

In earlier post we have seen how the email input tag work in the browser. HTML5 comes with lots of new goodies and today we are going to see one of another new html5 input types URL.

In most of the sites once you fill your contact and personal information it will ask for your URL. Till now there is no specific type for URL and we have to manually validate the URL with the Java Script but now with the HTML5 you don’t have do that. It will automatically validate the URL. For the browsers that are not supporting this will work as normal input text box.

So let’s take a simple example of URL input type. I am going to use same ASP.NET MVC project that I have used for the earlier post. So Here is the code for that.

ASP.NET MVC 4.0 Mobile Template

Microsoft has released the much awaited ASP.NET MVC 4.0 developer preview and there are lots of features bundle with it. One of the greatest features is a mobile website. Yes, Now with ASP.NET MVC 4.0 you can create mobile site also. So let’s create a simple application and let’s see how it works.

To create mobile site first you need to click File->New Project->ASP.NET MVC 4.0 Web application. Like following.

Hello world ASP.NET MVC 4.0 Mobile site-www.dotnetjalps.com

Now once you click OK it will open a new another dialog like following where we have to choose the Mobile site.

Mobile Application with asp.net mvc 4.0-www.dotnetjalps.com

As you can see in above post I have selected Razor view Once you click it will create a new application like following. As you can see similar structure as normal MVC Application application below.

ASP.NET MVC 4.0 Mobile Structure-http://www.dotnetjalps.com

This view are based on the standard jQuery Mobile. So this can be viewed in any tablet or mobile device. So if you have IPad and IPhone both then it will work on both. You need not to different application for both. see the browser first I have selected standard IPad size of browser.

Ipad

Now lets see how it look in mobile. So I have made my browser same site as mobile. As you can see its working in both.

Mobile View with ASP.NET MVC 4.0-http://www.dotnetjalps.com

If you see the code of view you can see the razor syntax over there. Nothing change in razor syntax. But as you can see in below code you need to use Jquery mobile attributes like data-Role and other stuff which will convert standard HTML into mobile or device compatible website.

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

That's it. It’s very easy you can create mobile compatible site in few hours. Hope you like it. Stay tuned for more.. Till then happy programming.

Namaste!!

kick it on DotNetKicks.comShout it

First Review of ASP. NET MVC 4.0 Developer Preview

After so much buzz Microsoft has launched some of the new tools at build conference and ASP.NET MVC 4.0 Developer preview is one of them.

How I can install ASP.NET MVC 4.0 Developer preview?


There are three ways to install ASP.NET MVC 4.0 Developer preview
  1. You can download from following link-
  2. You can install ASP.NET MVC 4.0 Developer preview with web platform installer from following link-
  3. You can also install ASP.NET MVC 4.0 Developer Preview from following link-. If you don’t know about what is NuGet Package. Please visit following link of my blog.

ASP.NET MVC 4.0 and Visual Studio 2010:


There are lots of people thinking that for asp.net mvc 4.0 developer preview, you need to install Visual Studio11 Developer Preview. But that is not true.It works with both. You can also run ASP.NET MVC 4.0 developer preview with side by side with ASP.NET MVC 3.0. You can use any of above method to install asp.net mvc 4.0 developer preview on either of Visual Studio Version.
Creating ASP.NET MVC 4.0 Project with Visual Studio 2010
You can create new asp.net mvc project as same old method like File->New Project and ASP.NET MVC 4 Web Application.

ASP.NET MVC 4.0 Create Project Dialog- First Review

Once you click OK It will open a dialog where it will open a dialog like following.

Internet Application,Mobile Application with ASP.NET MVC 4.0

As you can see now there one more option for mobile application too. So this is one best thing in asp.net mvc 4.0. Now you can create mobile base application also. I will going to post about that in future posts.

Now I want to create Internet application I have selected and Clicked ‘OK’ and created new application. This will create basic mvc application. Now lets run application via F5 and it will look like following in browser.

New Template for ASP.NET MVC 4.0- First Review of ASP.NET MVC 4.0

As you can see in above image in browser Microsoft has given new template for asp.net mvc 4.0. Also there is new contact page in application. I will also going to post about this in future post.

That’s it. This was just a introduction post to ASP.NET MVC 4.0 Developer preview. There are lots of features are available in ASP.NET 4.0. I am going to explorer all this features in future posts. Hope you like it…Stay tuned for more.. Till then Happy programming.

Namaste!!

Shout it

kick it on DotNetKicks.com

ReCaptcha in ASP.NET MVC3

As a web developer we know what is captcha is. It’s way to confirm users as they are human.Following is captcha definition per WikiPedia.
A CAPTCHA (play /ˈkæptʃə/) is a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a person. The process usually involves one computer (a server) asking a user to complete a simple test which the computer is able to generate and grade. Because other computers are assumed to be unable to solve the CAPTCHA, any user entering a correct solution is presumed to be human. Thus, it is sometimes described as a reverse Turing test, because it is administered by a machine and targeted to a human, in contrast to the standard Turing test that is typically administered by a human and targeted to a machine. A common type of CAPTCHA requires the user to type letters or digits from a distorted image that appears on the screen.
You can find more details about that on following link.

http://en.wikipedia.org/wiki/CAPTCHA.

Google ReCaptcha Service:

Google provide Recaptcha service free of charge to confirm users whether they are human or computer. We can directly use the recaptcha service with there api. You have to create a private key for that and that key will validate domains against it. Even we can create the global key for all the keys. You can find more information about it from below link.

http://www.google.com/recaptcha/learnmore

ReCaptcha Web helpers in ASP.NET MVC 3:

As per I have also written in my previous post. ASP.NET Web helpers from Microsoft comes inbuilt with tools update. If you not installed it then you have to download NuGet package for it. You can refer my previous post for this.

Now we have all things ready its time to write ReCaptcha code in ASP.NET MVC. First we have create key for recaptcha service. I have created it via following link. It’s very easy.

https://www.google.com/recaptcha

Now let’s start coding. Recaptcha web helper renders a captcha control in your web form so you can validate this. Following is code which will render captcha control.
@ReCaptcha.GetHtml(theme: "red")
It's take four argument
  1. Theme- theme specify the color and look for ReCaptcha control. You can have to put theme name over there
  2. Language- You need to specify the captcha challenge language
  3. TabIndex- Tab Index for this control
  4. PublicKey- A unique public key which we have created for our domain.

Following is a code how to use above code in real time. I have updated standard logon control template for ASP.NET MVC.
@model CodeSimplifiedTest.Models.LogOnModel

@{
    ViewBag.Title = "Log On";
    ReCaptcha.PublicKey=@"6LedqMcSAAAAAJgiIjKlyzzV2czbGOPvij1tc39A";
}

<h2>Log On</h2>
<p>
    Please enter your user name and password. @Html.ActionLink("Register", "Register") if you don't have an account.
</p>

<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>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

@using (Html.BeginForm()) {
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

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

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

            <p>
               @ReCaptcha.GetHtml(theme: "red")
            </p>
           
        </fieldset>
    </div>
}

As you can see in above code for recaptcha public key and Recaptcha.GetHtml part. Now its time to captcha validation in server side code in controller. As I have used standard logon template for this.I have modified Logon Action Result in Account controller like following.

[HttpPost]
public ActionResult LogOn(LogOnModel model, string returnUrl)
{
    if(!ReCaptcha.Validate(privateKey:"6LedqMcSAAAAAJgiIjKlyzzV2czbGOPvij1tc39A"))
    {
        return Content("Failed");
    }
  
    if (ModelState.IsValid)
    {
        if (Membership.ValidateUser(model.UserName, model.Password))
        {
            FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
            if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/")
                && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\"))
            {
                return Redirect(returnUrl);
            }
            else
            {
                return RedirectToAction("Index", "Home");
            }
        }
        else
        {
            ModelState.AddModelError("", "The user name or password provided is incorrect.");
        }
    }

    // If we got this far, something failed, redisplay form
    return View(model);
}

Here I have validated the captcha control with public key and if validation failed then it will sent failed message. Now it’s time to run that in browser and let’s see output.

RecapthaControlOuput

That’s it. Its easy to integrate. Hope you like it..Stay tuned for more.. Till then Happy Programing..Namaste!!

Shout itkick it on DotNetKicks.com

Chart Helpers in ASP.NET MVC3- Create chart with asp.net mvc3

I am exploring ASP.NET MVC3 and everyday I am learning something new. In today’s post I am going to explain how we can create chart with ASP.NET MVC3.

Chart is one of greatest way of expressing figures. We all need that functionality in any commercial application. I am still remembering old days with ASP.NET  where we have to use the third party controls for charts or we have to create it with the use of CSS and Server side controls. But now with ASP.NET MVC Helpers you can very easily create chart in few lines of code.

ASP.NET MVC Chart helper and other helpers comes inbuilt with the latest ASP.NET Tools update. If you don’t have ASP.NET MVC Chart helpers then you can find more information about it from here.

http://haacked.com/archive/2011/04/12/introducing-asp-net-mvc-3-tools-update.aspx

But still if you have not updated it then don’t worry about it. There is nuget package called “ASP.NET Webhelper Library”. You can add that package like following and still use same functionality.

ChartHelper-ASP.NET Web Helpers Library Pacakge

Now once you have all set for reference. We can start working on coding part. So draw a chart I have taken simple example like number of records vs time take chart. This Chart Helper support there types of cjart.
  1. Bar Chart
  2. Pie Chart
  3. Column Chart
In this example we are going to use Bar Chart. Following is code for that. I have create one simple action result called “DrawChart” which will return chart as PNG format.

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

namespace CodeSimplifiedTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        public ActionResult DrawChart()
        {
            var chart = new Chart(width: 300, height: 200)
                .AddSeries(
                            chartType: "bar",
                            xValue: new[] { "10 Records", "20 Records", "30 Records", "40 Records" },
                            yValues: new[] { "50", "60", "78", "80" })
                            .GetBytes("png");
            return File(chart, "image/bytes");
        }
    }
}

Here you can see that first I have included System.Web.Helper name space on top and then in DrawChart Action Result I have created chart variable where I have specified the height and width of chart and in add series method of it I have provided the chart type and x axis and y axis value. Now as we have to display it as image so for that I have used @URL.Action to point src to our Action Result DrawChart like following.
<img src="@Url.Action("DrawChart")" alt="Drawing chart with HTML Helper" />

Now let’s run this application in browser via pressing Ctrl+F5 and following is the output as expected.

Output

That’s it. You can see its very to create any kind of chart with Chart Helpers in ASP.NET MVC 3. Hope you like it. Stay tuned for more.. Till then happy programming and Namaste!!

Shout itkick it on DotNetKicks.com

Creating Basic RSS Reader in ASP.NET MVC 3

In this post I am going to explain you how we can create a basic RSS Reader with the help of Linq-To-Xml and ASP.NET MVC3 Razor. Those who are writing or reading Blogs already knows what is RSS Reader. But those who does not know What is RSS. Below is the definition for RSS as per Wikipedia.


RSS (originally RDF Site Summary, often dubbed Really Simple Syndication) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format.[2] An RSS document (which is called a "feed", "web feed",[3] or "channel") includes full or summarized text, plus metadata such as publishing dates and authorship.
 

You can find more information about RSS from the following links.

Now let’s start writing code creating a Basic RSS Reader. So first We need two things to create RSS Reader. A RSS Entity class which hold properties for RSS and Another method which populate IEnumerable of particular RSS Class. We are creating this example with ASP.NET So I have create One Model class called RSS Like following.
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using System.Text.RegularExpressions;

namespace CodeSimplified.Models
{
public class Rss
{
public string Link { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}

Now our entity class is ready. Now we need a class and a method which will return IEnumerable of RSS Class. So I have created a Static Class RSS Reader which has “GetRSSFeed” Method which return RSS Feeds like following.

using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using System.Text.RegularExpressions;

namespace CodeSimplified.Models
{
public class RssReader
{
private static string _blogURL = "http://feeds.feedburner.com/blogspot/DotNetJalps";
public static IEnumerable<Rss> GetRssFeed()
{

   XDocument feedXml = XDocument.Load(_blogURL);
   var feeds = from feed in feedXml.Descendants("item")
               select new Rss
               {
                   Title = feed.Element("title").Value,
                   Link = feed.Element("link").Value,
                   Description = Regex.Match(feed.Element("description").Value, @"^.{1,180}\b(?<!\s)").Value

               };

   return feeds;

}
}
}

As you can see in above code. I am loading RSS feed with XDcoument Class with my Blog RSS feed URL and Then I am populating RSS Class Enumerable with the help of the Linq-To-XML. Now We are ready with Our Model classes so Now it’s time to Add ActionResult in Home Controller. So I have added Action Result which return View with RSS IEnumerable like following.

public ActionResult RssReader()
{
    return View(CodeSimplified.Models.RssReader.GetRssFeed());
}

Now everything is ready. So its time to create a view. So I have created strongly typed view for RSS Model class like following.

@model IEnumerable<CodeSimplified.Models.Rss>
@{
ViewBag.Title = "RssReader";
}

<h2>RssReader</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
   Title
</th>
<th>
   Description
</th>
<th>
   Link
</th>
</tr>

@foreach (var item in Model) {
<tr>
<td>
   <a href="@item.Link" target="_blank">@Html.Encode(item.Title)</a>
</td>
<td>
  @System.Web.HttpUtility.HtmlDecode(item.Description)
</td>
<td>
   <a href="@item.Link" target="_blank">More</a>
</td>
</tr>
}
</table>

Let's run application via pressing F5 and Following is the output as expected.


RssReader

So that’s it. Isn’t that cool? With the few lines of code we have created a Basic RSS Reader. Hope you like it. Stay tuned for more.. Till then Happy Programming..

Shout itkick it on DotNetKicks.com

Setting default value for @Html.EditorFor in asp.net mvc

Yesterday one of my friend asked me to set default value for @HTML.EditorFor in ASP.NET MVC. So I decided to write this blog post. In this blog post I am going to Explain How we create Default values for model Entities. So Let’s start this via taking a simple example Model class called User. In User Model class I have created two properties UserName and UserJoinedDate. Following is a code for that.
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;



namespace CodeSimplified.Models

{

public class User

{

    private DateTime _userJoinDate = DateTime.Now;



    public DateTime UserJoinDate

    {

        get

        {

            return _userJoinDate;

        }

        set

        {

            _userJoinDate = value;

        }

    }



    public string UserName

    { get; set; }

}

}
As you can see in above class username is default property while for UserJoinedDate I have used old method of declaring properties. Where I have assigned a private variable with System DateTime.
Now let’s Create a Action Result User in Home Controller like following where I am returning a new User View like following.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;



namespace CodeSimplified.Controllers

{

public class HomeController : Controller

{

    public ActionResult Index()

    {

        ViewBag.Message = "Welcome to ASP.NET MVC!";



        return View();

    }



    public ActionResult About()

    {

        return View();

    }



    public ActionResult User()

    { return View(new CodeSimplified.Models.User()); }

}

}

Now Let’s Create User View from the action right click Add view like following. Here I have created Strongly Typed view like following.


User

Once you click Add It will add a new View like following.

@model CodeSimplified.Models.User



@{

ViewBag.Title = "User";

}



<h2>User</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>User</legend>



    <div class="editor-label">

        @Html.LabelFor(model => model.UserJoinDate)

    </div>

    <div class="editor-field">

        @Html.EditorFor(model => model.UserJoinDate)

        @Html.ValidationMessageFor(model => model.UserJoinDate)

    </div>



    <div class="editor-label">

        @Html.LabelFor(model => model.UserName)

    </div>

    <div class="editor-field">

        @Html.te

        @Html.EditorFor(model => model.UserName)

        @Html.ValidationMessageFor(model => model.UserName)

    </div>



    <p>

        <input type="submit" value="Create" />

    </p>

</fieldset>

}



<div>

@Html.ActionLink("Back to List", "Index")

</div>


Now everything is ready so Let's run that in browser. Following is the output as expected.

Browser

So that’s it. It’s very easy. Hope you liked it. Stay tuned for more.. Till then happy programming.

Shout itkick it on DotNetKicks.com

CRUD Operation with ASP.NET MVC and EFCodeFirst Part-1

I have been playing with EFCodeFirst now and I found it very interesting with that you could write your application fast and easily. So I have decided to write series of blog posts for CRUD Operations using ASP.NET MVC 3 and EFCodeFirstCTP5.0 . You can very easily create CRUD within some minutes of code. So let’s start first thing is to create an ASP.NET MVC 3 application like following.

ASP.NETMVCApplication

Once you click OK. It will ask for the which type of View your are going to use. I have used Razor and HTML5 Semantic like following.

RazorView

Now once we have create a application Now its time to add EFCodeFirst reference via NuGet. So Go to the Library Package Manager –> Manage Nuget Package Manager. It will open up a dialog like following. Search EFCodeFirst and then it will fine EFCodeFirst package like following.

EFCodeFirst

Once you click Install it will add reference to your ASP.NET MVC Application like following.

EntityFrameworkRerence

So now all the things are set Its time to code now. So first I have Create my Table which is very simple table called Customer like I have used in previous post. For your reference I am putting the create table script below.

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Customer](
   [CustomerId] [int] IDENTITY(1,1) NOT NULL,
   [FirstName] [nvarchar](50) NULL,
   [LastName] [nvarchar](50) NULL,
   [Address] [nvarchar](256) NULL,
   [City] [nvarchar](50) NULL,
CONSTRAINT [PK_Customer] PRIMARY KEY CLUSTERED
(
   [CustomerId] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY

Now let's create our entity class called customer like following.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace CodeSimplified.Models
{
   public class Customer
   {
       public int CustomerId { get; set; }
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string Address { get; set; }
       public string City { get; set; }
   }
}

Now Its time to create a our datacontext class So I have created MyDataContext class inherited from the DBContextClass . In that I have defined my customer dbset and Also I override the default plural behaviour in ModelCreating Table. DBSet will tell datacontext which table we need to refer. So following is code for that.

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Data.Entity.ModelConfiguration.Conventions.Edm.Db;

namespace CodeSimplified.Models
{
   public class MyDataContext:DbContext
   {
       public DbSet<Customer> Customer { get; set; }

       protected override void OnModelCreating(System.Data.Entity.ModelConfiguration.ModelBuilder modelBuilder)
       {
           modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
       }
   }
}

Now our database access stuff is ready now It’s time to create controller. So I have clicked controller folder and click on add new controller so add controller dialog box will appear like following.

AddController

It will create a controller class like following.

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

namespace CodeSimplified.Controllers
{
   public class CustomerController : Controller
   {
       //
       // GET: /Customer/

       public ActionResult Index()
       {
           return View();
       }

       //
       // GET: /Customer/Details/5

       public ActionResult Details(int id)
       {
           return View();
       }

       //
       // GET: /Customer/Create

       public ActionResult Create()
       {
           return View();
       }

       //
       // POST: /Customer/Create

       [HttpPost]
       public ActionResult Create(FormCollection collection)
       {
           try
           {
               // TODO: Add insert logic here

               return RedirectToAction("Index");
           }
           catch
           {
               return View();
           }
       }
      
       //
       // GET: /Customer/Edit/5

       public ActionResult Edit(int id)
       {
           return View();
       }

       //
       // POST: /Customer/Edit/5

       [HttpPost]
       public ActionResult Edit(int id, FormCollection collection)
       {
           try
           {
               // TODO: Add update logic here

               return RedirectToAction("Index");
           }
           catch
           {
               return View();
           }
       }

       //
       // GET: /Customer/Delete/5

       public ActionResult Delete(int id)
       {
           return View();
       }

       //
       // POST: /Customer/Delete/5

       [HttpPost]
       public ActionResult Delete(int id, FormCollection collection)
       {
           try
           {
               // TODO: Add delete logic here

               return RedirectToAction("Index");
           }
           catch
           {
               return View();
           }
       }
   }
}

Now once our controller is ready now its time to write some code for Index Action Result which we are going to have a list of customer. So I have changed Index Action Result like following to return customer view.

public ActionResult Index()
{
   using (var databaseContext=new Models.MyDataContext())
   {
       return View(databaseContext.Customer.ToList());
   }
}

Now let create a view from the controller. So Selected a view in right click Add View from Index Action Result. Here I have selected strongly typed view with Customer Model and selected list Template like following.

AddView

That’s it we are done with listing of the customer. Now its time to run our application and following is the output as expected.

Output

Hoped you like this…Stay tuned for more.. Till that happy programming.

Shout it

kick it on DotNetKicks.com

PetaPoco with parameterised stored procedure and Asp.Net MVC

I have been playing with Micro ORMs as this is very interesting things that are happening in developer communities and I already liked the concept of it. It’s tiny easy to use and can do performance tweaks. PetaPoco is also one of them I have written few blog post about this. In this blog post I have explained How we can use the PetaPoco with stored procedure which are having parameters. I am going to use same Customer table which I have used in my previous posts. For those who have not read my previous post following is the link for that.

Get started with ASP.NET MVC and PetaPoco
PetaPoco with stored procedures

Now our customer table is ready. So let’s Create a simple process which will fetch a single customer via CustomerId. Following is a code for that.

CREATE PROCEDURE mysp_GetCustomer
 @CustomerId as INT
AS
SELECT * FROM [dbo].Customer where  CustomerId=@CustomerId

Now we are ready with our stored procedures. Now lets create code in CustomerDB class to retrieve single customer like following.

using System.Collections.Generic;

namespace CodeSimplified.Models
{
  public class CustomerDB
  {
      public IEnumerable<Customer> GetCustomers()
      {
          var databaseContext = new PetaPoco.Database("MyConnectionString");
          databaseContext.EnableAutoSelect = false;
          return databaseContext.Query<Customer>("exec mysp_GetCustomers");

      }
      public Customer GetCustomer(int customerId)
      {
          var databaseContext = new PetaPoco.Database("MyConnectionString");
          databaseContext.EnableAutoSelect = false;
          var customer= databaseContext.SingleOrDefault<Customer>("exec mysp_GetCustomer @customerId",new {customerId});
          return customer;
      }
  }
}

Here in above code you can see that I have created a new method call GetCustomer which is having customerId as parameter and then I have written to code to use stored procedure which we have created to fetch customer Information. Here I have set EnableAutoSelect=false because I don’t want to create Select statement automatically I want to use my stored procedure for that. Now Our Customer DB class is ready and now lets create a ActionResult Detail in our controller like following

using System.Web.Mvc;

namespace CodeSimplified.Controllers
{
  public class HomeController : Controller
  {
      public ActionResult Index()
      {
          ViewBag.Message = "Welcome to ASP.NET MVC!";

          return View();
      }

      public ActionResult About()
      {
          return View();
      }

      public ActionResult Customer()
      {
          var customerDb = new Models.CustomerDB();
          return View(customerDb.GetCustomers());
      }
      public ActionResult Details(int id)
      {
          var customerDb = new Models.CustomerDB();
          return View(customerDb.GetCustomer(id));
      }
  }
}

Now Let’s create view based on that ActionResult Details method like following.

AddView

Now everything is ready let’s test it in browser. So lets first goto customer list like following.

CustomerList

Now I am clicking on details for first customer and Let’s see how we can use the stored procedure with parameter to fetch the customer details and below is the output.

CustomerDetails

So that’s it. It’s very easy. Hope you liked it. Stay tuned for more..Happy Programming.

Shout it

kick it on DotNetKicks.com

PetaPoco with stored procedures

In previous post I have written that How we can use PetaPoco with the asp.net MVC. One of my dear friend Kirti asked me that How we can use it with Stored procedure. So decided to write a small post for that. So let’s first create a simple stored procedure for customer table which I have used in my previous post. I have written simple code a single query that will return customers. Following is a code for that.

CREATE PROCEDURE mysp_GetCustomers
AS
SELECT * FROM [dbo].Customer
Now our stored procedure is ready so I just need to change my CustomDB file from the my previous post example like following.
using System.Collections.Generic;

namespace CodeSimplified.Models
{
  public class CustomerDB
  {
      public IEnumerable<Customer> GetCustomers()
      {
          var databaseContext = new PetaPoco.Database("MyConnectionString");
          return databaseContext.Query<Customer>("exec mysp_GetCustomers");

      }
  }
}

That's It. Now It's time to run this in browser and Here is the output.

Output

In future post I will explain How we can use PetaPoco with parameterised stored procedure. Hope you liked it.. Stay tuned for more.. Happy programming.

Shout it

kick it on DotNetKicks.com