Implement a simple captcha in C# .NET

• Create a page with name “Captcha.aspx”
• Place the following html code in body part of the page

IMG height="30" alt="" src=BuildCaptcha.aspx width="80">
asp:TextBox runat="Server" ID="txtCaptcha">
    <asp:Button runat="Server" ID="btnSubmit"
     OnClick="btnSubmit_Click"
       Text="Submit" />
     On “btnSubmit_Click” place the following code
         if (Page.IsValid && (txtCaptcha.Text.ToString() ==
         Session["RandomStr"].ToString()))
           {
             Response.Write("Code verification Successful");
           }
    else
{
  Response.Write( "Please enter info correctly");
}

• Include the following code in “BuildCaptcha.aspx"

Bitmap objBMP = new Bitmap(60, 20);
Graphics objGraphics = Graphics.FromImage(objBMP);
objGraphics.Clear(Color.Wheat);
objGraphics.TextRenderingHint = TextRenderingHint.AntiAlias;
  //' Configure font to use for text
      Font objFont = new Font("Arial", 8, FontStyle.Italic);
      string randomStr = "";
      char[] myArray = new char[5];
      int x;
   //That is to create the random # and add it to our string
     Random autoRand = new Random();
     for (x = 0; x < 5; x++)
{
  myArray[x] = System.Convert.ToChar(autoRand.Next(65,90));
  randomStr += (myArray[x].ToString());
}
     //This is to add the string to session, to be compared later
       Session.Add("RandomStr", randomStr);
    //' Write out the text
       objGraphics.DrawString(randomStr, objFont, Brushes.Red, 3, 3);
    //' Set the content type and return the image
  Response.ContentType = "image/GIF";
objBMP.Save(Response.OutputStream, ImageFormat.Gif);
objFont.Dispose();
objGraphics.Dispose();
objBMP.Dispose();

There you go you can test the page with captcha. Happy Programming

In earlier versions of ASP.NET (edition under ASP.NET 4.5), we didn't have any inbuilt functionality to add several files at the same time. ASP.NET FileUpload handle permits uploading just one file in a time. Alternate answers to add numerous files are third party controls like Telerik or Devexpress. We can also use various jQuery Plugin like Uploadify to attain comparable performance.

In ASP.NET 4.5, we can add multiple documents simultaneously making use of ASP.NET FileUpload control. In ASP.NET 4.5, FileUpload Control support HTML5 several attribute.

Under are the steps to add numerous information utilizing ASP.NET 4.5 :

1. In Visual Studio 2012, In Visual Studio 2012, create a new website using .Net 4.5 framework.
2. Add a new web form (for example FileUpload.aspx) in newly created website.
3. In code-beside file of FileUpload.aspx, write following code for FileUpload Control:

<asp:fileupload AllowMultiple="true" id="MultipleFileUpload" runat="server">
</asp:fileupload>

In above code, I have set AllowMultiple property of FileUpload Control to true.

Add one button to upload multiple files using FileUpload Control on button click.

<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

Write below code on button click event handler.

protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (MultipleFileUpload.HasFiles)
        {
            StringBuilder UploadedFileNames = new StringBuilder();

            foreach (HttpPostedFile uploadedFile in MultipleFileUpload.PostedFiles)
            {
                string FileName = HttpUtility.HtmlEncode(Path.GetFileName(uploadedFile.FileName));
                uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Files/"), FileName));
                UploadedFileNames.AppendFormat("{0}<br />", FileName);
            }
            Response.Write("Uploaded Files are : <br/>" + UploadedFileNames);
        }
    }

On button click, I am checking for multiple files and saving those files into Files folder of web application.
Compile source code and run the website application.

I had selected five images to upload. Once I had clicked on Upload button, all five images were uploaded successfully in Files folder.

Introduction

SPA stands for Single Page Application. Here I will demonstrate a simple SPA with ASP.NET MVC, Web API and Entity Framework. I will show a trainer profile and its CRUD operation using AngularJS, ASP.NET MVC, Web api and Entity Framework.

Step 1: Create a ASP.NET MVC application with empty template

• Open visual studio, Got to File->New->Project
• Select Template -> Visual C# -> Web -> ASP.NET MVC 4 Web application and click OK
• Select Empty Template and Razor as view engine

Step 2: Install required packages

Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.

• PM> Install-Package jQuery
• PM> Install-Package angularjs -Version 1.2.26
• PM> Install-Package Newtonsoft.Json
• PM> Install-Package MvcScaffolding

Step 3: Create Connection String

Create connection string and name DB name as SPADB
    <connectionStrings>
  <add name="SPAContext" connectionString="Data Source=.\sqlexpress;Initial Catalog=SPADB;Integrated Security=SSPI;" providerName="System.Data.SqlClient" />
</connectionStrings>

Step 4: Create model

Create Trainer model
    public class Trainer
{
    [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public long Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Venue { get; set; }
}

Step 5: Create Repository

Create repository for Trainer model.

Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to create repository. I used repository pattern for well-structured and more manageable.

PM> Scaffold Repository Trainer

After running the above command you will see SPAContext.cs and TrainerRepository.cs created in Model folder. For well manageability, I create a directory name Repository and put these two files in the Repository folder. So change the namespace as like SPA.Repository instead of SPA.Model. I also create a UnitOfWork for implement unit of work pattern.
The overall folder structure looks like following. 
SPAContext.cs
    public class SPAContext : DbContext
{
    public SPAContext()
        : base("SPAContext")
    {
    }
    // You can add custom code to this file. Changes will not be overwritten.
    //
    // If you want Entity Framework to drop and regenerate your database
    // automatically whenever you change your model schema, add the following
    // code to the Application_Start method in your Global.asax file.
    // Note: this will destroy and re-create your database with every model change.
    //
    // System.Data.Entity.Database.SetInitializer(new System.Data.Entity.DropCreateDatabaseIfModelChanges<SPA.Models.SPAContext>());
    public DbSet<SPA.Models.Trainer> Trainers { get; set; }
    public DbSet<SPA.Models.Training> Trainings { get; set; }
}
TrainerRepository.cs
    public class TrainerRepository : ITrainerRepository
{
    SPAContext context = new SPAContext();
    public TrainerRepository()
        : this(new SPAContext())
    {
    }
    public TrainerRepository(SPAContext context)
    {
        this.context = context;
    }
    public IQueryable<Trainer> All
    {
        get { return context.Trainers; }
    }
    public IQueryable<Trainer> AllIncluding(params Expression<Func<Trainer, object>>[] includeProperties)
    {
        IQueryable<Trainer> query = context.Trainers;
        foreach (var includeProperty in includeProperties)
        {
            query = query.Include(includeProperty);
        }
        return query;
    }
    public Trainer Find(long id)
    {
        return context.Trainers.Find(id);
    }
    public void InsertOrUpdate(Trainer trainer)
    {
        if (trainer.Id == default(long))
        {
            // New entity
            context.Trainers.Add(trainer);
        }
        else
        {
            // Existing entity
            context.Entry(trainer).State = System.Data.Entity.EntityState.Modified;
        }
    }
    public void Delete(long id)
    {
        var trainer = context.Trainers.Find(id);
        context.Trainers.Remove(trainer);
    }
    public void Save()
    {
        context.SaveChanges();
    }
    public void Dispose()
    {
        context.Dispose();
    }
}
public interface ITrainerRepository : IDisposable
{
    IQueryable<Trainer> All { get; }
    IQueryable<Trainer> AllIncluding(params Expression<Func<Trainer, object>>[] includeProperties);
    Trainer Find(long id);
    void InsertOrUpdate(Trainer trainer);
    void Delete(long id);
    void Save();
}
UnitOfWork.cs
public class UnitOfWork : IDisposable
{
    private SPAContext context;
    public UnitOfWork()
    {
        context = new SPAContext();
    }
    public UnitOfWork(SPAContext _context)
    {
        this.context = _context;
    }
    private TrainingRepository _trainingRepository;
 
    public TrainingRepository TrainingRepository
    {
        get
        {
            if (this._trainingRepository == null)
            {
                this._trainingRepository = new TrainingRepository(context);
            }
            return _trainingRepository;
        }
    }
    private TrainerRepository _trainerRepository;
    public TrainerRepository TrainerRepository
    {
        get
        {
            if (this._trainerRepository == null)
            {
                this._trainerRepository = new TrainerRepository(context);
            }
            return _trainerRepository;
        }
    }
    public void Dispose()
    {
        context.Dispose();
        GC.SuppressFinalize(this);
    }
}

Step 6: Add migration

• Run the following command to add migration
• PM> Enable-Migrations
• PM> Add-Migration initialmigration
• PM> Update-Database –Verbose

Step 7: Create API Controllers

Create Trainers api Controllers by clicking right button on Controller folder and scaffold as follows.

Step 8: Modify Controllers

Now modify the controllers as follows. Here I used unit of work pattern.
    public class TrainersController : ApiController
{
    private UnitOfWork unitOfWork = new UnitOfWork();
    public IEnumerable<Trainer> Get()
    {
        List<Trainer> lstTrainer = new List<Trainer>();
        lstTrainer = unitOfWork.TrainerRepository.All.ToList();
        return lstTrainer;
    }
    //// GET api/trainers/5
    public Trainer Get(int id)
    {
        Trainer objTrainer = unitOfWork.TrainerRepository.Find(id);
        return objTrainer;
    }
    public HttpResponseMessage Post(Trainer trainer)
    {
        if (ModelState.IsValid)
        {
            unitOfWork.TrainerRepository.InsertOrUpdate(trainer);
            unitOfWork.TrainerRepository.Save();
            return new HttpResponseMessage(HttpStatusCode.OK);
        }
        return new HttpResponseMessage(HttpStatusCode.InternalServerError);
    }
    private IEnumerable<string> GetErrorMessages()
    {
        return ModelState.Values.SelectMany(x => x.Errors.Select(e => e.ErrorMessage));
    }
    // PUT api/trainers/5
    public HttpResponseMessage Put(int Id, Trainer trainer)
    {
        if (ModelState.IsValid)
        {
            unitOfWork.TrainerRepository.InsertOrUpdate(trainer);
            unitOfWork.TrainerRepository.Save();
            return new HttpResponseMessage(HttpStatusCode.OK);
        }
        else
            return new HttpResponseMessage(HttpStatusCode.InternalServerError);
    }
    // DELETE api/trainers/5
    public HttpResponseMessage Delete(int id)
    {
        Trainer objTrainer = unitOfWork.TrainerRepository.Find(id);
        if (objTrainer == null)
        {
            return new HttpResponseMessage(HttpStatusCode.InternalServerError);
        }
        unitOfWork.TrainerRepository.Delete(id);
        unitOfWork.TrainerRepository.Save();
        return new HttpResponseMessage(HttpStatusCode.OK);
    }
}

Step 9: Create Layout and Home Controller

Create _Layout.cshtml in Views->Shared folder and create HomeController and create inext view of Home controller by right click on index action and add view. You will see index.cshtml is created in Views->Home
Home Controller
    public class HomeController : Controller
{
    //
    // GET: /Home/
 
    public ActionResult Index()
    {
        return View();
    }
}
_Layout.cshtml
    <html ng-app="registrationModule">
<head>
    <title>Training Registration</title>
</head>
<body>
    @RenderBody()
</body>
</html>
Index.cshtml
    @{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Home</h2>
<div>
    <ul>     
        <li><a href="/Registration/Trainers">Trainer Details</a></li>
        <li><a href="/Registration/Trainers/add">Add New Trainer</a></li>
    </ul>
</div>
<div ng-view></div>

Step 10: Create registrationModule

Create registrationModule.js in Scripts->Application. This is for angularjs routing.
    var registrationModule = angular.module("registrationModule", ['ngRoute', 'ngResource'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/Registration/Trainers', {
            templateUrl: '/templates/trainers/all.html',
            controller: 'listTrainersController'
        });
        $routeProvider.when('/Registration/Trainers/:id', {
            templateUrl: '/templates/trainers/edit.html',
            controller: 'editTrainersController'
        });
        $routeProvider.when('/Registration/Trainers/add', {
            templateUrl: '/templates/trainers/add.html',
            controller: 'addTrainersController'
        });
        $routeProvider.when("/Registration/Trainers/delete/:id", {
            controller: "deleteTrainersController",
            templateUrl: "/templates/trainers/delete.html"
        });
        $locationProvider.html5Mode(true);
    });

Step 11: Create trainerRepository

Create trainerRepository.js in Scripts->Application->Repository. This increase manageability for large application.
    'use strict';
//Repository for trainer information
registrationModule.factory('trainerRepository', function ($resource) {
    return {
        get: function () {
            return $resource('/api/Trainers').query();
        },
        getById: function (id) {
            return $resource('/api/Trainers/:Id', { Id: id }).get();
        },
        save: function (trainer) {
            return $resource('/api/Trainers').save(trainer);
        },
        put: function (trainer) {
            return $resource('/api/Trainers', { Id: trainer.id },
                {
                    update: { method: 'PUT' }
                }).update(trainer);
        },
        remove: function (id) {
            return $resource('/api/Trainers').remove({ Id: id });
        }
    };
});

Step 12: Create trainerController

Create trainerController.js in Scripts->Application->Controllers
    'use strict';
//Controller to get list of trainers informaion
registrationModule.controller("listTrainersController", function ($scope, trainerRepository, $location) {
    $scope.trainers = trainerRepository.get();
});
//Controller to save trainer information
registrationModule.controller("addTrainersController", function ($scope, trainerRepository, $location) {
    $scope.save = function (trainer) {
        trainer.Id = 0;
        $scope.errors = [];
        trainerRepository.save(trainer).$promise.then(
            function () { $location.url('Registration/Trainers'); },
            function (response) { $scope.errors = response.data; });
    };
});
//Controller to modify trainer information
registrationModule.controller("editTrainersController", function ($scope,$routeParams, trainerRepository, $location) {
    $scope.trainer = trainerRepository.getById($routeParams.id);
    $scope.update = function (trainer) {
        $scope.errors = [];
        trainerRepository.put(trainer).$promise.then(
            function () { $location.url('Registration/Trainers'); },
            function (response) { $scope.errors = response.data; });
    };
});
//Controller to delete trainer information
registrationModule.controller("deleteTrainersController", function ($scope, $routeParams, trainerRepository, $location) {
        trainerRepository.remove($routeParams.id).$promise.then(
            function () { $location.url('Registration/Trainers'); },
            function (response) { $scope.errors = response.data; });
});

Step 13: Create templates

Create all.html, add.html, edit.html, delete.html in templateds->trainers folder.
All.html
    <div>
    <div>
        <h2>Trainers Details</h2>
    </div>
</div>
<div>
    <div>
        <table>
            <tr>
                <th>Name </th>
                <th>Email </th>
                <th>Venue </th>
                <th>Action</th>
            </tr>
            <tr ng-repeat="trainer in trainers">
                <td>{{trainer.name}}</td>
                <td>{{trainer.email}}</td>
                <td>{{trainer.venue}}</td>
                <td>
                    <a title="Delete" ng-href="/Registration/Trainers/delete/{{trainer.id}}">Delete</a>
                    |<a title="Edit" ng-href="/Registration/Trainers/{{trainer.id}}">Edit</a>
                </td>
            </tr>
        </table>
    </div>
</div>
Add.html
    <form name="trainerForm" novalidate ng-submit="save(trainer)">
    <table>
        <tbody>
            <tr>
                <td>Trainer Name
                </td>
                <td>
                    <input name="name" type="text" ng-model="trainer.name" required ng-minlength="5" />
                </td>
            </tr>
            <tr>
                <td>Email
                </td>
                <td>
                    <input name="email" type="text" ng-model="trainer.email" />
                </td>
            </tr>
            <tr>
                <td>Venue
                </td>
                <td>
                    <input name="venue" type="text" ng-model="trainer.venue" />
                </td>
            </tr>
            <tr>
                <td class="width30"></td>
                <td>
                    <input type="submit" value="Save" ng-disabled="trainerForm.$invalid" />
                    <a href="/Registration/Trainers" class="btn btn-inverse">Cancel</a>
                </td>
            </tr>
        </tbody>
    </table>
</form>
Edit.html
    <form name="trainerFrom" novalidate abide>
    <table>
        <tbody>
            <tr>
                <td>
                    <input name="id" type="hidden" ng-model="trainer.id"/>
                </td>
            </tr>
            <tr>
                <td>Name
                </td>
                <td>
                    <input name="name" type="text" ng-model="trainer.name" />
                </td>
            </tr>
            <tr>
                <td>Email
                </td>
                <td>
                    <input name="email" type="text" ng-model="trainer.email" />
                </td>
            </tr>
            <tr>
                <td>Venue
                </td>
                <td>
                    <textarea name="venue" ng-model="trainer.venue"></textarea>
                </td>
            </tr>
            <tr>
                <td class="width30"></td>
                <td>
                    <button type="submit" class="btn btn-primary" ng-click="update(trainer)" ng-disabled="trainerFrom.$invalid">Update</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>

Step 14: Add references to the Layout

Modify the _Layout.cshtml to add references
_Layout.cshtml
    <html ng-app="registrationModule">
<head>
    <title>Training Registration</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-resource.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/Application/registrationModule.js"></script>
    <script src="~/Scripts/Application/Repository/trainerRepository.js"></script>
    <script src="~/Scripts/Application/Controllers/trainersController.js"></script>
</head>
<body>
    @RenderBody()
</body>
</html>
Now run you application and add, delete, modify and get all trainer information. Thanks for your patient!

To design layout of your web site is much more cumbersome. But you can easily design your website layout by bootstrap, you can make it responsive also.

Step 1: Create a ASP.NET MVC application with empty template

• Open visual studio, Got to File->New->Project
• Select Template -> Visual C# -> Web -> ASP.NET MVC  Web application and click OK
• Select Empty Template and Razor as view engine

Step 2: Install required packages

• Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.

PM> Install-Package bootstrap

Step 3: Download bootstrap theme

• Go to http://bootswatch.com/ . Download any theme (bootstrap.css) like below and pest the content in Contents -> bootstrap-main-theme.css file

Step 4: Create a Layout page

• Create a _Layout.cshtml in Views->Shared folder and add the following references.

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap theme test</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-main-theme.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
 </head>
<body>  
    <div>
        @RenderBody()
    </div>
</body>
</html>

Step 5: Create HomeController and index view

• Create HomeController and create index view. Right click on index action of home controller you will see index.cshtml file created in Views->Home folder. Modify the index.cshtml file like following

Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 <h2>Home Page</h2>

Step 6: Add Navigation bar

• If you go the preview of the theme you will see some sample code or documentation. You can customize later. To add navigation bar to the website I modify the _Layout.cshtml like following.

_Layout.cshtml

<!DOCTYPE html>
 <html>
<head>
    <title>Bootstrap theme test</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-main-theme.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
 </head>
<body>
    <div class="navbar navbar-inverse">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="navbar-collapse collapse navbar-inverse-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Active</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li class="dropdown-header">Dropdown header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left">
      <input type="text" class="form-control col-lg-8" placeholder="Search">
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Now run the application, you will get a nice layout. Thanks for your patient

The advantages of Stripe

Accepting payment cards on-line has not been less difficult than it's now. Businesses like Stripe have created it simple for builders like ourselves to include sophisticated payment methods into our internet programs without having to bother with the safety compliance and audits which are typically associated with payment card info storage.

Stripe lets you preserve customers’ details securely, create custom made payment structures, and also develop customized payment programs for multiple or one customers.

Stripe.Net

Stripe.Net is definitely an open resource library to the Microsoft .NET Framework that permits straightforward integration into your .NET tasks. Today we are going to only be masking the integration of Stripe.Net into an ASP.NET undertaking, however you can study the documentation and find out more regarding how to use the Stripe.Net library on the Stripe.Net Github repository.

Our Project

For your goal of the tutorial, we are going to be producing a brand new ASP.Net internet application. Should you already have an application that you simply want to combine Stripe.Web with, which is amazing! If not, or for those who have by no means developed an ASP.Net application, follow these initial step to obtain up and running.

Very first, we'd like to create the venture. We will do that by opening up Microsoft Visual Studio, and picking Visual C# > Web > ASP.Net Web Forms Application. Notice that we have been utilizing the .NET 4.5 Framework on the best from the window, really feel totally free to change the framework model in your liking. Push OK.

Referencing the Stripe.Net Library

When you have your software open up in Visual Studio, you’re likely to require to put in the Stripe.Net library to use it is classes and methods inside your program. By reading the Stripe.Net Github page, we have discovered the library is obtainable like a NuGet package in Visual Studio, which is the optimal way to integrate the library, so that is how we’re going to do it. Within your solution explorer locate the References listing and proper click on it. You will see a choice labelled “Manage NuGet Packages…”, click that alternative within the dropdown menu.

You'll be prompted with the Control NuGet Packages window. Navigate down the remaining menu and click on Online. Now you'll be able to kind Stripe.Net to the lookup bar in the top left corner in the window, and (if you are related to the world wide web) you will note the Stripe.Net library seem within the center of the window. Set up the package and you'll notice that it installs the json.NET and Stripe.NET package inside the references listing. The explanation this occurs, would be that the Stripe.Net library relies on the json.NET library, so that you must include it into your references directory to ensure that Stripe.Net to operate.

Authentication

The last step of integration in this process, is verifying your account with Stripe. The designated authentication method that Stripe has provided for us is their developer API Key. This key is unique to each Stripe user and verifies your account so Stripe knows which user account all of your transactions belong to.

We only need to place this API Key into our application once by opening up the Web.config file and placing the following code before the </configuration> tag.

<appSettings>
  <add key="StripeApiKey" value="[your API Key]"/>
</appSettings>

Now you’re all set to use the Stripe.NET library in your application! Just remember to reference the json.NET and Stripe.NET libraries in any files you are using Stripe.NET functionality.

Within this tutorial we'll make use of the most recent ASP.Net 4.5 methods to come back up with a asynchronous gadget web page via help of Visual Studio Express.

The sample software that we're going to use listed here makes use of new async and awaits key phrases and they're obtainable in .NET 4.5 and Visual Studio 2012. This allows the complier to hold the responsibility of getting care from the complex transformations that are necessary for asynchronous programming. Also the compiler will allow you to write the code using the C#'s synchronous manage movement constructs. Therefore the compiler on its own applies the transformations which can be necessary to deploy call-backs. This is done in order to prevent blocking threads.

ASP.Net asynchronous web pages has to comprise in the Web page directive and Async feature label set to “true”. The code detailed under demonstrates the Page directive with all the value of Async attribute set to accurate for the DeviceAsync.aspx page.

<%@ Page Async="true" Language="C#" AutoEventWireup="true"
    CodeBehind="DeviceAsync.aspx.cs" Inherits="WebAppAsync.DeviceAsync" %>

The below code reflects the Device synchronous Page_Load method as well as the DeviceAsync asynchronous page. In case the browser supports the HTML5 <mark> element, the changes can be seen in DeviceAsync in yellow highlight.

protected void Page_Load(object sender, EventArgs e)
{
   var deviceService = new DeviceService();
   DeviceGridView.DataSource = deviceService.GetDevice();
   DeviceGridView.DataBind();
}

The below displays the asynchronous version:
protected void Page_Load(object sender, EventArgs e)
{
    RegisterAsyncTask(new PageAsyncTask(GetDeviceSvcAsync));
}

private async Task GetDeviceSvcAsync()
{
    var deviceService = new DeviceService();
    DeviceGridView.DataSource = await deviceService.GetDeviceAsync();
    DeviceGridView.DataBind();
}

The beneath lists the changes that were applied to permit DeviceAsync page to be asynchronous.

• This is a need to to set the Webpage directive Async attribute to "true".
• The RegisterAsyncTask indicates is deployed to sign up an asynchronous task that includes of the code which can be operated asynchronously.
• The new GetDeviceSvcAsync approach is labelled with the async key phrase that informs the compiler to make callbacks for parts of the body and in addition to generate a Job of its personal which is returned.
• Should you recognize, we appened "Async" towards the asynchronous technique title although this is not required however it is the conference while you're writing asynchronous methods.
• The return sort in the Task defines the perform in progress and offers the callers of the approach having a deal with through which to halt for your completion of the asynchronous operation. The return type in the new GetDeviceSvcAsync method is Activity.
• Internet support call helps make use of the await keyword.
• The asynchronous web service API was referred to as GetDeviceAsync.

GetDeviceAsync is another asynchronous method that's known as inside of the GetDeviceSvcAsync method physique. Task<List<Device>> is immediately returned by a GetDeviceAsync that will finally full on the availability of the info. For your purpose that you'd not want to proceed additional just before you have the device data, the code waits for the task making use of the await keyword. 1 might make usage of the await keyword just in techniques annotated with all the async search term.

Until finally we have the completion from the task, the thread is not blocked from the await search term. It indications up the rest of the method as being a callback within the job, and immediately returns. Within the completion in the awaited activity, that callback will likely be invoked thereby resuming the implementation from the method right exactly where it left off.

The below code displays the GetDevice and GetDeviceAsync techniques:

public List<Device> GetDevice()
{
   var uri = Util.getServiceUri("Device");
   using (WebClient webClient = new WebClient())
   {
        return JsonConvert.DeserializeObject<List<Device>>(
            webClient.DownloadString(uri)
        );
    }
}
public async Task<List<Device>> GetDevicesAsync()
{
    var uri = Util.getServiceUri("Devices");
    using (HttpClient httpClient = new HttpClient())
    {
        var response = await httpClient.GetAsync(uri);
        return (await response.Content.ReadAsAsync<List<Device>>());
    }
}

The asynchronous modifications which were utilized are same as those applied to the DevicesAsync above.

• Async key phrase was used to annotate the method signature, the return sort was changed to Task<List<Device>>, and Async was appended for the technique title.
• The asynchronous HttpClient is utilized rather than synchronous WebClient class.
• The await keyword was used to the HttpClient GetAsync asynchronous method.

The below image displays the asynchronous device see.

The browsers screen of the gadget info is same concerning the check out that's created by the synchronous contact. Here the only difference will be the asynchronous model might be more execute ant below main hefty loads.

Methods that are hooked up with RegisterAsyncTasks will likely be executed instantly after PreRender. 1 may also utilize async void page events directly as may be seen from the under code:

protected void Page_Load(object sender, EventArgs e) {
    await ...;
    // do work
}

The disadvantage for the async occasions is that the programmers now don't have the complete use of the occasions when activities are applied. Example, in case both an .aspx as well as a .Master signifies Page_Load occasions and a minimum of 1 of them is asynchronous, there's no guarantee from the execution.

Getting a developer, it is recommended to apply the above stated procedure to come up with the asynchronous unit web page making use of the newest ASP.Net 4.5 systems.

In real-time environments the server is aware from the information updates, occasion occurrences, and so forth. however the customer doesn’t understand it unless the request is initiated by the client towards the server seeking the updates. This is typically attained through techniques like constant polling, extended polling, and so forth. and these methodologies incur lots of site visitors and load to the server.

The alternate method to simplify and reduce the overhead is to make the server effective at notifying the clients. There are lots of systems launched to attain this and a few of them are WebSockets, SSE (Server Sent Activities), Lengthy polling, and so forth. Every of those techniques has its personal caveats like WebSockets are supported only on browsers that assistance HTML5 and SSE just isn't supported on Web Explorer.

SignalR is surely an Asp.Net library, which can be created to utilize the present transport systems underneath primarily based within the client nature and the assistance it provides. ASP.NET SignalR is effective at pushing the information to some wide selection of clientele like a Internet webpage, Window application, Window Cellphone Application, and so on. The onus is now taken out in the developers of stressing about which server push transportation to use and selecting the fallbacks in the event of unsupported situations.

Composition of SignalR

To start out with SignalR it is vital that you know the components. The server component from the SignalR engineering demands web hosting a PersistentConnection or even a SignalR hub.

1. PersistentConnection - This can be a server endpoint to press the messages for the clientele. It enables the developers to accessibility the SignalR features at a low stage.
2. Hub - It really is built on top of the PersistentConnection exposing high-level APIs and it allows the builders to produce the server to consumer calls within an RPC style (Remote Method Contact).

Within the client front SignalR offers various consumer libraries to different customers like Home windows Application, Internet Type, Home windows Cellphone, iOS, Android, and so on. The clientele must make use of the consumer libraries to get connected to the SignalR hub. These client libraries are available as NuGet deals.

Sample Application

Let us construct a sample chat software that broadcasts the messages to all linked customers or to specific teams. In this instance think about the customers to become a Windows software as well as a net kind customer.

Creating an Asp.Net SignalR Hub

Open Visual Studio and develop an vacant Asp.net MVC application named MyChatApplicationServer. Now open up the NuGet deals, lookup and include Microsoft ASP.Net SignalR.

Now right click on within the venture, include the SignalR Hub class and name it as MyChatHub. Add the following code to the course_.

public class MyChatHub : Hub
    {
        public void BroadcastMessageToAll(string message)
        {
            Clients.All.newMessageReceived(message);
        }
 
        public void JoinAGroup(string group)
        {
            Groups.Add(Context.ConnectionId, group);
        }
 
        public void RemoveFromAGroup(string group)
        {
            Groups.Remove(Context.ConnectionId, group);
        }
 
        public void BroadcastToGroup(string message, string group)
        {
            Clients.Group(group).newMessageReceived(message);
        }
    }

The HUB course also provides the qualities Clientele, Groups, Context and events like OnConnected, and so on.

Ultimately it's also wise to add Owin startup course to map the obtainable hubs as proven below_.

    [assembly: OwinStartup(typeof(MyChatApplicationServer.Startup))]
   
    namespace MyChatApplicationServer
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                app.MapSignalR();
            }
        }
    }

Pushing Data to a Web Form Client

Now create an internet form client venture named WebClient and incorporate a simple HTML file ChatWebClient.html with all the following code. Include the references towards the necessary script documents_.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.1.min.js"></script>
    <script src="http://localhost:32555/signalr/hubs/" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var myChatHub = $.connection.myChatHub;
            myChatHub.client.newMessageReceived = function (message) {
                $('#ulChatMessages').append('<li>' + message + '</li>');
            }
            $.connection.hub.url = "http://localhost:32555/signalr";
            $.connection.hub.start().done(function () {
                $('#btnSubmit').click(function (e) {
                    myChatHub.server.broadcastMessageToAll($('#txtEnterMessage').val(), 'Web user');
                });
            }).fail(function (error) {
                console.error(error);
            });;
         
        });
    </script>
</head>
<body>
    <div>
        <label id="lblEnterMessage">Enter Message: </label>
        <input type="text" id="txtEnterMessage" />
        <input type="submit" id="btnSubmit" value="Send Message" />
        <ul id="ulChatMessages"></ul>
    </div>
</body>
</html>

You'll find two ways of applying the customer function one with proxy as well as other without having. The above instance is the a single without a proxy.

In the link begin you may also point out which transport SignalR must use.
Pushing Info to a Home windows Application Consumer

Let us include a home windows application and subscribe for the SignalR host. Create a new windows software named WinFormClient and from the nugget offers install Microsoft ASP.Net SignalR .Internet consumer package deal. Within the Program.cs add the subsequent code_.

    namespace WinFormClient
    {
        public partial class Form1 : Form
        {
            HubConnection hubConnection;
            IHubProxy hubProxy;
            public Form1()
            {
                InitializeComponent();
                hubConnection = new HubConnection("http://localhost:32555/signalr/hubs");
                hubProxy = hubConnection.CreateHubProxy("MyChatHub");
                hubProxy.On<string>("newMessageReceived", (message) => lstMessages.Items.Add(message));
                hubConnection.Start().Wait();
            }
   
            private void btnSubmit_Click(object sender, EventArgs e)
            {
                hubProxy.Invoke("BroadcastMessageToAll", textBox1.Text, "Window App User").Wait();
            }
        }
    }

When done go on and operate each the net and Windows consumer. Enter the messages and look at how the information is getting pushed throughout each the clients although they may be of a distinct character.

SignalR is able of serving several connected clients irrespective of the customer system or technology. I hope this short article offers a good sum of data about pushing information from the server to consumer using Asp.Internet SignalR.

ASP.NET is really a framework for creating net applications created by Microsoft. Initially the technologies. NET is the successor of ASP which is also a computer software product from Microsoft. With .NET ASP gives a platform for developers to design and create dynamic websites and net portals.

You will find certain items that ought to be regarded as when improving the performance from the application in developing a net application. Here are a few of the tips to improve the performance of ASP.NET 4.5.1:

Turn off Session State
Disable session state if you do not need, as this can improve the all round efficiency. By default the session state is always active. However, you'll be able to disable session state for any specific pages.

Turn off Tracing
If tracing is enabled, tracing will add a whole lot of overhead in producing applications. Though tracing is actually a useful function inside the development because it enables developers to track and trace application sequence, tracing may be turned off, unless you want to monitor the trace logging.

Avoid Page Validation Server (Steer clear of Server-side Validation)
Within this case, must be attempted use of client-side validation, not the server side. Server-side validation will consume a lot of sources around the server which can have an effect on application efficiency.

Stay away from Exceptions (Avoid Exceptions)
Exceptions may be 1 of the biggest resource eater which resulted within the lower of web applications and windows applications. Therefore, it is much better to prevent the use and handling of exceptions which can be not beneficial.

Avoid frequent connections for the database (Steer clear of Frequent Calls to Database)
Connections are frequently made for the database can devote time response and resources (resources). This can be avoided by utilizing batch processing. Producing the minimum database connection as a connection is opened and not closed, may cause efficiency slowdown.

Stay away from utilizing Recursive Functions and Nested Loops
To improve application performance, attempt to always steer clear of utilizing nested loops and recursive functions simply because these functions consume a whole lot of memory.

Turn off the View State
In ASP.NET, the default view state will probably be active and will slow down the website. So if you don't use a kind postback, it's much better to disable view state.

Use Caching
Web page caching could be employed to get a particular period of time and towards the required duration will not visit the server and are served from the cache. In the case of static internet pages and dynamic, Partial Caching [Fragment Caching] may be utilized to break into a couple of pages a user control.

How to Bind Pages in ASP.NET

ASP.NET is a unified Web development model that includes the services necessary for you to build enterprise-class Web applications with a minimum of coding. ASP.NET is part of the .NET Framework, and when coding ASP.NET applications you have access to classes in the .NET Framework. You can code your applications in any language compatible with the common language runtime (CLR), including Microsoft Visual Basic and C#. These languages enable you to develop ASP.NET applications that benefit from the common language runtime, type safety, inheritance, and so on.

If you are familiar with classic ASP, the declarative data binding syntax introduced in ASP.NET will be familiar to you even though the functionality is vastly different. Data binding expressions are the code you see between <%# and %> characters in an ASPX file. The expressions allow you to easily bind controls to data sources, as well as properties, expressions, and results from method calls exposed by the page. While this feature is easy to use, it often causes some confusion about what is allowed and whether it should be employed.

Data binding basics

Data binding expressions link ASP.NET page properties, server control properties, and data sources when the page's DataBind method is called. You can place data binding expressions on the value side of an attribute/value pair in the opening tag of a server control or anywhere in the page. All data binding expressions, regardless of where you place them, must be contained between <%# and %> characters.

When used with data controls (like Repeater, DataGrid, and so forth), the expression parameter is usually a column name from the data source. However, as long as it returns a value, any valid expression may be used. Likewise, the same syntax may be used outside list controls. This includes displaying values on the page or populating control attributes.

Container.DataItem is a runtime alias for the DataItem bound to a specific item. It maps to an individual item from the data source—like one row from a database query or an individual element from an array. The actual data type for the DataItem is determined by the data source. So, if you're dealing with an array of integers, the DataItem will be an integer.

The following list provides a quick review of the VB.NET syntax for various scenarios:

<%# Container.DataItem %>--An array of string values is returned.
<%# Container.DataItem("expression") %>--The specific field from a DataView container is returned.
<%# Container.DataItem.PropertyName %>--The specific string property value of data source is returned.
<%# CStr(Container.DataItem.PropertyName) %>--Returns a property value converted to its string representation.

When you're using C#, the syntax is a bit different. The following list includes the corresponding C# code for each line in the previous list. Notice the basic syntax is the same, but it changes when property values are returned and converted to the appropriate data type.

<%# Container.DataItem %>
<%# ((DataRowView)Container.DataItem)["PropertyName"] %>
<%# ((ObjectType)Container.DataItem).PropertyName %>
<%# ((ObjectType)Container.DataItem).PropertyName.ToString() %>

Syntax is consistent when working with page level properties and methods. The syntax remains the same as long as string values are returned. The following list provides some examples:

<%# propertyName %>--The value for a page level property is returned.
<asp:ListBox id="lstValues" datasource='<%# propertyName %>' runat="server">--The value retrieved from the page level property (array, collection of objects, etc.) is bound to the data control.
<%# (objectName.PropertyName) %>--The value of the page level object property is displayed.
<%# MethodName() %>--The value returned from the page method is displayed.

You may use individual values (albeit properties, method return values, and so forth) on a page using the following syntax:
<%= Value %>

Using the Contain.DataItem object can be tedious, since you must be aware of the data type and convert it accordingly for use. Microsoft does provide the DataBinder class to further simplify development.

Working with DataBinder

Microsoft documentation (on MSDN) states the DataBinder class uses reflection to parse and evaluate a data binding expression against an object at runtime. This method allows RAD designers, such as Visual Studio .NET, to easily generate and parse data binding syntax. This method can also be used declaratively on a Web form's page to simplify casting from one type to another.

You can use the Eval method of the DataBinder class to make .NET do the heavy lifting when using data values in an ASP.NET page. The Eval method accepts the previously covered Container.DataItem object; it works hard to figure out the details of the field identified in the expression and displays it accordingly. It has the following syntax:

DataBinder.Eval(Container.DataItem, "field name", "optional formatting")

The DataBinder.Eval approach is great as it pushes work to the system. On the other hand, you should use it with caution, since time and resources are consumed as the system locates the element and determines its object/data type.

Plenty of options

Data binding makes it relatively simple to include data in ASP.NET pages. There are various data binding options available, which include: binding the data to a control and allowing it to decide how it is presented, or choosing declarative data binding to control presentation within the ASP.NET page. In the end, it comes down to your preference, but it is great to have options.

Best and Cheap ASP.NET Hosting

Are you looking for best and cheap ASP.NET Hosting? Look no further, ASPHostPortal.com is your ASP.NET hosting home! Start your ASP.NET hosting with only $1.00/month. All of our .NET hosting plan comes with 30 days money back guarantee, so you can try our service with no risk. Why wait longer?

ASP.NET Responsive Layout using Bootstrap

In this article we will explain about how to design responsive layout using bootstrap in your ASP.NET site. ASP.NET is an open source server-side Web application framework designed for Web development to produce dynamic Web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

ASP.NET Responsive Layout:

Responsive Web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Why You Need Responsive Web Design?

Every people open website on mobile device, tablet device and desktop on different-different size that time our website layout is not good looking so web designer design the different-different website for different-different devices for good look and feel website so that process is very time taken. So reduce that process invent to “Responsive Layout” word.

Pillar of Responsive Layout:

1. Fluid Grids:

The general practice in web design is to employ fixed width layouts. It means that the page and its constituent elements have a fixed size and width and positioned around the center. Liquid layouts offer us a greater advantage with the increasing number of devices with web access. A liquid layout expands with the page.

2. Flexible Images:

Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a problem when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.

3. Media Queries:

Fluid grid layouts are very important for responsive web development, but there are other issues to consider. If the width of the device becomes too narrow, like in a small mobile phone, the website design can fall apart. This is where media queries come in. These media queries are based in CSS3 and allow us to not only target the particular device classes but physical characteristics of the device which is rendering the web site.

Add these four files:

<link href="~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/blog.css" rel="stylesheet" />
<script src="~/scripts/jquery-2.1.0.min.js"></script>
<script src="~/scripts/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>

Example:

Html Code

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Brand", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li class="active">@Html.ActionLink("Home", "", "")</li>
                <li>@Html.ActionLink("Article", "", "")</li>
                <li>@Html.ActionLink("Blog", "", "")</li>
                <li>@Html.ActionLink("Forum", "", "")</li>
                <li>@Html.ActionLink("Interview", "", "")</li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="themes">
                        <li><a href="../default/">Default</a></li>
                        <li class="divider"></li>
                        <li><a href="../david/">David</a></li>
                        <li><a href="../lily/">Lily</a></li>
                        <li><a href="../jasmine/">Jasmine</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Sign Up", "", "")</li>
                <li>@Html.ActionLink("Login", "", "")</li>
                <li>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    </form>
                </li>
            </ul>
        </nav>
    </div>
</header>
<div class="container">
    <br />
    <br />
    <div class="row">
        <img src="~/Content/Images/Sample1.png" class="banner" />
    </div>
    <br />   
    <div class="row">
        <div class="col-md-4">
            <img src="~/Content/Images/mobile-devlopment.png" />
        </div>
        <div class="col-md-8">
            <p>
Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a problem when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.

 </p>
        </div>
    </div>
    <br />
    <br />
    <div class="well">
        <div class="row">
            <div class="col-md-6">
                <label>First Name</label>
                <input type="text" />
            </div>
            <div class="col-md-6">
                <label>Last Name</label>
                <input type="text" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-6">
                <label>Email ID</label>
                <input type="text" />
            </div>
            <div class="col-md-6">
                <label>Country</label>
                <select>
                    <option>---Select---</option>
                    <option>USA</option>
                    <option>UK</option>
                    <option>Netherland</option>
                    <option>Hongkong</option>
                </select>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-6">
                <label>State</label>
                <select>
                </select>
            </div>
            <div class="col-md-6">
                <label>City</label>
                <select>
               </select>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-6">
                <label>Zip Code</label>
                <input type="text" />
            </div>
            <div class="col-md-6">
                <label>Contact No</label>
                <input type="text" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-12 text-right">
                <input type="button" value="Submit" class="btn btn-info" />
                <input type="button" value="Clear" class="btn btn-info" />
            </div>
        </div>
    </div>
    <br />
    <br />
</div>

Blog.css

Img
{
    width: auto;
    max-width: 100%;
}
.banner {
    width:100%;
    height:250px;
}
input[type='text'],select {
    width:100%;
    height:30px;
}
@media screen and (min-width: 100px) and (max-width:750px) {
    .banner {
        display:none;
    }
}