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.

Advertisements

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

Setting “checked” for a checkbox with jQuery?

[Originally posted by]: http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery

jQuery 1.6+

Use the new .prop() function:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x and below

The .prop() function is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery’s unit tests prior to version 1.6 and is preferable to using

$('.myCheckbox').removeAttr('checked');

since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it – a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checkedattribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.

Any version of jQuery

If you’re working with just one element, you can always just modify the HTMLInputElement‘s .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() functions instead of this is that they will operate on all matched elements.

shareedit

 

jQuery checkbox change and click event

[Originally posted by]: http://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event

Well I don’t see an answer that matches mine so I’ll post this. Tested in JSFiddle and does what you’re asking for.This approach has the added benefit of firing when a label associated with a checkbox is clicked.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});
shareedit

How can I close a browser window without receiving the “Do you want to close this window” prompt?

http://stackoverflow.com/questions/57854/how-can-i-close-a-browser-window-without-receiving-the-do-you-want-to-close-thi

For security reasons, a window can only be closed in JavaScript if it was opened by JavaScript. In order to close the window, you must open a new window with _self as the target, which will overwrite your current window, and then close that one (which you can do since it was opened via JavaScript).

window.open('', '_self', '');
window.close();
shareedit

How to pass multiple parameters from ajax call to mvc controller

http://stackoverflow.com/questions/20193888/how-to-pass-multiple-parameters-from-ajax-call-to-mvc-controller

You’re making an HTTP POST, but trying to pass parameters with the GET query string syntax. In a POST, the data are passed as named parameters and do not use the param=value&foo=bar syntax. Using jQuery’s ajax method lets you create a javascript object with the named parameters, like so:

$.ajax({
  url: '/Home/SaveChart',
  type: 'POST',
  async: false,
  dataType: 'text',
  processData: false,    
  data: { 
      input: JSON.stringify(IVRInstant.data), 
      name: $("#wrkname").val()
  },
  success: function (data) { }
});
shareedit