Archive for March 21st, 2012

How to deploy ASP.NET MVC3 application on the server?

Let us discuss how you can deploy ASP.NET MVC 3 application on server without any support from web hosting providers. .NET framework 4.0 is required to run MVC application. This approach does not require ASP.NET MVC 3 installation on the server.

Background:

When we install ASP.NET MVC 3 on a machine, required assemblies are automatically registered in Global Assembly Cache (GAC). GAC is a directory where .NET assemblies can be installed for global sharing. If we use shared hosting we might not be able to deploy these assemblies in GAC. Following simple steps will help you to deploy MVC application while using shared hosting services:

Manual method:

This is a manual way to deploy ASP.NET MVC 3 with Razor in BIN directory. When you run application in Visual Studio 2010 with .net framework 4 and MVC 3 installed on your machine the following folders are automatically created: C:\Program Files\Microsoft ASP.NET\ASP.NET MVC 3 C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages. These folders also contain an “Assemblies” folder. ASP.NET MVC references following additional assemblies: System.Web.Mvc Microsoft.Web.Infrastructure System.Web.Razor System.Web.WebPages System.Web.WebPages.Razor To deploy your application on shared server with no support from your hosting company you can simply copy these DLL files and paste them to your BIN folder.

Make DLLs local while publishing:

If you don’t want to copy these files manually or don’t have permissions to copy and paste these files you can use this method. The DLL files mentioned in the manual method can be included in the Bin folder when you publish your project to a production. To include them to the Bin folder, go to your MVC application project and expand the ‘References’ node in project tree. Select above assemblies then right click and select ‘Properties’ and change ‘Local Copy’ to True as it is False by default. If Local Copy attribute is set to TRUE then selected DLL will be included in ‘Bin’ folder when you publish your project.

Designing a division modal (Div Modal) Box Overlay

Designing a division modal (Div Modal) Box Overlay

Lets start with the designing of the overlay, before procedding with the overlay i would like to introduce why this overlay is named as such. as this overlay is designed using <div> tags used inside html programming language so i named it as such (you are free to name it as like you want)

there are four steps to design this overlay.

1.  Making an div overlay

2. giving it some attractive look

3. functioning of the overlay

4. Calling overlay on some action using mouse

here we goes with the design of the overlay :-

1.  Making an div overlay

<div id=”modalPage”>
<div>
</div>
<div>
<div>
<div><a href=”test.html”>X</a></div>
<div>
<p>i want to show the text box values here….</p>
</div>
</div>
</div>
</div>

Test.html is the name of the page where we are designign the overlay

2. giving it some attractive look

<style type=”text/css”>
body
{
margin: 0px;
}
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px; left: 0px;
}
.modalBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%; height: 100%; background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.modalContainer
{
position: absolute;
width: 300px;
left: 50%;
top: 50%;
z-index: 750;
}
.modal
{
background-color: white;
border: solid 4px black; position: relative;
top: -150px;
left: -150px;
z-index: 1000;
width: 300px;
height: 300px;
padding: 0px;
}
.modalTop
{
width: 292px;
background-color: #000099;
padding: 4px;
color: #ffffff;
text-align: right;
text-decoration: none;
}
.modalTop a, .modalTop a:visited
{
color: #ffffff;
}
.modalBody
{
padding: 10px;
}
</style>

3. functioning of the overlay

<script language=”javascript” type=”text/javascript”>
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = “block”;
document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID)
{
document.getElementById(divID).style.display = “none”;
}

</script>

4. Calling overlay on some action using mouse

<body>
<input id=”Button1″ type=”button” value=”Click here to be naughty” onclick=”revealModal(‘modalPage’)” />
</body>

so going with the pattern we used here to design the overlay the page layout and design using html programming language can be given as follows :-

<html>
<title>Divison Modal (Div Modal) Box</title>
<head>
<div id=”modalPage”>
<div>
</div>
<div>
<div>
<div><a href=”test.html”>X</a></div>
<div>
<p>i want to show the text box values here….</p>
</div>
</div>
</div>
</div>
<style type=”text/css”>
body
{
margin: 0px;
}
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px; left: 0px;
}
.modalBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%; height: 100%; background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.modalContainer
{
position: absolute;
width: 300px;
left: 50%;
top: 50%;
z-index: 750;
}
.modal
{
background-color: white;
border: solid 4px black; position: relative;
top: -150px;
left: -150px;
z-index: 1000;
width: 300px;
height: 300px;
padding: 0px;
}
.modalTop
{
width: 292px;
background-color: #000099;
padding: 4px;
color: #ffffff;
text-align: right;
text-decoration: none;
}
.modalTop a, .modalTop a:visited
{
color: #ffffff;
}
.modalBody
{
padding: 10px;
}
</style>
<script language=”javascript” type=”text/javascript”>
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = “block”;
document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID)
{
document.getElementById(divID).style.display = “none”;
}

</script>
</head>
<body>
<input id=”Button1″ type=”button” value=”Click here to be naughty” onclick=”revealModal(‘modalPage’)” />
</body>
</html>

and here is the div overlay looks like the design

that’s all ..

%d bloggers like this: