HTTP Error 403.14 – Forbidden The Web server is configured to not list the contents


While hosting the asp.net or asp.net MVC application on IIS, you might have faced this exception on browser
“HTTP Error 403.14 – Forbidden The Web server is configured to not list the contents”

To fix this issue, you might have to check the two possible setting in IIS

First: Make sure that the .NET Framework version value is v4.0.

iis_error1

For this you have to do like this

1. Open the Run dialog, type inetmgr and then click OK. This opens the IIS Manager.

2. In the left tree-view, locate the Sites node and find the Default Web Site node under it (or the name of the site where the error message appears).

3 Right-click the node and select Manage web site -> Advanced settings…. Note the name of the value Application pool. Close this dialog.

4. In the treeview to the left, locate and select the node Application pools.

5. In the list to the right, locate the Application pool with the same name as the one you noted in the web site settings. Right-click it and select Advanced settings

6. Make sure that the .NET Framework version value is v4.0. Click OK.


Second: Asp.net is not registered on Server

For this you have to go to
>>Visual Studio
>> Then Visual Studio Tool >> Visual Studio Command Prompt

>> Then Go to the given path C:\Windows\Microsoft.NET\Framework64\v4.0.30319
>> Then run the aspnet_regiis.exe -ir

iis_error

Learn Jquery with in 15 hrs

Posted in Jquery. Tags: . Leave a Comment »

Jquery Ajax in Asp.net MVC (Part 16)


In this post i will show you how to use Jquery Ajax method in Asp.net MVC. This topic is very vast but I will create very simple example to test this method in asp.net MVC.

calling_jquey_ajax

Step 1: Create one blank asp.net MVC application. I hope you are knowing the basic concept of asp.net MVC.

Step 2: Create Emp Class in Model folder and write the code like this

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

namespace AjaxDemoInMVC.Models
{
    public class Emp
    {
        public int Id { get; set; }
        public string EmpName { get; set; }
        public string EmpAddress { get; set; }
    }
}

Step 3: Create the HomeController and the DisplayEmpDetail Method like this


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

namespace AjaxDemoInMVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

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

        [HttpPost]
        public JsonResult DisplayEmpDetail(int id)
        {
            Emp obj = new Emp
            {
                 Id=id,
                 EmpName="Chandradev",
                 EmpAddress="Bangalore"
            };
            return Json(obj);
        }
    }
}

Note: Here we are returning the values as Json format.

Step 4: Create the Index view and Write the code for calling the method using Jquery Ajax method as given below


@model AjaxDemoInMVC.Models.Emp

@{
    ViewBag.Title = "Index";
}

<fieldset>
    <legend>
        Sample code for Calling Jquery Ajax in asp.net MVC
    </legend>

    <br />

EmpId: <input type="text" id="txtId" />
<input type="button" id="btnAjax"  value="Click Here to Call Jquery Ajax" />
</fieldset>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
    $(function () {
        $("#btnAjax").click(function () {
            $.ajax({
                type: "POST",
                url: "Home/DisplayEmpDetail",
                data: '{Id: "' + $("#txtId").val() + '" }',
                contentType: "application/json; charset=utf-8",
                success: function (response) {
                    alert("EmpName: "+ response.EmpName + "   EmpAddress: " + response.EmpAddress);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }

            });

        });

    });
</script>

Note : In the above code we show that we are using jquery Ajax method on button Click event and Ajax method expect the type, URL,Data,ContentType,Success,Failure and error parameter.

Type: means Type of Request in Ajax method

URL: Means Method name which are using for Ajax functionality.

data: what are the input data being used in method

ContentType: What are the content type consuming in Ajax method. We are giving data in Json format in DisplayEmpDetail Method.

success: What will return the method on successfully execution.

failure: It will define what message should be display on failure of Ajax method
error: It will display the error message.

Summary: We show that how to use Jquery Ajax method in asp.net MVC application.

Ajax in Jquery (Part 15)


If you are the web developer and you are not using ajax functionalities in your web application then you are missing one of the cool features of web technology.

What is the ajax ?

Ajax is the asynchronous JavaScript with xml. which is used for doing the asynchronous communication between client and server. It will avoid unnecessary round trip between client and server so it will give good performance as compare to old technology.

Ajax is one of the important concept of jquery library. Using ajax in jquery we can create very interactive and light weight web web application.
Jquery library provide the 5 methods for doing the ajax functionalities. These as given below
1. Load
2. getjson
3. GET
4. POST
5. Ajax

In this post, i will include some of the important methods which are being used frequently

Load:

Load method is used to load the data from a server and put the data in the given selected area.

load_method

Step 1: Create one notepad text file and keep some dummy text data on it. I have created Test.txt and kept in the parent folder.

Step 2: Write the code for calling the “Test.txt” file in given Div as given below


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .bckColor {
            background-color:silver;
        }
        
    </style>
    <script>
        $(function () {
            $("button").click(function () {

                $("#div1").load("Test.txt");
            });

        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for calling load method in Jquery.
        </legend>
       <div id="div1"></div>
       <button>Click Here</button>
     </fieldset>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

Summary :

In the above example we show that Load method is used to load the notepad text document in the given div area in asynchronous way.

Posted in Jquery. 1 Comment »

Filter and Find method in Jquery Traversing (Part 14)


This is one of the very important question in interview. I have got this question each and every interview. So i decided to write one small article on this question.

Filter(Selector):

This method is used to search the element in entire DOM element.

filter

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .bckColor {
            background-color: silver;
        }
    </style>
    <script>
        $(function () {
            $("div").filter(".bckColor").css("background-color", "green");

        });
    </script>
</head>
<body>
    <fieldset>
        <legend>Sample code for filter in Jquery
        </legend>
        <div class="bckColor">
            Parent Div
           <div class="bckColor">
               Child Div
           <p>
               This is the paragraph
           </p>
           </div>
        </div>
    </fieldset>
</body>
</html>

In the above example we saw that background of div element is being changed on basis of filter(selector). Filter(Selector) method is searching the element in entire DOM element.

Find(Selector):

Find method is used to search the element in only child DOM element.

find

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .bckColor {
            background-color:silver;
        }
        
    </style>
    <script>
        $(function () {
            $("div").find(".bckColor").css("background-color", "green");

        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for find in Jquery
        </legend>
       <div class="bckColor"> Parent Div
           <div class="bckColor"> Child Div
           <p>
               This is the paragraph
           </p>
           </div>
       </div>
     </fieldset>
</body>
</html>

In the above example we saw that find(selector) is searching the element in only child DOM element.

Summary:

In the both example we saw that filter is used for searching the element in entire DOM element while Find method is used for searching element on child DOM element.

Posted in Jquery. 1 Comment »

Parent,Parents and ParentUntil Method of Jquery Traversing (Part 13)


In this post we wil see when to use the parent ,Parents and ParentUntil method of Jquery traversing . These all three methods look like similar but their functionality are completely different.

parent()
>> It is used for selecting the parent element of given selector element.

parent

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 1px solid;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {
            $("span").parent().css({ "color": "red", "border": "2px solid red" });
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>This is the demo example of Parent method in Jquery</legend>
        <div class="ancestors">
     <div style="width:500px;">Grand Parent of span
       <div style="width:400px;"> Parent of span
        <span>span</span>
     </div>
  </div>
  </div>
    </fieldset>
</body>
</html>

In the above example we saw that parent div of span has been only highlighted by red color.

parents()

>> It is used for selecting the all parents element of given selector

parents


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {
            $("span").parents().css({ "color": "red", "border": "2px solid red" });
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>This is the demo example of Parents method in Jquery</legend>
        <div class="ancestors">
     <div style="width:500px;">Grand Parent of Span
       <div style="width:400px;"> Parent of span
        <span>span</span>
     </div>
  </div>
  </div>
    </fieldset>
</body>
</html>

In the above example we saw that Parents method is used for selecting the all parents elements of given selector in DOM element.

ParentsUntil(Selector)

>> It is used for selecting the parents element of given selector on given condition.

parentuntil




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {

            $("p").parentsUntil("div").css({ "color": "red", "border": "2px solid green" });
        });
    </script>
</head>

<fieldset>
    <legend>This is the demo example of Parent method in Jquery</legend>
    <body class="ancestors">
        body (great-great-grandparent)
         <div style="width: 500px;">
             div (great-grandparent)
        <ul>
            ul (grandparent)
         <li>li (direct parent)
        <p>This is the paragraph</p>
         </li>
            
        </ul>
         </div>
    </body>
</fieldset>
</html>

In the above example we saw that parentuntil is used for selecting the DOM element from given selector element to given parent element.

Posted in Jquery. 1 Comment »

each,eq and not method of Jquery Traversing (Part 12)


In this post i will include some of the important methods of Traversing Which are very useful in daily life of web developer.

each: It is used to do looping in the dom element.

Sample code for .each method in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        p {
            color: red;
            text-align: center;
            cursor: pointer;
            font-weight: bolder;
            width: 300px;
        }
    </style>
    
</head>
<body>
    <fieldset>
       <legend>This is the sample code for each method in Jquery.</legend>
    
<p>This is the paragraph1</p>
<p>This is the paragraph2</p>
<p>This is the paragraph3</p>
    
    </fieldset>
    <script>
        $(document.body).click(function () {
            $("p").each(function () {
                if (this.style.color !== "blue") {
                    this.style.color = "blue";
                } else {
                    this.style.color = "";
                }
            });
        });
    </script>
</body>
</html>

Before Click Event

after_click_each

After Click Event

before_click_each

In the above example we saw that each method is doing looing in each paragraph and changing the color from red to blue.

.eq:
>> It is used to filter the DOM elemnts on basis of index id of dom element.

Sample code for .eq in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").eq(2).css("background-color", "silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for filter in Jquery
        </legend>
    

 <ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
        </fieldset>
</body>
</html>

eq

In the above example we saw that eq method is used for finding the index of list Item(li) then changing the background color to expected color.

Not(selector)

>> It is used to remove the elements from the set of matched elements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").not(":even").css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for not in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>

not

In the above example we saw that not(“:even”) selector is used for removing the even list item(li) from the DOM element.

Posted in Jquery. 1 Comment »