ASP.NET 4.5 Hosting BLOG

Tutorial and Articles about ASP.NET 4.0 and the latest ASP.NET 4.5 Hosting

Classic ASP Hosting - ASPHostPortal.com :: Cropping picture using jQuery, Jcrop with ASPJpeg

clock October 23, 2014 06:15 by author Ben

As we know the assorted websites like Facebook, LinkedIn, Google and so forth., are utilizing Impression Cropping instrument when we incorporate a brand new picture. I found many ways to do that perform but lately I received Jcrop for image cropping. Jcrop will be the quick and simple way to include impression cropping performance for your net software with all the jQuery help.


Jcrop is simply a device which lets you crop image with reside preview. But, after the cropping picture, you have to create a new picture using the picked X-Axis, Y-Axis, Width and Height. I found several tricks to produce new photo through Method.Drawing.Image but I could not get this better to use cropping impression. So I decided to utilize ASPJpeg for making new picture.

ASPJpeg is a server part which will assist your ASP.Net apps with all their image-management wants. With ASPJpeg, you can create high-quality thumbnails, logo-stamp images, extract metadata details from images, crop, improve, rotate, convert, and much much more. But, listed here we are going to use for CROPPING image.

How to begin? (Jcrop Set up)

Add the following files into your project

  • jquery.min.js
  • jquery.Jcrop.js
  • jquery.Jcrop.css


Now we'd like to include above documents into our <head> segment and some fashion courses for HTML factors also as create features inside the webpage with all the OnChange and OnSelect event handler. These occasions are utilized to update existing selection of coordinates within the Concealed Fields.

<head runat="server">
<style type="text/css">
h2.panelTitle { font-size: 18px; margin-bottom: 5px; }
p.content { color: #5f5f61; width: 50%; }
div.imgCrop { width: 330px; float: left; }
div.imgPreview { width: 140px; float: left; margin-top: 40px; }
div.previewOverflow { width: 115px; height: 115px; overflow: hidden; }
div.previewText { color: #333; text-align: center; width: 115px; font-size: 14px; margin-top: 5px; }
div.clear { clear: both; height: 0; }
</style>
 
<link href="/_assets/js/jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="/_assets/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/_assets/js/jcrop/jquery.Jcrop.js" type="text/javascript"></script>
 
<script type="text/javascript">
var imgWidth = 0;
var imgHeight = 0;
 
function getImageDimensions(w, h) {
imgWidth = w;
imgHeight = h;
}
 
// Initialize Jcrop
$(function() {
jQuery('#imgCrop').Jcrop({
    onSelect: storeCoords,
    onChange: storeCoords,
    minSize: [115, 115],
    setSelect: [0, 0, 115, 115],
    aspectRatio: 1
});
});
 
// Update every move of the cropping in the Hidden Fields and Live Preview
function storeCoords(c) {
  var rx = 115 / c.w;
  var ry = 115 / c.h;
 
  jQuery('#X1').val(c.x);
  jQuery('#Y1').val(c.y);
  jQuery('#X2').val(c.x2);
  jQuery('#Y2').val(c.y2);
  jQuery('#W').val(c.w);
  jQuery('#H').val(c.h);
 
  jQuery('#preview').css({
    width: Math.round(rx * imgWidth) + 'px',
    height: Math.round(ry * imgHeight) + 'px',
    marginLeft: '-' + Math.round(rx * c.x) + 'px',
    marginTop: '-' + Math.round(ry * c.y) + 'px'
  });
};
</script>
</head>


Add the following code in your <body> section


<body>
<form id="form1" runat="server">
  <div style="padding: 10px;">
    <!-- PANEL #1: Choose Upload File -->
    <asp:Panel runat="server" ID="step1">
      <h2 class="panelTitle"> Update a picture of yourself</h2>
      <asp:FileUpload ID="FileUpload1" runat="server" />
      &nbsp;
      <asp:Button runat="server" Text="Upload" ID="btnUpload" OnClick="btnUpload_Click" />
      <br />
      <asp:Label ID="lblError" runat="server" Visible="false" />
      <p class="content"> You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities, nudity, artwork or copyrighted images.)</p>
    </asp:Panel>
 
    <!-- PANEL #2: Show the Image Corpping with Preview -->     
    <asp:Panel runat="server" ID="step2" Visible="false">
      <h2 class="panelTitle"> Crop this picture of yourself</h2>
      <p class="content"> You can drag the box to select the crop area, and use the handle to resize it.<br />
        <asp:LinkButton runat="server" ID="lbBackToUpload" Text="Back to upload" OnClick="lbBackToUpload_Click"></asp:LinkButton>
      </p>
      <div>
        <div class="imgCrop">
          <asp:Image ID="imgCrop" runat="server" />
        </div>
        <div class="imgPreview">
          <div class="previewOverflow">
            <asp:Image ID="preview" runat="server" />
          </div>
          <div class="previewText"> Preview</div>
        </div>
        <div class="clear"> </div>
      </div>
      <br />
      <asp:HiddenField ID="X1" runat="server" />
      <asp:HiddenField ID="Y1" runat="server" />
      <asp:HiddenField ID="X2" runat="server" />
      <asp:HiddenField ID="Y2" runat="server" />
      <asp:HiddenField ID="W" runat="server" />
      <asp:HiddenField ID="H" runat="server" />
      <asp:Button ID="btnCrop" runat="server" Text="Apply Changes" OnClick="btnCrop_Click" />
      &nbsp;
      <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
    </asp:Panel>
    <asp:Panel ID="pnlCropped" runat="server" Visible="false">
      <asp:Image ID="imgCropped" runat="server" />
    </asp:Panel>
  </div>
</form>
</body>


After added above snipts, we will work on the backend side. We have 5 methods to create on the backend side.
  • CancelCrop (Private Method)
  • btnUpload_Click
  • btnCrop_Click
  • btnCancel_Click
  • lbBackToUpload_Click

Add Reference of ASPJpeg

Ahead of the previously mentioned techniques we have to add ASPJpeg Reference into our Bin folder, follow the process to incorporate an ASPJpeg Reference File.

Step 1: Right click on the Bin Folder / Root Folder and select Add Reference


Step 2: Browse the AspJpeg.dll file from your Hard Drive and click OK to continue.


Lets have a look your added reference picture.


Lets have a look your added reference picture.

using System;
using System.IO;
using System.Web;
 
String tempPath = HttpContext.Current.Server.MapPath("uploads/temp/");
String savePath = HttpContext.Current.Server.MapPath("uploads/images/");
 
protected void btnUpload_Click(object sender, EventArgs e)
    {
        // Generate Random String
        String NewID = System.Guid.NewGuid().ToString("N").Substring(0, 10);
 
        // initialize variables
        String fileName = String.Empty;
        String fileExtension = String.Empty;
        Boolean fileOK = false;
        Boolean fileSaved = false;
 
        // Check: If file has been selected to upload
        if (FileUpload1.HasFile)
        {
            Session.Add("WorkingImage", FileUpload1.FileName);
            fileExtension = Path.GetExtension(Session["WorkingImage"].ToString()).ToLower();
            String[] allowedExtensions = { ".jpg", "jpeg", ".png", ".gif" };
            for (int i = 0; i < allowedExtensions.Length; i++)
                if (fileExtension == allowedExtensions[i]) fileOK = true;
        }
 
        // Check: If fileOK variable is equest to true
        if (fileOK)
        {
            try
            {
                fileName = NewID + fileExtension;
                String tempLocation = tempPath + fileName;
                FileUpload1.PostedFile.SaveAs(tempLocation);
 
                ASPJPEGLib.IASPJpeg objJpeg = new ASPJPEGLib.ASPJpeg();
                objJpeg.Open(tempLocation);
                objJpeg.PreserveAspectRatio = 1;
 
                const int maxWidth = 300;
                if (objJpeg.OriginalWidth > objJpeg.OriginalHeight)
                {
                    objJpeg.Width = maxWidth;
                    objJpeg.Height = objJpeg.OriginalHeight * maxWidth / objJpeg.OriginalWidth;
                }
                else
                {
                    objJpeg.Height = maxWidth;
                    objJpeg.Width = objJpeg.OriginalWidth * maxWidth / objJpeg.OriginalHeight;
                }
 
                // Send generated image Width and Height to JavaScript for the Jcrop preview
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "getImageDimensions", "getImageDimensions(" + objJpeg.Width + "," + objJpeg.Height + ");", true);
 
                // Create new file with new width: 300
                objJpeg.Save(tempLocation);
 
                // Save Temprary Location and Filename into Session
                Session["TempLocation"] = tempLocation;
                Session["TempFileName"] = fileName;
                fileSaved = true;
            }
            catch (Exception ex)
            {
                lblError.Text = "File could not be uploaded." + ex.Message.ToString();
                lblError.Visible = true;
                fileSaved = false;
            }
        }
        else
        {
            lblError.Text = "Cannot accept files of this type.";
            lblError.Visible = true;
        }
 
        // Check: if fileSaved variable is equest to true
        if (fileSaved)
        {
            step1.Visible = false; // Panel #1: Disappear
            step2.Visible = true; // Panel #2: Appear
 
            // Fill the Origial Image and Preview with the below source
            imgCrop.ImageUrl = "~/uploads/temp/" + fileName;
            preview.ImageUrl = "~/uploads/temp/" + fileName;
        }
 
    }
 
    protected void btnCrop_Click(object sender, EventArgs e)
    {
        String newFileName = savePath + Session["TempFileName"];
 
        // Create instance for AspJpeg
        ASPJPEGLib.IASPJpeg objJpeg1 = new ASPJPEGLib.ASPJpeg();
 
        // Open file from temprary location
        objJpeg1.Open(Session["TempLocation"].ToString());
 
        // Set Quality: 80
        objJpeg1.Quality = 80;
 
        // Image Cropped with selected area
        objJpeg1.Crop(int.Parse(X1.Value), int.Parse(Y1.Value), int.Parse(X2.Value), int.Parse(Y2.Value));
 
        // Save file into uploads/images
        objJpeg1.Save(newFileName);
 
        step2.Visible = false; // Panel #2: Disappear
        pnlCropped.Visible = true; // Active Panel Cropped Image
 
        imgCropped.ImageUrl = "~/uploads/images/" + Session["TempFileName"];
 
        // Delete temprary file
        CancelCrop();
    }
 
    protected void lbBackToUpload_Click(object sender, EventArgs e)
    {
        CancelCrop();
 
        step1.Visible = true; // Panel appear #1
        step2.Visible = false; // Panel disappear #2
    }
 
    protected void btnCancel_Click(object sender, EventArgs e)
    {
        CancelCrop();
 
        step1.Visible = true; // Panel appear #1
        step2.Visible = false; // Panel disappear #2
    }
 
    private void CancelCrop()
    {
        String tmpFileLocation = Session["TempLocation"].ToString();
 
        // Delete temprary files if exists
        if (File.Exists(tmpFileLocation))
            File.Delete(tmpFileLocation);
    }

Lastly, we've got finished the Jcrop Picture Cropping script. You'll be able to make use of your own FileUpload method for image uploading. I'm also impressed by a person who experienced developed great structural code. therefore, I followed him. Sorry to forgot reference website link.



ASP.NET SignalR Hosting - ASPHostPortal.com :: SignalR And Knockout In ASP.Net Web Pages Making use of WebMatrix

clock October 22, 2014 05:43 by author Ben

SignalR is actually a library that simplifies the creation and management of persistent connections among internet servers and clientele. This facilitates the development of programs that may screen updates to info held around the server in real-time. Chat apps will be the most evident beneficiaries of this technology, but line-of-business apps that need to report availability to customers can reward also. Listed here, I take a look at extending the canonical SignalR chat example to incorporate a "who's typing" feature, and that i also prolong my prior Knockout instance to make use of SignalR.


Very first, what is the trouble that SignalR is made to remedy? The net functions on the Request-Response design. Browsers along with other person brokers make requests and net server offer a reaction to that request.The reaction is distributed for the delivery tackle supplied within the ask for by the person agent. And that is the natural purchase of issues on the web - servers can not make responses without a request. For your most element, this is not a concern, but if you need to display real-time updates with your net webpage, you have required to vacation resort to methods like frequently polling the server making use of AJAX to determine if any modifications experienced been produced to info. Alternatively, you can use Comet engineering, which retains a persistent connection open between the server and the customer. HTML5 introduced two new techniques - Server Despatched Occasions and WebSockets. SignalR is really a user-friendly wrapper about every one of these technologies which makes it a lot much easier to develop apps that need the real-time show of knowledge. SignalR utilises HTML5 Web Sockets API where it is obtainable, and falls again onto other technologies where they may be not - Server Sent Events, Eternally Frames or Long Polling, the final two of which are Comet strategies.

SignalR is currently in pre-release - Release Prospect one to be precise. It is obtainable by way of Nuget or Github. Nevertheless, as it is pre-release, it is not obtainable by way of the WebMatrix Nuget client. But you can get it using Visible Studio (and Express For Net edition, which is free) if you pick "Include Prerelease" as an alternative of the default "Stable Only" choice. Or you can use the Package Manager Console and simply sort:

Install-Package Microsoft.AspNet.SignalR -Pre


It is suggested to set up the package by doing this (via Nuget) as you'll find quite a few bits and pieces to be set up:

The centre bit of a SignalR application is actually a hub, that is similar to a Controller in ASP.Net MVC. A hub is accountable for getting enter and creating output. Hubs are created as server-side classes that inherit from Microsoft.AspNet.SignalR.Hubs.Hub. Public methods created within a hub course are meant to be known as from consumer code. They normally outcome inside a reaction becoming despatched to the consumer. Here's the hub and technique that the Chat example in the ASP.Net internet web site features:

using Microsoft.AspNet.SignalR.Hubs;

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.broadcastMessage(name, message);
    }
}


This should be saved as ChatHub.cs (a C# class file) in App_Code. A making use of directive is extra to the top in the file that makes Microsoft.AspNet.SignalR.Hubs available to the code. At runtime, a JavaScript file is produced dynamically which consists of a client-side implementation from the public Deliver technique in order that it may act as a proxy towards the server-side method. You write an implementation from the broadcastMessage approach in client-code in order that the Hub method can call it and therefore supply a reaction. You'll be able to also decide who ought to get the response through the choices obtainable:


Here's the full client-side code starting with the Layout page:

@{
    
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title</title>
        <link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
        <script src="~/Scripts/jquery-1.6.4.min.js" ></script>
        <script src="~/Scripts/jquery.signalR-1.0.0-rc1.min.js"></script>
        <script src="~/signalr/hubs"></script>
        @RenderSection("script", required: false)
    </head>
    <body>
        @RenderBody()
    </body>
</html>


Notice that there is a reference to a script called hubs in a signalr folder, neither of which exist. This is a placeholder for the dynamically generated script that translates the Hub methods to client code.

 

@{

}

    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>

@section script{
    <script type="text/javascript">
        $(function () {
 
            var chat = $.connection.chatHub;

            chat.client.broadcastMessage = function (name, message) {
                $('#discussion').append('<li><strong>' + name
                    + '</strong>:&nbsp;&nbsp;' + message + '</li>');
            };

            
            $('#displayname').val(prompt('Enter your name:', '')); 
            $('#message').focus();
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    var encodedName = $('<div />').text($('#displayname').val()).html();
                    var encodedMsg = $('<div />').text($('#message').val()).html();
                    chat.server.send(encodedName, encodedMsg);
                    $('#message').val('').focus();
                });
            });
        });
    </script>
}

Some HTML factors are produced at the top of the file - a textual content box, button, a hidden area and an unordered checklist. Inside the script block, a client-side proxy is developed for your server-side ChatHub class:

var chat = $.connection.chatHub;

The client-side model in the hub is generated utilizing camel-case (first word lower scenario). Remember that you have to write down your personal client-side implementation of the dynamic broadcastMessage approach? The following section displays that. It requires the two strings offered from the Hub approach, and uses them to generate a list item which is additional for the unordered list. The subsequent few lines create the user by prompting to get a title which can be stored in the concealed discipline, and placing the main target within the textbox. Then the link to the hub is opened, along with a simply click function handler is additional to the button which leads to the Deliver approach inside the server edition of the hub becoming invoked:

chat.server.send(encodedName, encodedMsg);

So just to recap, the button click invokes the client-side chat.server.send method, which calls the public ChatHub.Send method, which responds with Clients.All.broadcastMessage which invokes the client-side chat.client.broadcastMessage function.

There is one final thing needed to get this working, asn that is to register the default route for hubs, which is best done in an _AppStart.cshtml file:

@using System.Web.Routing
@using Microsoft.AspNet.SignalR

@{
    RouteTable.Routes.MapHubs();
}

The chat example is easy to understand and illustrates the basic workflow nicely. But it is not a complete application by any stretch of the imagination. It needs more, and a common feature of chat applications is an indicator of who is currently typing. We can use the workflow logic above to plan an implementation.

Something on the client needs to invoke a server-side method. Keystrokes are as good an indication of typing as any, so that will do:

$('#message').keypress(function () {
    var encodedName = $('<div />').text($('#displayname').val()).html();
    chat.server.isTyping(encodedName);
});

From the definition of the client method, it should be easy to discern the name and signature of the additional method required in the ChatHub class:

public void IsTyping(string name){
    Clients.All.sayWhoIsTyping(name);
}

With each keypress, the name of the current user is passed to the server-side IsTyping method, which responds by calling a client-side function called sayWhoIsTyping:

chat.client.sayWhoIsTyping = function (name) {
    $('#isTyping').html('<em>' + name + ' is typing</em>');
    setTimeout(function () { 
        $('#isTyping').html('&nbsp;');
    }, 3000);
};

It's a rough and ready function, which takes the name passed from the server-side method, and displays it as part of a string in a div with an ID of isTyping. The text is cleared after 3 seconds.

SignalR with Knockout

I've created about Knockout prior to. In case you are undecided what Knockout is all about, you should go through the previous article first. In that prior write-up, the instance exhibits a straightforward software in which the user can choose a goods, and in the ensuing listing, choose 1 item to check out the small print. There is certainly an easy button that results within the ViewModel's unitsInStock worth reducing by one as if a obtain were created, as well as the UI being up-to-date because of this. And that is among the advantages of Knockout - adjustments to observable values inside the ViewModel result in that modify being mirrored wherever it's certain within the UI. Nevertheless the alter is localised to the personal user's browser. If a product unit is actually obtained, or indeed if more are made accessible, it might be considered a really good concept if ALL existing users are notified in the change in unitsInStock in real-time, right? Seems like a activity for SignalR.

The quantity of adjustments required for the existing Knockout sample code are actually quite tiny. I amended the existing ViewModel purchase perform and added an additional operate to manage reordering products. I also additional two computed observables (they used to be known as dependent observables); one which functions out if the consumer can purchase an item based on availability, and the other that works out if the reorder degree continues to be achieved:

viewModel.buy = function() {
    var id = this.productId();
    productsHub.server.buyProduct(id);
};

viewModel.reorder = function() {
    var quantity = this.reorderQuantity();
    var id = this.productId();
    productsHub.server.reorderProduct(quantity, id);
};

viewModel.canBuy = ko.computed(function() {
    return this.unitsInStock() > 0;
}, viewModel);

viewModel.canReorder = ko.computed(function() {
    return this.unitsInStock() <= this.reorderLevel();
}, viewModel);

I also added a reorderLevel home towards the ViewModel, and after that extra a textbox and button for reordering, and wired up its visibility for the canReorder computed observable. The reordering button and textbox will only be seen in the event the units in inventory reaches the reorder level price. The Acquire A single button is currently only enabled if you will find units in inventory. Earlier, when there were no models in stock, the end result of clicking the Buy A single was an inform indicating that no inventory existed:

<div class="row" data-bind="visible: canReorder">
    <span class="label"><input data-bind="value: reorderQuantity" class="reorder" /></span>
    <span><button data-bind="click: reorder">Reorder</button></span>
</div>
<div class="row">
    <span class="label">&nbsp;</span>
    <span><button data-bind="click: buy, enable: canBuy">Buy One</button></span>
</div>

When you have been following alongside to date, you'll be able to see that the two ViewModel features: purchase and reorder stage to server-side Hub methods that don't at present exist: BuyProduct (indicated by productsHub.server.buyProduct) and ReorderProduct (indicated by productsHub.server.reorderProduct). So listed here is the code for your ProductHub with its methods:

using Microsoft.AspNet.SignalR.Hubs;
using WebMatrix.Data;

public class ProductHub : Hub
{
    public void BuyProduct(int productId) {
        using (var db = Database.Open("Northwind")) {
            var unitsInStock = db.QueryValue("SELECT UnitsInStock FROM Products WHERE ProductId = @0",
 productId);
if (unitsInStock > 0) { db.Execute("UPDATE Products Set UnitsInStock = UnitsInStock - 1 WHERE ProductId = @0",
productId); unitsInStock -= 1; } Clients.All.updateAvailableStock(unitsInStock, productId); } }
public void ReorderProduct(int quantity, int productId){ using (var db = Database.Open("Northwind")) { db.Execute("UPDATE Products Set UnitsInStock = UnitsInStock + @0 WHERE ProductId = @1",
quantity, productId);
var unitsInStock = db.QueryValue("SELECT UnitsInStock FROM Products WHERE ProductId = @0",
productId); Clients.All.updateAvailableStock(unitsInStock, productId); } } }

This time, the adjustments brought on by user motion will likely be saved within the database, which did not occur in the prior Chat example. The BuyProduct approach retrieves the existing quantity of units in stock for the chosen product, and permits a purchase if you'll find are any. The revised quantity of units in stock, combined with the product ID are sent towards the all currently linked clientele by way of an updateAvailableStock technique. The ReorderProduct method simply raises the UnitsInStock value by whatever quantity was handed in towards the method from the ViewModel function. Once more, the revised variety of units in stock is broadcast to all related customers.

So how can the customer deal with this broadcast? It requirements an updateAvailableStock perform in order that the hub methods can get in touch with it:

productHub.client.updateAvailableStock = function(unitsInStock, productId) {
    if (viewModel.productId() == productId) {
        viewModel.unitsInStock(unitsInStock);
        $('span[data-bind="text: unitsInStock"]').effect('highlight', { color: '#9ec6e2' }, 3500);
    }
};

First is checks to see when the ID in the solution being up to date may be the 1 presently sure to the ViewModel, and when it is, the worth is updated as well as a emphasize result is used towards the span that shows the models in inventory:


ll that remains to do is to create a client-side proxy for the ProductHub and establish a connection:

productsHub = $.connection.productHub;

$.connection.hub.start();


Both of these examples are available as part of a sample site available at GitHub.

SignalR is a lot more powerful than these introductory demonstrations illustrate. You can write your own PipelineModule class and inject your own processing code into the hub pipeline. You can add authorization really easily to a hub method or a complete hub using data annotiation style attributes.



ASP.Net 4.5 Hosting - ASPHostPortal.com :: Producing Data-driven Web Apps Utilizing ASP.Net 4.5 Web Forms

clock October 16, 2014 06:30 by author Ben

Data binding is less complicated and more effective in ASP.Net 4.5 Kinds.This publish discuss about making Data-driven software using ASP.Net 4.5 preview. Additionally, it discuss about distinct Info access methods, especially about design entry binding features in Internet Types. You need to install Visual Studio 11 Developer preview to use this function.

Typical ASP.Net developer could use a single from the following Info Access mechanisms for binding the data

  • You could set up your Database Initial - Making a Schema and creating product from it. Listed here model is actually a class which you're going to communicate with your databases from your code.
  • You may setup your Product Initial - Instead of developing the database first, we design the entity model initial eg: making use of entity framework. Style your product first after which generate a schema and code.
  • You could setup your Code First- On this strategy you very first write code to design and style the product and after that produce a schema making use of that code.

Your model designer floor could search like beneath should you stick to the any of above Information Accessibility mechanisms


This post discuss the third strategy Code Very first Information Entry mechanism to connect with the databases. This method makes use of the Product Binding , the phrase barrowed from MVC. In MVC whenever you call an motion method which received some parameters in which you need to move values from question string or from cookie assortment and bind these values into parameters. Design Binding does this in MVC. The concept is comparable Web Types but context is little little bit different.

Step1 Construct courses which represent your model.

Incorporate a folder within your remedy referred to as Model and then add new item class named Issue.



The difficulty class code getting some homes which appear like as below


Consequently the above mentioned code turns into a database desk. You can discover info annotations on every home. You'll be able to specify your validation at a single spot. eg: Required in above properties.

Produce an additional class which represent the database context named IssuesDb.


Now add the connection string in web.config file with same name as your DbContext. Here it is IssuesDb.

Create another class which initializes your database as shown below

public class Dbinitializer : DropCreateDatabaseIfModelChanges<IssuesDb>

    {

      protected override void Seed(IssueDb context)

        {

            context.Issues.Add(new Issue { CreatedBy="xyz",

            CreatedOn = new DateTime(), Title="Issue1"})

            context.Issues.Add(new Issue { CreatedBy="abc",

             CreatedOn = new DateTime(), Title="Issue2"})

            context.Issues.Add(new Issue { CreatedBy="aaa",

           CreatedOn = new DateTime(), Title="Issue3"})       

      

       }

You'll be able to override the tactic See to insert some values into the produced desk.

Step2 Displaying the above specifics in UI. We will set up a Gridview to Model Binding to list the details from database table.


We are not performing anything at all new listed here , Product Binding is merge of concept from Object information resource and MVC Design Binding. Specify your ModelType and SelectMethod to point out the main points.

We will also template fields to gridview and established the binding expression to point out the values but in different way.

The normal way is one thing proven below


The problem with the above expression is we do not know the type of the column. Now you will get an intellisense inside data binding expressions with a name Item.


The GetIssues method code will look like as below


Before running your application, Initialize the database initializer class in Global.asax file Application Start method

DataBase.SetInitializer(new IssueDbInitializer());


It also creates database and tables as you specified in the model class


Step3 Now let us add a filter to this application.

Add a lable, text box and a button to UI.


Now modify GetIssues method as shown below where Model Data binding comes into the picture.


The method having a parameter named createdSince that is a textbox id and we have been telling the strategy it is a handle. You are able to go ahead and take price from parameter and filter the values as demonstrated below


Instead of finding the control and writing the code, Model Binding takes the input from the user and retrieves the values from Dbcontext.

Points to note:

There's no If !(IsPostBack) or button handlers to attain this functionality. Just get in touch with this process by passing the worth from this handle. that is it!. We will dynamically manipulate the query by just using the values in the user.

Step4 Adding a FormView which exhibits all particulars and permits you to insert and edit the issue. The FormView markup seems like as below


The GetIssue method code as below. The idea is enable autogenerated select column in gridview and show the details when you select the particular issue.


You saying to method to get the id value from issuesGrid control and return the issue details. Run the application then you will see the below result


Note that we've not composed any code to re-bind the values from database to grid. Design Binding maintain observe from the values of parameters across the submit backs. It truly retailers these values in viewstate.

The InsertMethod code seems as below


and above code you can see we are validating whether user is logged in or not and based  on that we are using ModelState to add the model error message.

ModelState represents the current state of Model Binding system on your page.

You can pass this error message to Validation Summary on your page by setting ShowModelStateErrors = true.


Another new point to notice is TryUpdateModel method which is an explicit Model Binding. This method tells model to try and bind the data from current request in to this issue variable.

The binding expression in InsertItem template in gridview will look like


Previously we do something like this


Run the application you then will begin to see the under screen


The update method exactly looks like insert method but having an additional parameter named id which is an id of record in the current Model Binding expression.


We have seen the new data-related improvements in ASP.NET 4.5 Web Forms with Model Binders and Data annotations.



Orchard 1.8 Hosting - ASPHostPortal.com :: How to Use Infoset for Orchard 1.8 and Smart App Banners Module

clock October 9, 2014 12:34 by author Ben

Orchard 1.8 will have a nice overall performance enhancement permitting builders to use Infoset to retailer Content Component information. I talked somewhat about the swap to this doc db type of storage in Orchard CMS within the post, Orchard CMS Shift to Doc Storage and Module Development. I've been taking benefit of Infoset in my new Orchard Tasks. In doing this I desired to share an additional great Orchard Module that utilizes Infoset in Orchard 1.8 - Intelligent App Banners Module. Wise App Banners are a way iOS Developers promote their applications in the iOS Application Shop on their internet sites. This Orchard CMS Module helps iOS builders screen their Smart App Banners on their own Orchard Websites.

 

Infoset in Orchard 1.8

Take a peek at my earlier website post on Infoset to see an example of Retrieve and Shop used in the Content material Element to avoid wasting info within the Orchard CMS Databases. This new technique of storing Material Part info is supposed to increase the performance of Orchard 1.8 by minimizing the amount of table joins in Orchard. It's going to also reduce the chances of SELECT N + one queries.

From my viewpoint being an Orchard Developer, I also really like the decrease in boilerplate code when making Orchard Modules, Material Parts, etc. In many cases this can eradicate the necessity to develop custom made tables in the Orchard Database making use of Schema.CreateTable. It could also eradicate the need for a ContentPartRecord and/or customized Handler to the ContentPart in simple senarios. In fact, with all the Intelligent App Banner Module I just produced utilizing Infoset in Orchard 1.8, I indeed had all of these code financial savings.

Smart App Banner Orchard 1.8 Module

I built the Smart App Banners Orchard Module as an early Christmas existing for a existing consumer that develops iOS applications within the App Shop. I always believed it absolutely was awesome viewing Smart Application Banners on my iphone and iPad and desired to create an Orchard Module to show them on Orchard Internet sites.

The module includes a sensible App Banner Material Element that 1 can connect to Material Varieties in Orchard CMS. You are able to connect it to one thing as simple as a Page or perhaps your own personal custom Application Type. Incorporating the Content Element for the Page Content material Sort is so simple as attaching the Content material Element for the Content material Type.



As soon as you have added the Smart Application Banner Material Part to the Page Content material Sort you'll see the numerous settings for app-id, affiliate-data, and app-argument which will be utilized to display the Wise App Banner within the Orchard Web site. At a minimum, you will want to populate the App Id of your apple iphone or iPad Application to display the Smart Application Banner. The Affiliate Info and App Argument are optional for every the Apple Suggestions.



This takes place to be the App Id to the NFL Application in the App Retailer, which can show the next Smart App Banner within the site when seen using an iPad.



On condition that the iphone and iPad will be the two most popular cellular gadgets accustomed to browse the internet, it only tends to make perception that iOS Builders making use of Orchard CMS for his or her websites have a Smart Application Banners Orchard Module. It absolutely was also an enjoyable, personal venture for me to when again use Infoset in Orchard 1.8 to retailer and retrieve Content Component Data.

 



ASP.NET SignalR Hosting ASPHostPortal.com :: How you can Push Data from Server to Client Making use of SignalR

clock October 3, 2014 20:11 by author Ben

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 4.5.1 Hosting with ASPHostPortal.com :: How to Increase The Overall Performance of ASP.NET 4.5.1 in your App

clock October 1, 2014 07:23 by author Ben

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.



ASP.NET 4.5.2 Hosting with ASPHostPortal.com :: How to Bind Pages in ASP.NET

clock September 29, 2014 12:31 by author Kenny

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?



nopCommerce Hosting with ASPHostPortal.com :: Easy to Install nopCommerce Hosting on IIS

clock September 25, 2014 11:31 by author Kenny

What is nopCommerce?

nopCommerce is an open source e-commerce solution that is ASP.NET MVC 5.0 based with a MS SQL 2008 (or higher) backend database. nopCommerce is available for free. A solution with comprehensive features that is easy to use for new online businesses, yet powerful enough for the most demanding ecommerce expert.

Why You Should Use nopCommerce?

nopCommerce is new but very popular open source e-commerce solution. nopCommerce is available for free. A solution with comprehensive features that is easy to use for new online businesses, yet powerful enough for the most demanding e-commerce expert. nopCommerce is a secure, scalable and extendable e-commerce platform.

How to Install nopCommerce on IIS?

  • In this tutorial we will cover the process of setting up the nopcommerce( free asp.net shopping cart) solutions using IIS on localhost.
  • Start IIS. To start IIS click on Start->Control Panel->Administrative Tools ->Internet Information Services(IIS) Manager.
  • If IIS is not installed on your PC then follow this tutorial steps to install nop commerce on localhost Install IIS on Windows 7.
  • Download nopCommerce from here if not downloaded already http://www.nopcommerce.com/downloads.aspx. You can download nopcommerce with no source or with source code.
  • Here I have downloaded nopCommerce with no source code.
  • Unzip the downloaded file. Copy the content of the unzipped folder.
  • Use the control panel to create a MS SQL Server database, to hold the nopCommerce data.
  • Begin configuring nopCommerce, by visiting your web site or temporary URL.
  • It may take sever minutes for the initial page load.
  • Enter the MS SQL Server database details into the nopCommerce configuration and setup the database.
  • Enter a user name and password for the site administrator, and then complete the install.
  • The nopCommerce install should now be complete. Visit your web site or temp URL to view the site.

Advantages of nopCommerce

  • Here are some of the advantages that nopCommerce brings to the table when making your E-Commerce decision:
  • It’s FREE! This helps bring down the cost whether you’re building it yourself or having some developers make it for you.
  • It’s Open Source which means that you can expect a lot of customization options and community support.
  • It’s extremely flexible!
  • You’re going to need help. Unless you’re a website developer, you’ll likely need help setting everything up properly and learning how to maintain it. This is why nopCommerce is very popular with Website development agencies.

Best nopCommerce Hosting

Are you looking for best nopCommerce hosting? ASPHostPortal is the answer. ASPHostPortal.com provides full trust web hosting services for your nopCommerce 3.4 site. Full service and fully accountable, we expertly manage your hosting.

  • Uptime & Support Guarantees
    We are so confident in our hosting services we will not only provide you with a 30 days money back guarantee, but also we give you a 99.9% uptime guarantee.
  • Dedicated Application Pool
    With us, your site will be hosted using isolated application pool in order to meet maximum security standard and reliability.
  • Security
    We employ best in breed firewalls and perimeter network protection.


ASP.NET 4.5.2 Hosting with ASPHostPortal.com :: Responsive Layout Using Bootstrap in ASP.NET

clock September 22, 2014 13:29 by author Kenny

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



ASP.NET 4.5.2 Hosting with ASPHostPortal :: How to Publish and Deploy an ASP.NET Application in IIS

clock September 16, 2014 12:08 by author Kenny

Simple Way to Publish and Deploy an ASP.NET Application in IIS

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. While Internet Information Services (IIS, formerly Internet Information Server) is an extensible web server created by Microsoft for use with Windows NT family. IIS supports HTTP, HTTPS, FTP, FTPS, SMTP and NNTP.

In this post, we will describe you how to publish and deploy your ASP.NET application in IIS. Actually it is so simple thing, you can publish your web application to the File System and copy paste all the files to your server. After that, you can add a new website from IIS. If you are not sure what files you should include, it's better to choose 'All files in the project' from the Package/Publish Web. Otherwise choose 'Only files needed to run this application'. You can set this by right clicking on the web application in the solution explorer and choosing 'Package/Publish Settings'.

Right click on your project in the solution explorer and choose 'Publish'. From the dialog box, as the publish method, choose 'File System'. And choose some directory as the Target Location.

You can add the website by right clicking on the 'Sites' in IIS.

Then give a name to your site and select the Physical path from where you copied the site folder

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?



Cheap ASP.NET 4.5 Hosting

We’re a company that works differently to most. Value is what we output and help our customers achieve, not how much money we put in the bank. It’s not because we are altruistic. It’s based on an even simpler principle. "Do good things, and good things will come to you".

Success for us is something that is continually experienced, not something that is reached. For us it is all about the experience – more than the journey. Life is a continual experience. We see the Internet as being an incredible amplifier to the experience of life for all of us. It can help humanity come together to explode in knowledge exploration and discussion. It is continual enlightenment of new ideas, experiences, and passions


Author Link


 

Corporate Address (Location)

ASPHostPortal
170 W 56th Street, Suite 121
New York, NY 10019
United States

Tag cloud

Sign in