jQuery UI - Date Picker in MVC4

 

In the MVC view, change from EditorFor() to TextBoxFor() and add a htmlAttribute @class = “data-datepicker”

 

In the script,

1. get and format now as today date

2. $(‘input.data-datepicker’) to target the field defined in view

3. .attr(“value”, now) to assign default value of today

4. .datepicker() to enable jQuery UI datepicker function

 

In the MVC view, add 3 references

1. jQueryUI (~/bundles/jqueryval)

2. CSS of jQueryUI (~/Content/themes/base/css)

3. Our own javascript file (~/bundles/MyScript)

 

In the BundleConfig.cs, we can see jquery.ui.datepicker.css included in ~/Content/themes/base/css

 

Output result:

 

Reference Site:

http://jqueryui.com/datepicker/

Change color of navigation bar in MVC 4 template

Bootstrap + jQuery to change color of navigation bar in MVC 4

_Layout.cshtml

1. remove id=”menu” in <ul> tag

2. add class=“nav nav-pills” in <ul> tag

<nav>
    <ul class="nav nav-pills">
        <li><a href="/">Home</a>
        <li><a href="/Home/About">About</a>
        <li><a href="/Home/Contact">Contact</a>
    </li></ul>
</nav>

 

jQuery

$(function () {

    var path = window.location.pathname;

    //Method 1:
    var $a = $('nav ul li a[href="' + path + '"]');
    $a.parents("li:first").addClass("active");

    //Method 2:
    //$("nav ul li a").each(function (index, elem) {
    //    if ($(elem).attr("href") == path) {
    //        $(this).parents("li:first").addClass("active");
    //    }
    //});

});

jQuery ajax() Function

ajax() function provides extra control over making Ajax calls to a server, there are several properties can be defined in JSON format, for example:

url

contentType

data

dataType

success

error

type (GET or POST)

 

Demo Example:

WCF Web Service code

Customer class

OperationStatus class

Output Result

Fiddler Result:

 

Addition Note:

http://api.jquery.com/jQuery.ajax/

jQuery POST Request

$.post(url, data, callback, dataType) can post data to a server and retrieve results

post() can also be used to interact with an Ajax-enabled WCF service

 

Demo Example:

Output Result

Fiddler Result:

 

WCF Web Service

Output Result

Fiddler Result:

 

Additional Note:

A good tool to trace all network routes (request and response)

http://fiddler2.com/

jQuery GET Requests

$.get(url, data, callback, dataType) can retrieve data from a server:

$ is a jQuery object and .get() is a global function

dataType can be one of:

HTML, XML, JSON, string, or script

 

$.getJSON(url, data, callback) can retrieve JSON data from a server

 

Demo Example:

CustomerJson.aspx.cs

$.get(url, data, callback, dataType)

$.getJSON(url, data, callback)

 

Additional Notes:

1. http://james.padolsey.com/jquery

2. .load() is always HTML datatype

3. .load() without data –> it’s a GET request

4. .load() with data –> become POST request

Loading HTML Content from the Server

$(selector).load(url, data, callback) allows HTML content to be loaded from a server and added into a DOM object

We can even filter the content that returned from server

Data can be passed to the server by using load(url, data)

A callback function used

 

Demo Example:

1. .load()

Output result:

 

2. Filter content

Output result:

 

3. Callback function

 

4. With Data passed to server

Output result: