AngularJS Form Validation and processing data

Requirements

  • Text field is  required, minimum length 3, maximum length 200
  • DueDate is  required, has to be a valid
Property Class Description
$valid ng-valid Boolean Tells whether an item is currently valid based on the rules you placed.
$invalid ng-invalid Boolean Tells whether an item is currently invalid based on the rules you placed.
$pristine ng-pristine Boolean True if the form/input has not been used yet.
$dirty ng-dirty Boolean True if the form/input has been used.

Accessing Angular Form Properties

  • To access the form: <form name>.<angular property>
  • To access an input: <form name>.<input name>.<angular property>

<form name=”form” class=”form-horizontal” ng-submit=”submitForm(form.$valid)” novalidate><!– novalidate prevents HTML5 validation since we will be validating ourselves –>
<div class=”form-group” ng-class=”{ ‘has-error’ : form.Text.$invalid && !form.Text.$pristine }”>
<label>Todo</label>
<input type=”text” ng-model=”item.Text” id=”Text” name=”Text” class=”form-control” placeholder=”” ng-minlength=”3″ ng-maxlength=”200″ required>
<p ng-show=”form.Text.$invalid && !form.Text.$pristine” class=”help-block”>Todo is required.</p>
<p ng-show=”form.Text.$error.minlength” class=”help-block”>Must great then list 3 characters.</p>
<p ng-show=”form.Text.$error.maxlength” class=”help-block”>Must less then 200 characters.</p>
</div>

<div class=”form-group” >
<label>Priority</label>
<input type=”number” ng-model=”item.Priority” id=”Priority” class=”form-control” name=”Priority” placeholder=””>

</div>

<div class=”form-group” ng-class=”{ ‘has-error’ : form.DueDate.$invalid && !form.DueDate.$pristine }”>
<label>DueDate</label>
<input type=”text” ng-model=”item.DueDate” id=”DueDate” name=”DueDate” class=”form-control” placeholder=”” required>
<p ng-show=”form.DueDate.$invalid && !form.DueDate.$pristine” class=”help-block”>DueDate is required.</p>
</div>
<div class=”form-group”>

<button type=”submit” class=”btn btn-primary” ng-disabled=”userForm.$invalid”>{{action}}</button>
<a href=”#/” class=”btn”>Cancel</a>
</div>
</form>

I have CreateCtrl in my app.js then

var CreateCtrl = function ($scope, $location, Todo) {
$scope.action = “Add”;
//function to submit the form after all validation has occurred
$scope.submitForm = function (isValid) {
// check to make sure the form is completely valid
if (isValid) {
//then could create a new Todo

Todo.save($scope.item, function () {
$location.path(‘/’);
});
}
};
};

For the whole app source code go to here:

https://github.com/sandywebdesigner/AngularJsApp

here is what will look like:

2014-11-19_122858

How to customize your own directive in AngularJs

AngularJS directives are what controls the rendering of the HTML inside an AngularJS application.Example of directives are the interpolation directives({{}}),the ng-repeat directive and ng-if directive.
And you also could write your own directive.

Here is a simple examle, you html code:

<greet from=”Sandy” to=”audience”></greet>

here is your directive code:

MyApp.directive(‘greet’, function () {
return {
scope: true,
restrict : ‘E’, /* restrict this directive to elements */
template: ‘<h2>Greeting from {{from}} to my dear {{to}}</h2>’,
controller: function ($scope, $element, $attrs) {
$scope.from = $attrs.from;
$scope.to = $attrs.to;
}
};
});

You output is:

2014-11-17_110348

Another example I’ve used in my TodoApp example, for the source code could go to here find it.

https://github.com/sandywebdesigner/AngularJsApp

TodoApp.directive(‘sorted’, [function () {
return {
scope: true,
restrict: ‘A’,  /* using ‘A’, when you have <div my-directive></div> in the html. */
transclude: true,
template: ‘<a class=”btn btn-link” ng-click=”do_sort()” ng-transclude></a>’ +
‘<span ng-show=”do_show(true)”>’ +
‘<i class=”glyphicon glyphicon-arrow-down”></i>’ +
‘</span>’ +
‘<span ng-show=”do_show(false)”>’ +
‘<i class=”glyphicon glyphicon-arrow-up”></i>’ +
‘</span> ‘,
controller: function ($scope, $element, $attrs) {
$scope.sort_by = $attrs.sorted;
$scope.do_sort = function() {
$scope.sort($scope.sort_by);
};
$scope.do_show = function(is_desc) {
return (is_desc != $scope.is_desc && $scope.sort_order == $scope.sort_by)
}
}
};
}]);

JQuery tutorial –- Effect — Part 4

1. Animating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Animating an Element</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#right”).click(function() {
$(“#theDiv”).animate({ width: “500px” }, 1000);
});
$(“#text”).click(function() {
$(“#theDiv”).animate({ fontSize: “24pt” }, 1000);
});
$(“#toggle”).click(function() {
$(“#theDiv”).animate({ left: “500” }, 1000, “swing”);
});
});
</script>
<style type=”text/css”>
div#theDiv {
position:relative;
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: cyan;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Animating an Element</p>
<div id=”theDiv”>Animate Me</div>
<button id=”right”>Grow Right</button>
<button id=”text”>Big Text</button>
<button id=”toggle”>Move Div</button>
</body>
</html>

2. fading

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Element Fading</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#fadein”).click(function() {
$(“#theDiv”).fadeIn(“normal”);
});
$(“#fadeout”).click(function() {
$(“#theDiv”).fadeOut(“normal”);
});
$(“#fadeto3″).click(function() {
$(“#theDiv”).fadeTo(“slow”, 0.3);
});
$(“#fadeup”).click(function() {
$(“#theDiv”).fadeTo(“slow”, 1.0);
});
});
</script>
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<p>
Fading an Element</p>
<div id=”theDiv”>
</div>
<button id=”fadein”>Fade In</button>
<button id=”fadeout”>Fade Out</button>
<button id=”fadeto3″>Fade To .3</button>
<button id=”fadeup”>Fade To 1.0</button>
</body>
</html>

3.Sliding, Show and hide

$(function() {
$(“#slideup”).click(function() {
$(“#theDiv”).slideUp(“normal”);
});
$(“#slidedown”).click(function() {
$(“#theDiv”).slideDown(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).slideToggle(“slow”);
});

$(“#show”).click(function() {
$(“#theDiv”).show(“normal”);
});
$(“#hide”).click(function() {
$(“#theDiv”).hide(“normal”);
});
$(“#toggle”).click(function() {
$(“#theDiv”).toggle(“slow”);
});
});

4.Images rotating

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery Image Rotator</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
// create the image rotator
setInterval(“rotateImages()”, 2000);
});

function rotateImages() {
var oCurPhoto = $(‘#photoShow div.current’);
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $(‘#photoShow div:first’);

oCurPhoto.removeClass(‘current’).addClass(‘previous’);
oNxtPhoto.css({ opacity: 0.0 }).addClass(‘current’).animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass(‘previous’);
});
}
</script>
<style type=”text/css”>
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<h1>
jQuery-based Image Rotator</h1>
<div id=”photoShow”>
<div class=”current”>
<img src=”images/Grass.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Leaf.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Spring.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
<div>
<img src=”images/Water.jpg” alt=”Photo Gallery” width=”400″ height=”400″ class=”gallery” />
</div>
</div>
</body>
</html>

JQuery tutorial – Events — Part 3

1. mouseover mouseleave event

$(function() {
$(“#evtTarget”).on(“mouseover mouseleave”, highlight);
$(“#evtTarget”).on(“click”, function(evt) {
$(“#evtTarget”).off(“mouseover mouseleave”, highlight);
$(“#evtTarget”).html(“<p>You shut off the hover effect!</p>”);
});
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}

2.Using jQuery to find the dive position

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using the jQuery Event Object</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).click(function(evt) {
$(this).html(“pageX: ” + evt.pageX + “, pageY: ” + evt.pageY + “, type: ” + evt.type + “, target: ” +
evt.target);
});
});
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color: Silver;
font-size:18pt;
margin:5pt 5pt 5pt 5pt;
}
</style>
</head>
<body>
<h1>Using the jQuery Event Object</h1>
<div id=”Div1″ class=”normal”>Click on this div (Div1) to see the event information</div>
<div id=”Div2″ class=”normal”>Click on this div (Div2) to see the event information</div>
<div id=”Div3″ class=”normal”>Click on this div (Div3) to see the event information</div>
</body>
</html>

3. more mouse relative event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Using Event Helpers</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#evtTarget”).hover(highlight, highlight);

$(“#evtTarget”).click(fnClick1);
$(“#evtTarget”).dblclick(fnClick2);
});

function highlight(evt) {
$(“#evtTarget”).toggleClass(“highlighted”);
}
function fnClick1() {
$(“#evtTarget”).html(“Click!”);
}
function fnClick2() {
$(“#evtTarget”).html(“Double Click!”);
}
</script>
<style type=’text/css’>
.normal {
width:300px;
height:200px;
background-color:Yellow;
font-size:18pt;
}

.highlighted {
background-color:Red;
}
</style>
</head>
<body>
<h1>Using Event Helpers</h1>
<div id=”evtTarget” class=”normal”>Mouse over this div to see the effect. Click on it to change the content.</div>
</body>
</html>

4. div click event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Miscellaneous jQuery Events</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“div”).one(“click”, function() {
$(this).css({ background: “red”,
cursor: “auto”
});
});
});
</script>
<style type=”text/css”>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p {
font-size: 18pt;
}
</style>
</head>
<body>
<p>
Click on each square to change color</p>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>

5. table working with event

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Striping/Hover Highlighting a Table</title>
<script type=”text/javascript” src=”../jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#theList tr:even”).addClass(“stripe1″);
$(“#theList tr:odd”).addClass(“stripe2″);

$(“#theList tr”).hover(
function() {
$(this).toggleClass(“highlight”);
},
function() {
$(this).toggleClass(“highlight”);
}
);

$(“#theList”).on(“click”, “tr”, function showText (evt) {
alert($(this).text());
})
});
</script>
<style type=”text/css”>
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
.clickable {
cursor:pointer;
}
.stripe1 {
background-color:#0f0;
}
.stripe2 {
background-color:#afa;
}
.highlight {
background-color: #ffcc00;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Using jQuery to stripe and hover-highlight a table</h1>
<table id=”theList”>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
<tr>
<td>Butter</td>
<td>3.49</td>
</tr>
<tr>
<td>Bread</td>
<td>0.99</td>
</tr>
<tr>
<td>Pasta</td>
<td>1.19</td>
</tr>
<tr>
<td>Honey</td>
<td>4.39</td>
</tr>
<tr>
<td>Cookies</td>
<td>2.99</td>
</tr>
<tr>
<td>Apples</td>
<td>0.59</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.78</td>
</tr>
<tr>
<td>Pepper</td>
<td>1.56</td>
</tr>
</tbody>
</table>
</body>
</html>

JQuery tutorial – manipulating— Part 2

3. Manipulating tags,  how .html(), wrap and inert works

$(“document”).ready(function() {
//$(“a”).attr(“target”, “_blank”);
//$(“a”).removeAttr(“href”);
//$(“img”).attr({ src: “images/Spring.jpg”, alt: “spring” });

//alert($(“#list1″).html());
// change the html of the UL
//$(“#list1″).html(“<li>This is a new item</li>”);
// create a new p set the content of para2 to the new p
//var newItem = $(“<p>This is a new paragraph</p>”);
//$(“#para2″).html(newItem.html());
// set the text content of the last paragraph
//$(“p:last”).text(“this is the last paragraph”);

//$(“p”).append(” with some content appended”);
//$(“p”).prepend(“Hello! “);
//$(“p:last”).appendTo(“p:first”);
//$(“p:last”).prependTo(“p:first”);

//$(“p”).wrap(“<div style=’color:red’/>”);
//$(“p”).wrapAll(“<div style=’border:3px solid red’/>”);
//$(“ul”).empty();
});

4.Using jQuery manipulating CSS

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>jQuery CSS Sizing and Positioning</title>
<script type=”text/javascript” src=”/jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#height”).html($(“#theDiv”).height());
$(“#width”).html($(“#theDiv”).width());
$(“#innerH”).html($(“#theDiv”).innerHeight()); //this will add the padding
$(“#innerW”).html($(“#theDiv”).innerWidth());
$(“#outerH”).html($(“#theDiv”).outerHeight()); // this will subtract the border and margion
$(“#outerW”).html($(“#theDiv”).outerWidth());
$(“#offset”).html($(“#theDiv”).offset().top + “, ” + $(“#theDiv”).offset().left);
$(“#position”).html($(“#theDiv”).position().top + “, ” + $(“#theDiv”).position().left);
});
</script>
<style type=”text/css”>
div#theDiv {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: blue;
border: 2px solid black;
cursor: pointer;
}
p, span {
font-size: 16pt;
}
</style>
</head>
<body>
<p>
Using jQuery to compute element size and position</p>
<div id=”theDiv”>
</div>
<div><span>Height: </span><span id=”height”></span></div>
<div><span>Width: </span><span id=”width”></span></div>
<div><span>innerHeight: </span><span id=”innerH”></span></div>
<div><span>innerWidth: </span><span id=”innerW”></span></div>
<div><span>outerHeight: </span><span id=”outerH”></span></div>
<div><span>outerWidth: </span><span id=”outerW”></span></div>
<div><span>offset: </span><span id=”offset”></span></div>
<div><span>position: </span><span id=”position”></span></div>
</body>
</html>

5. Manipulating Data

<!DOCTYPE html>
<html>
<head>
<title>Using the Data Methods</title>
<style type=”text/css”>
#div1 {
width: 200px;
height: 100px;
background-color: blue;
color: white;
display: inline-block;
}
</style>
<script type=”text/javascript” src=”/jquery-1.9.1.js”></script>
<script>
$(“document”).ready(function() {
$(“#store”).click(function () {
// store some arbitrary data on the DIV object
$(“#div1″).data(“key1″, 1234);
$(“#div1″).data(“key2″, “Joe Marini”);
});

$(“#remove”).click(function () {
// clear the data from the DIV
$(“#div1″).removeData();
});

$(“#show”).click(function () {
// if there is any data, display it
// alert($(“#div1″).data(“key1″));
// alert($(“#div1″).data(“key2″));

alert(JSON.stringify($(“#div1″).data(), null, ”  “));
});
});
</script>
</head>
<body>
<h1>Using the Data Methods</h1>
<p>jQuery can associate arbitrary data with page elements. Use the controls below to exercise the data() and removeData() functions.</p>
<div id=”div1″ data-key3=”data attribute”>Sample DIV</div>
<p>
<button id=”store”>Click to store data</button>&nbsp;
<button id=”remove”>Click to remove data</button>&nbsp;
<button id=”show”>Click to show data</button></p>
</body>
</html>

JQuery tutorial –set up and retrive — Part 1

1. Set up

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>First jQuery-Enabled Page</title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function() {
alert(“The page just loaded!”);
});
</script>
</head>
<body>

</body>
</html>

2.basic retrieving

$("document").ready(function() {
        //$("p[class]").css("border", "3px solid red"); // paragraph has define class
        //$("p[id=para1]").css("border", "3px solid red");//paragraph has id named para1
        //$("p[id^=para]").css("border", "3px solid red");//paragraph has id name start with para
        //$("p[id^=para][lang*=en-]").css("border", "3px solid red");//paragraph has id name started with para //and has attribute lang follow with anything or not and = en- 
     $("li a[href$='.pdf']").after("");
//li has a and end with .pdf then add a img to it
//$("p:first").css("border", "3px solid red");
        //$("p:last").css("border", "3px solid red");
        //$("p:even").css("border", "3px solid red");
        //$("p:odd").css("border", "3px solid red");
        //$(".a:first").css("border", "3px solid red");
        //$(".b:even").css("border", "3px solid red");
        //$("p:gt(1)").css("border","3px solid red");
        //$("p:not(p:eq(2))").css("border", "3px solid red");
        //$("p").css("border", "3px solid red");
        //$(".a").css("border", "3px solid red");
        //$("#list1").css("border", "3px solid red");
        //$("p.b").css("border", "3px solid red");
        //$("p:contains(3)").css("border", "3px solid red");
        //$("p:parent").css("border", "3px solid red");
        //$("ul:has(li[class=a])").css("border", "3px solid red");
        //$("ul li:nth-child(3)").css("border", "3px solid red");
        //$("ul li:nth-child(2n)").css("border", "3px solid red");
        //$("form :input").css("border", "3px solid red");
        //$("form :text").css("border", "3px solid red");
        //$("form :text:enabled").css("border", "3px solid red");
        //$("form :checked").css("border", "3px solid red");
        //$("form :checkbox:checked").css("border", "3px solid red");
        //$("p,li.b").css("border", "3px solid red");
        //$("ul li.a").css("border", "3px solid red");
        //$("ul + p").css("border", "3px solid red");
        //$("#list1 ~ p").css("border", "3px solid red");
       // Inspect the length and size() of a result set
        alert("There are " + $("p").length + "elements");

        // use the get() and get(index) to retrieve DOM elements
        var elems = $("li").get();
        alert("There are " + elems.length + "tags");
        alert($("li").get(0));

        // use the find function
        $("ul").find("li.b").css("border", "3px solid red");

        // use the each function
        var leftmargin = 0;
        var border = 3;
        $("p").each(function() {
            $(this).css("border", border+"px solid red");
            $(this).css("margin-left", leftmargin);
            border += 2;
            leftmargin += 10;
        });

    });

Using viewbag pass data to the view and bind it to my dropdownlist.

In my booking view I has a dropdownlist need bind to my database table, In this tast I just use viewbag. I know it is good habit bind the view to your viewmodel, but sometime you need do some nasty thing to get the job quickly done. So here is the code in my controller to retrive the data and pass it to the viewbag.

retrevedatafromdatabses

here I pass to SelectLists to my view.

I my view you just need this one line of code to get it.

@Html.DropDownList(“SydneySuburb”, null, “Select »”, new { @id = “to_suburb” })

@Html.DropDownList(“SydneySuburb”, null, “Select »”, new {  @id = “from_suburb” })

the dropdown is look like this

dropdownlistcontroller

Simple isn’t it!!!

First I tried to do this, I search internet, there are expert write it in very complexed way. The expert alway like to write it like that to make them looking like expert( in my view).

here I just figure it out in very simple way.

Have fun!

JQuery Auto complete work with bakcode by using asp.net mvc

Recently to convert the new website, I have a bookinng form for the clients to finished the booking,there is some exiting data need to using auto complete. In the past I alway use ajax tool control kits to achieve that result. But now I am kind of fun for JQuery. Here is the Jquery Autocomplete textbox

First I have databses contain all the subuerbs, here is my database table.

databaseSuburbs

here is my action in my BookController:

databseJasonResult

I let it return json because json is the fast and easy analyse data at moment.

Then in your view , just add the reference to JQuery UI:

autocompleteJqury

You could ignore the timepicker.min.css, and timepicker.min.js, I use it to picker up the time, for autocomplete don’t need those two references.

here just in you view you just need one more line.

@Html.TextBox(“SearhToSuburb”, null, new {type=”text”,@class=”form-control”, @id = “search_to_suburb” })

That’s it. Simply isn’t it. Have fun. Below is what will it looking like.feels

Royale Coach – ASP.net MVC website Royale Airport Shuttle Transfers

Recently task is to convert the one of old version of our company webstie to asp.net mvc website.The old version has been done by using tranditional asp. And the appearance also don’t looking good.

The new version detective it is desktop or mobile, so the navigation and the contact page will display different in mobile device open it.

Finally get a new appearance done. And hosting it in windows Azure, I have done the most important part.The Book page will have all the function, this still in proceeding.

Here is the first Windows Azure website build by using asp.net mvc, Bootstrap,jQuery,the contact form validation using Ajax. (the booking page In proceeding)
http://royaleapp.azurewebsites.net/

royaleCoach

Best Web Design, web developer, php developer,designers,freelance

Follow

Get every new post delivered to your Inbox.

Join 94 other followers