Three steps to use jQuery UI in ASP.NET MVC 5

[Origin]: https://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/

Many developers struggle to work with jQuery UI in an ASP.NET MVC application. In this post, I will show you three steps required to start working with jQuery UI in an ASP.NET MVC application. At the end of the post we will take a look at working with the autocomplete widget.
The following three steps will let you work with jQuery UI in an ASP.NET MVC application:
Step 1: Add the jQuery UI Reference
Add the jQuery UI reference into the project using the NuGet manager. Once this is done, you should find the reference added in the Content folder and the Scripts folder.

jqueryui1

Step 2: Bundle the required files
Open the BundleConfig.cs file. In this file add two entries, one for the jQuery UI scripts and other for jQuery UI CSS.
Add the script entry as follows:

Next add the CSS files for jQueryUI widgets.  CSS for all the widgets can be bundled like this:

For the purpose of this example, let’s say you are only working with the autocomplete widget. In this case, you would only bundle the core.css and autocomplete.css as shown below:

Step 3: Refer to the Bundles
Once the bundles for jQuery UI have been created, you need to add them to the layout file. That can be done as follows:

By default you will find the jQuery bundle at the end of the layout file. To work with jQuery UI widgets, you should move the jQuery bundle to the top of the file and also include the bundles for jQuery UI CSS and Scripts.
You have now completed the three steps necessary to work with jQueryUI in an ASP.NET MVC application.
Use jQueryUI Widgets 
Now let’s look at the autocomplete widget in action.  I have created a controller for returning JSON data as follows:

We will now bind the returned JSON from the GetMP() action to the autocomplete widget. On the razor view, you can create an autocomplete widget like this:

Make sure the view is using the layout file in which you added the reference of the bundles.
Summary 
We’ve seen in this post that working with jQuery UI widgets is as simple as following three simple steps:

  1. Add the  jQuery UI reference
  2. Bundle the required files
  3. Refer to the bundles

The autocomplete widget is also a helpful tool when working with jQuery UI bundles.
I hope this post was useful. Happy coding.

How to add jQuery UI to your ASP.NET MVC App in 3 steps

[Origin]: https://omarnegronm.wordpress.com/2015/08/29/how-to-add-jquery-ui-to-your-asp-net-mvc-project-in-3-steps/

This is a quick demo on how to add jQuery UI to your MVC project in Visual Studio 2015 but the process applies to earlier versions as well. For this example, I’ll use the accordion widget.

This is how the page looks before applying the accordion widget…

img-3

and after…

img-11The index.cshtml markup:

@{
    ViewBag.Title = "Home Page";
}
 
<div id="accordion" class="prettyprint">
    <h3>Section 1</h3>
    <div>
        <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
            suscipit faucibus urna.
        </p>
    </div>
    <h3>Section 3</h3>
    <div>
        <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
            Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
            ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
            lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>
            Cras dictum. Pellentesque habitant morbi tristique senectus et netus
            et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
            mauris vel est.
        </p>
        <p>
            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
            inceptos himenaeos.
        </p>
    </div>
</div>
 
@section scripts
{
    <script>
        $('#accordion').accordion();
    </script>
     
}

Notice at the bottom the @scripts section. This is defined in your _Layout.cshtml view. There you will find the @RenderSection method being called as you can see below:

_Layout.cshtml

    ...
 
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
 
    @RenderSection("scripts", required: false)
</body>
</html>

1) Install jQuery.UI.Combined

jQuery is already included in your project but not jQuery-UI. Install jQuery.UI.Combined with the Nuget Package Manager. This package includes all of the jQuery-UI widgets and animations.

img-4

A quicker way of installing it is by typing the following command in the Package Manager Console:

PM> Install-Package jQuery.UI.Combined

2) Add the jQuery-UI script and style bundles

Add the script and style bundles to your BundleConfig.cs file in the App_Start folder.

using System.Web;
using System.Web.Optimization;
 
namespace jQueryDemo
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
 
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));
 
            // Add the jquery-ui script bundle
            bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));
 
            // Add the jquery-ui css bundle
            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/all.css"));
             
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
 
            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));
 
            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

3) Call the Script and Style Render Methods in the Layout View

Finally, call the @Scripts.Render() and @Styles.Render() methods in your _Layout.cshtml after the jQuery render method is called.

    ...
     
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
 
    <!-- Including the jquery-ui script and style bundles -->
    @Scripts.Render("~/bundles/jquery-ui")
    @Styles.Render("~/Content/themes/base/css")
 
    @RenderSection("scripts", required: false)
</body>
</html>

That’s it! Build your project, refresh the page, and enjoy the results. If you don’t include the installation, it’s basically a two-step process. Include the script and style bundles in your BundleConfig file and call the render methods from your layout view.

Applying a theme

If the base theme is too plain-looking you might want to go for one of the many different themes offered by jQuery-UI. Let’s go ahead an apply the Redmond theme to our project. Begin by installing jQuery.UI.Themes through the Nuget Package Manager. This package includes all of the jQuery themes in one download.

img-12

Once it’s installed check that the themes appear in your solution explorer in the Content > Themes folder.

img-13

Now you need to add the theme’s style bundle in your BundleConfig.cs file and remove the base theme. In our case, we’ll make sure the style bundle points to redmond/jquery-ui-redmond.css.

using System.Web;
using System.Web.Optimization;
namespace jQueryDemo
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));
            
            bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));
            // Removing the base theme.
            // bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            //            "~/Content/themes/base/all.css"));
            // Adding the 'redmond' style bundle.
            bundles.Add(new StyleBundle("~/Content/themes/redmond/css").Include(
                        "~/Content/themes/redmond/jquery-ui.redmond.css"));
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));
            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

Finally, head to your _Layout.cshtml and change @Styles.Render(“~/Content/themes/base/css”) to @Styles.Render(“~/Content/themes/redmond/css”)

  ...
 
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
 
    <!-- Including the jquery-ui script and style bundles -->
    @Scripts.Render("~/bundles/jquery-ui")
    @Styles.Render("~/Content/themes/redmond/css")
 
    @RenderSection("scripts", required: false)
</body>
</html>

Rebuild the project and the theme should now be active when you launch the application.

img-14

Solution to “Unable to Launch the IIS Express Web Server”

[Origin]: http://sibeeshpassion.com/solution-to-unable-to-launch-the-iis-express-web-server/

This article will help you to overcome the error Unable to Launch the IIS Express Web Server. Today I encountered the issue “Unable to launch the IIS Express Web Server” while I was running my Visual Studio 2012. So I thought of sharing how to resolve that issue. I hope it will help someone.

Unable to Launch the IIS Express Web Server

Background

In my team we have 5 to 10 members. Since we wanted to do a build for our current application, I used “Get the Latest files from the server”. (We are using TFS.) Then when I run my application I was getting this error.

The cause of this error is, someone has checked in the solution file with his port number (the port number he was using). When I took the latest, it was set in my solution file also. We must take the latest solution file only when it is required. So here I will share the remedy for the preceding issue.

Procedure to solve this issue

Step 1

Right-click on your solution and select Properties as shown in the following figure.

 

Unable to Launch the IIS Express Web Server

 

Step 2

Select “Web” from the left menu.

 

Unable to Launch the IIS Express Web Server

 

Step 3

Under “Use local IIS server” change the port number from http://localhost:58030/ to another one.

 

Unable to Launch the IIS Express Web Server

 

Step 4

Here I have changed http://localhost:58030/ to http://localhost:58031/ .

Bingo! We have done it.

 

Unable to Launch the IIS Express Web Server

 

Step 5

Now please run again your application. The issue will be solved.

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this issue? Does this solution solve your issue?I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I am able to.

Kindest Regards
Sibeesh Venu

Unable to launch the IIS Express Web server

[Origin]: http://stackoverflow.com/questions/15873126/unable-to-launch-the-iis-express-web-server

I had the exact same problem.
The reason – bad IIS config file.

Try deleting the automatically-created IISExpress folder, which is usually located at %userprofile%/Documents, e.g. C:\Users\[you]\Documents\IISExpress.

Don’t worry, VS should create it again – correctly, this time – once you run your solution again.


EDIT: Command line for deleting the folder:

rmdir /s /q "%userprofile%\Documents\IISExpress"

shareedit

No ASP.NET MVC 5 Web Application Template on VS 2012?

[Origin]: http://stackoverflow.com/questions/20607648/no-asp-net-mvc-5-web-application-template-on-vs-2012

After creating a new project using ASP.NET MVC 5 Empty Project, you can right click on the project, then click Add.. > New Scaffolded Item..., select MVC on the left, then MVC 5 Dependencies and choose Full dependencies from the prompt.

This will add a default layout (Views\Shared\_Layout.cshtml), Content folder, Scripts folder with bootstrap, jquery, modernizr, etc, and other things the Web Application template creates.

If you get the error “CS0103: The name ‘Styles’ does not exist in the current context” just add <add namespace="System.Web.Optimization"/> under <namespaces> in Views/web.config

shareedit

How do I enable HTTP PUT and DELETE for ASP.NET MVC in IIS?

[Origin]: http://stackoverflow.com/questions/12440277/how-do-i-enable-http-put-and-delete-for-asp-net-mvc-in-iis

Go to Handler Mappings in your IIS Manager. Find ExtensionlessUrlHandler-Integrated-4.0, double click it. Click Request Restrictions… button and on Verbs tab, add both DELETE and PUT. enter image description here


EDIT: Possible WebDav Publisher issue

You’ve mention on a deleted post you were running on a 2008 server right? Try removing webDav role, or disable it from your site config: on system.webServer -> modules section, remove WebDAVModule module:

<system.webServer>
  <modules>
    <remove name="WebDAVModule" />
  </modules>
  <handlers>
    <remove name="WebDAV" />
  </handlers>
</system.webServer>
shareedit

Asp.NET Web API – 405 – HTTP verb used to access this page is not allowed – how to set handler mappings

[Origin]: http://stackoverflow.com/questions/9854602/asp-net-web-api-405-http-verb-used-to-access-this-page-is-not-allowed-how

I wrote REST service using ASP.NET Web API. I’m trying to send HttpDelete request, however I get the following error:

405 - HTTP verb used to access this page is not allowed

I think I’m close to the solution, I found out that I should enable IIS remote management , go to Handler Mappings section and add DELETE verb to the appropriate position… but the problem is that there is a lots of different positions on the list… (sth like here: http://www.somacon.com/p126.php).

Which one should I edit? Few of them don’t have extension, e.g. “ExtensionUrlHandler-Integrated-4.0” and I added DELETE verb to it, but it still doesn’t work…

It was just a shot in the dark to modify that one, so should I modify different position? If so, which one? Or maybe is there anything more what I should do?

The same web service work perfectly fine on my local service, so I guess the problem is with the remote IIS…

Greetings

shareedit

Common cause for this error is WebDAV. Make sure you uninstall it.

shareedit

You don’t need to uninstall WebDAV, just add these lines to the web.config:

<system.webServer>
  <modules>
    <remove name="WebDAVModule" />
  </modules>
  <handlers>
    <remove name="WebDAV" />
  </handlers>
</system.webServer>
shareedit