July 2012 | Coding Cluster - using asp.net, c#, mvc 4, iphone, php, ios, javascript, in asp.net mvc 3 & more

Solution: How to remove special characters from textbox using JavaScript (onchange,onkeyup)

Monday

Client side validation: Remove special characters from textbox before save:

Sometime you might come into a situation to remove the specials characters in the textbox while users give the input. Below JavaScript sample code will help you to remove those char from textbox. The following script delete all the special character on textbox "onkeyup" event.

Source code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Remove Special Characters from the Textbox - Coding cluster</title>
    <script language="javascript" type="text/javascript">
        function deleteSpecialChar(txtName) {
            if (txtName.value != '' && txtName.value.match(/^[\w ]+$/) == null) 
            {
                txtName.value = txtName.value.replace(/[\W]/g, '');
            }
        }
    </script>
</head>
<body>
    <form id="form1" >
    <div>
        <input id="txtName"  type="text" onkeyup="javascript:deleteSpecialChar(this)" />

    </div>
    </form>
</body>
</html>

Demo:Remove Special Characters from the Textbox - Coding cluster
That's all. If this post is useful for you , please share this knowledge to your friends. Thanks!

Various methods to call javascript function from asp.net code behind

Tuesday

Execute JavaScript function from ASP.NET code behind using c#:
Calling a JavaScript function from codebehind is quiet simple. Here's how to do it. You can use ClientScript.RegisterStartupScript() to do what you want, like this:

Declare a JavaScript function in your code as shown below.

Javscript:

<head runat="server">
    <title>Call JavaScript From CodeBehind</title>
    <script type="text/javascript">
        function fnSample() {
            alert('Codingcluster');
        }
    </script>
</head>

In order to call it from code behind, use the following code in your Page_Load

C# method 1:

protected void Page_Load(object sender, EventArgs e)
{
    if (!ClientScript.IsStartupScriptRegistered("alert"))
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(),
            "alert", "fnSample();", true);
    }
}

C# method 2:

protected void Page_Load(object sender, EventArgs e)
{
   ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "fnSample", "fnSample();", true);
}

C# method 3:

 protected void btnSubmit_Click(Object sender, EventArgs e)
    {
        var script = "alert('Hai codingcluster');";
        ClientScript.RegisterStartupScript(typeof(Page), "MyAlert", script, true);
    }

The format is (type, scriptKey, scriptText, wrapItInScriptTags).

The Page.ClientScript.RegisterStartupScript() allows you to emit client-side script blocks from code behind.

That's all. If this post is useful for you , please share this knowledge to your friends. Thanks!

Download: ASP.NET MVC 4 create sample project / web application in c#

Thursday

Creating a Web Application using asp.net mvc 4 in C# :

In this tutorial I'm going to explain how to building an ASP.NET MVC 4 Web application using Visual Studio 2010 Ultimate with Service Pack 1 . Before you going to create a MVC 4 project we know about MVC and MVC 4.

What is ASP.NET MVC?
MVC stands for model-view-controller. MVC is a pattern for developing applications that are well architected, testable and easy to maintain. MVC-based applications contain:

Controllers: Classes that handle incoming requests to the application, retrieve model data, and then specify view templates that return a response to the client.

Models: Classes that represent the data of the application and that use validation logic to enforce business rules for that data.

Views: Template files that your application uses to dynamically generate HTML responses.

What is ASP.NET MVC 4?
According to asp.net ASP.NET MVC 4 is a framework for building scalable, standards-based web applications using well-established design patterns and the power of ASP.NET and the .NET Framework. It installs side-by-side with ASP.NET MVC 3.

Software Requirements for ASP.NET MVC 4 :
Before you start, make sure you've installed the prerequisites listed below. You can install all of them by clicking the following links:

PowerShell 2.0
.NET version 4.0
Visual Studio 2010 with Service Pack 1 (or)
Visual Web Developer Express 2010 with Service Pack 1.
ODBC .NET Data Provider
SQL Server Compact 4.0 (If you using SQL database)
SQL Server Compact Toolbox

And you can

Downloads asp.net mvc 4 requirements from:

ASP.NET MVC 4 RC

ODBC .NET Data Provider

Windows PowerShell 2.0

Visual Studio 2010 SP 1

SQL Server Compact 4.0

SQL Server Compact Toolbox

Create new project with asp.net mvc 4 using C#:
Follow the below steps to Create new web application with asp.net mvc 4 using C#

Step 1: Open Visual Studio 2010 Ultimate if not already opened.

Step 2: Select the File --> New --> Project menu command. In the New Project dialog, select the Visual C# --> Web template on the left pane tree, and choose ASP.NET MVC 4 Web Application. Name the project MVC4Sampleproject, select a location (or leave the default) and click OK.

Step 3: In the New ASP.NET MVC 4 Project dialog box, select the Internet Application project template and click OK. Make sure you have Razor selected as the View Engine.

Step 4: That's it. A new asp.net mvc 4 project was created by you. Now Press F5 to run the solution, and then browse to the following URL http://localhost:[port]/MVC4Sampleproject/(the [port] value depends on the current port where the application was launched). If you want to remove the port number from your asp.net mvc 4 project you need to Running your ASP.NET MVC app from a virtual directory in IIS7

Sample asp.net mvc 4 web page:
This is a sample screen shot for an asp.net mvc 4 web page.

And you can download the sample asp.net mvc 4 web application source code from here.

If you want learn more about asp.net mvc 4. If you want to create an asp.net mvc 4 application with models - Views - Controllers. Here you can find a very good tutorial http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4
|
\|/
Don't forgot to share this knowledge to your friends. Cheers!

ASP.NET MVC 4 and IIS7: How to Configure/Run ASP.NET MVC4 web application in IIS 7

Tuesday

Run ASP.NET MVC4 projects/websites on IIS7(create a virtual directory and run asp.net mvc 4 project on IIS7):

In this article I'm going to explain how to run asp.net mvc4 project with iis7. This is the first time I'm working in asp.net MVC4 with VS-2010 and .NET4.0. When run my project at first time its run with a port number. So I create a virtual directory and run it on IIS7, the app comes up with a blank web page. After a long struggle i found the following solution from net.

Steps to run ASP.NET MVC 4 project in iis7:
Follow the below steps to configure the MVC4 Application framework4.0 in the IIS7.0 (Windows 7)

Step 1: Click start and click Web Platform Installer (WPI)

Step 2: Choose tab Products from the top and In the left pane select All.

Step 3: Install IIS 7 Recommended Configuration.

Step 4: Right click the your project solution (here Firstmvcsite)and select Properties.

Step 5: Select Web in the left pane --> Under Servers, select the Use Local IIS Web server radio button --> Select the Create Virtual Directory button.

If you get the message like "Unable to create the virtual directory. To access Web sites on the local IIS Web server, you must run Visual Studio under an Administrator account".

Just click start --> find Visual Studio --> right click and Run as Administrator.

Now you do the Step 5 again you will get success message.

Step 6: Go to start --> Run --> type inetmgr, and go to Internet Information Services (IIS) Manager and drill down in the Default Web Site and choose your site(here Firstmvcsite) and select Browse *:80(http) in the right pane.

Now you will see your project run without port number.

That's all. If this post is useful for you , please share this knowledge to your friends. Thanks!

how to make html.actionlink with an image(add header logo in asp.net MVC 4 project)

Monday

MVC - @Html.ActionLink as a button or an image:
The following sample code used to get Html.ActionLink to render as a button or an image instead of a link. To do this we just apply a CSS class to the htmlAttributes object. The following sample code also used for add/change logo for your asp.net MVC 4 projects.

To change your ASP.NET MVC 4 project logo just open the "_Layout.cshtml" find the following line

<p class="site-title">@Html.ActionLink("*****", "Index", "Home")</p>

and replace with the following line of code

<p>@Html.ActionLink("*****", "Index", null, new { @class = "site-logo" })</p>

and then add the following class in your stylesheet(site.css)

a.site-logo  {

 background: url(../Images/header-logo.png) no-repeat top left;

 display: block;

 width: 100px;

 height: 100px;

 text-indent: -9999px; /* hides the link text */

That's it now your header logo act like a image button.

If this post was help to you. Then Share this to your friends. Thanks!

Subscribe Now

Popular Posts

Blog I Read

Coding Cluster

Solution: How to remove special characters from textbox using JavaScript (onchange,onkeyup)

Various methods to call javascript function from asp.net code behind

Download: ASP.NET MVC 4 create sample project / web application in c#

ASP.NET MVC 4 and IIS7: How to Configure/Run ASP.NET MVC4 web application in IIS 7

how to make html.actionlink with an image(add header logo in asp.net MVC 4 project)

Search This Blog

Followers

Archives

Contact Me

Tags

Visitors

About

Rank

RECENT POSTS

Boost