TechnoTips : July 2017

Saturday, July 15, 2017

Part 42 - How to implement JQuery Autocomplete Textbox with data from server in Asp.net MVC application

In this video you will be able to implement JQuery-UI Autocomplete Textbox with data from server side. Autocomplete feature used to display suggestion while we type into textbox.
For implementing this, you need to download latest version of Jquery UI . Click here to download the latest version of Jquery-UI.

The latest version will only be compatible with higher version of Jquery i.e. Jquery 1.7+ .

After downloading the latest version, add the .css , .js file and images into your project. In case if you find any problem the follow the steps as shown in the above video.

#Controller Code

Add a controller named "Test" and replace everything with below code. In below code, you will find three methods

a) Index () : This method will return view.

b) GetSuggestion(string text) : This method will return the JSON list of items matching with the parameter value.

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{

    public class TestController : Controller
    {

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


        [HttpGet]
        public JsonResult GetSuggestion(string text)
        {
            List<MyShop> ItemList = new List<MyShop>();

            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Rice", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Pulse", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 3, ItemName = "Salt", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 4, ItemName = "Sugar", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 5, ItemName = "Soap", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 6, ItemName = "Book", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Apple", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Aeroplane", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Orange", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Boy", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Blackberry", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Lewis", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Women", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "C++", IsAvailable = false });


            List<string> list = new List<string>();

            list = ItemList.Where(x => x.ItemName.ToLower().Contains(text.ToLower())).Select(x => x.ItemName).ToList();


            return Json(list, JsonRequestBehavior.AllowGet);
        }



    }
}

# View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

@model MVCTutorial.Models.EmployeeViewModel
@{
    ViewBag.Title = "Index";
    // Layout = null;
}

<div class="panel panel-body" style="min-height:256px">


    <div class="col-md-9">
        <h4>Technotips MVC tutorial</h4>
              
        <input type="text" class="form-control" id="textAutocomplete" />

    </div>

</div>

<script>

    //var autoSuggestionArray = ["Ashish", "Apple", "Orange", "Boy", "Girl"]

    $("#textAutocomplete").autocomplete({

        source: function (request, response) {
            var text = $("#textAutocomplete").val();

            $.ajax({
                type: "GET",
                url: "/Test/GetSuggestion",
                data: { text: request.term },
                success: function (data) {

                    response($.map(data, function (item) {

                        return { lable: item, value: item }

                    }))


                }

            })

        }
    });

All Code Factory

Part 41 - How to create responsive sortable image gallery using Jquery-UI

In this video you will be able to create responsive sortable photo gallery. for that you need to download latest version of Jquery UI . Click here to download the latest version of Jquery-UI.
The latest version will only be compatible with higher version of Jquery i.e. Jquery 1.7+ .
After downloading the latest version, add the .css , .js file and images into your project. In case if you find any problem the follow the steps as shown in the above video. The expected output will be as what displayed in following image.
Our main objective is that, we have to sort the sequence of the below image by dragging and dropping method. For that we can use the .sortable() method offered by JQuery-UI

# View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.
Please follow below points:
1. Please take an equal size of images or else you can set equal height and width for all images.
2. Make sure to replace below images with your images.
3. Don't forget to give reference of JQuery-UI .jss , .css file reference into your layout page

<div class="panel panel-body" style="min-height:256px">
  
    <div class="col-md-9">
        <h4>Technotips MVC tutorial</h4>

        <ul class="list-group" id="SortableGallery" style="cursor:move">
            <li class="list-group-item col-md-4" >
                <div>
                    <img class="img-responsive" src="~/Content/images/vocal.jpg" />
                </div>
            </li>
            <li class="list-group-item col-md-4">
                <div>
                    <img class="img-responsive" src="~/Content/images/voiline.jpg" />
                </div>
            </li>
          
            <li class="list-group-item col-md-4">
                <div>
                    <img class="img-responsive" src="~/Content/images/tabla.jpg" />
                </div>
            </li>
            <li class="list-group-item col-md-4">
                <div>
                    <img class="img-responsive" src="~/Content/images/social.jpg" />
                </div>
            </li>
            <li class="list-group-item col-md-4">
                <div>
                    <img class="img-responsive" src="~/Content/images/onlinebookstore.jpg" />
                </div>
            </li>
            <li class="list-group-item col-md-4">
                <div>
                    <img class="img-responsive" src="~/Content/images/mobile.jpg" />
                </div>
            </li>
        </ul>

    </div>

</div>

<script>

    $("#SortableGallery").sortable({

        update: function () {

            alert("Wow");
        }
    });

</script>

All Code Factory

Part 40 - How to send multiple checkbox Ids to controller using Jquery in Asp.net MVC

In this video you will be able to display multiple checkbox on view page with checked and unchecked value. Then will be able to send the ID's of checked checkbox to the controller with the help of ajax call. So, the expected View would be like what shown in below image.

#Controller Code

Add a controller named "Test" and replace everything with below code. In below code, you will find three methods
a) Index () : This method will return view with data in ViewBag.ItemList consisting all Items in the shop.
b) SaveItems(string ItemIds) : This method will be called by ajax and it receive the Ids of checkboxes as a comma separated string.

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{

    public class TestController : Controller
    {

        public ActionResult Index()
        {
            MVCTutorialEntities db = new MVCTutorialEntities();
           
            List<MyShop> ItemList = new List<MyShop>();
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Rice", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Pulse", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 3, ItemName = "Chocholate", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 4, ItemName = "Soap", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 5, ItemName = "Tea", IsAvailable = true });

            ViewBag.ItemList = ItemList;

            return View();
        }
        [HttpPost]
        public JsonResult SaveItems(string ItemIds)
        {
            string[] arrayIds = ItemIds.Split(',');

            foreach (string item in arrayIds)
            {
                var id = item;

            }
            return Json("", JsonRequestBehavior.AllowGet);
        }

    }
}

#Model code (EmployeeViewModel)

Right click on your model folder and add a class. Then give a name "MyShop" and click ok button. Replace content with below code,

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

namespace MVCTutorial.Models
{
    public class MyShop
    {
        public int ItemID { get; set; }
        public string ItemName { get; set; }
        public bool IsAvailable { get; set; }

    }
}

# View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

<div class="panel panel-body" style="min-height:256px">

<div class="col-md-9">
        <div class="col-md-5">
            <img src="~/Content/loading.gif" id="loader" height="20" width="20" style="display:none" />

            <ul class="list-group" id="ItemList">
                @if (ViewBag.ItemList != null)
                {
                    <li class="list-group-item list-group-item-heading active">
                        <h4 class="list-group-item-text">Available Items in my store</h4>

                    </li>
                    foreach (var item in ViewBag.ItemList)
                    {
                        <li class="list-group-item">

                            <div class="checkbox">
                                <input id="item_@item.ItemID" type="checkbox" checked="@item.IsAvailable" />
                                <label for="item_@item.ItemID">@item.ItemName</label>
                            </div>


                        </li>

                    }
                    <li class="list-group-item"><a href="#" class="btn btn-block btn-success" onclick="SaveItems()">Save Item</a></li>

                }

            </ul>
        </div>
    </div>

</div>

<script>

    var SaveItems = function () {
        //$("#loader").show();
        var ItemIdArray = [];
        var ItemsIdsCommaSeparated = "";
        $("#ItemList li input[type=checkbox]").each(function (index, val) {
            debugger
            var Id = $(val).attr("id");
            var ischecked = $("#" + Id).is(":checked", true);
            if (ischecked) {
                debugger
                var array = Id.split("_");
                var ItemId = array[1];
                ItemIdArray.push(ItemId);
            }
            ItemsIdsCommaSeparated = ItemIdArray.toString();
        })
        if (ItemIdArray.length != 0) {
            $.ajax({

                type: "Post",
                url: "/Test/SaveItems",
                datatype:"Json",
                data: { ItemIds: ItemsIdsCommaSeparated },
                success: function (response) {
                    //$("#loader").hide();
                    

                }

            })

        }

    }

</script>

All Code Factory

Part 39 - How to display multiple checkbox with checked and unchecked value

In this video you will be able to display multiple checkbox on view page with checked and unchecked value. So, the expected output would be like what shown in below image.

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{

    public class TestController : Controller
    {

        public ActionResult Index()
        {
            MVCTutorialEntities db = new MVCTutorialEntities();
           
            List<MyShop> ItemList = new List<MyShop>();
            ItemList.Add(new MyShop { ItemID = 1, ItemName = "Rice", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 2, ItemName = "Pulse", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 3, ItemName = "Chocholate", IsAvailable = true });
            ItemList.Add(new MyShop { ItemID = 4, ItemName = "Soap", IsAvailable = false });
            ItemList.Add(new MyShop { ItemID = 5, ItemName = "Tea", IsAvailable = true });

            ViewBag.ItemList = ItemList;

            return View();
        }


    }
}

#Model code (EmployeeViewModel)

Right click on your model folder and add a class. Then give a name "MyShop" and click ok button. Replace content with below code,

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

namespace MVCTutorial.Models
{
    public class MyShop
    {
        public int ItemID { get; set; }
        public string ItemName { get; set; }
        public bool IsAvailable { get; set; }

    }
}

# View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

<div class="panel panel-body" style="min-height:256px">

<div class="col-md-9">
        <div class="col-md-5">
            <img src="~/Content/loading.gif" id="loader" height="20" width="20" style="display:none" />

            <ul class="list-group" id="ItemList">
                @if (ViewBag.ItemList != null)
                {
                    <li class="list-group-item list-group-item-heading active">
                        <h4 class="list-group-item-text">Available Items in my store</h4>

                    </li>
                    foreach (var item in ViewBag.ItemList)
                    {
                        <li class="list-group-item">

                            <div class="checkbox">
                                <input id="item_@item.ItemID" type="checkbox" checked="@item.IsAvailable" />
                                <label for="item_@item.ItemID">@item.ItemName</label>
                            </div>


                        </li>

                    }
                    <li class="list-group-item"><a href="#" class="btn btn-block btn-success" onclick="SaveItems()">Save Item</a></li>

                }

            </ul>
        </div>
    </div>

</div>

All Code Factory

Part 38 - Attribute routing in asp.net MVC

In this video you will find the basic concept of an Attribute routing. We have included several example of attribute routing which will help you to understand from the depth.

What is attribute routing ?
- MVC-5 has included a new type of routing, which is known as attribute routing.
- Attribute routing uses attributes to define routes.
- Attribute routing gives you more control over the URI' s in your web application.

Example -


[Route("Student/{Id}")]

 public int GetStudent(int Id)

 {

       return Id;

 }

How to enable attribute routing?
- Open your RouteConfig.cs which is present under App_Start folder. Then you have to add MapMvcAttributeRoutes()” method into this . Please refer below screenshot.

Can we use attribute routing with convention-based routing ?
- Yes, we can use both of them.

#Various example of attribute routing

1. Optional parameter and default value:
We can set parameter as optional and can set default value for this. To set optional parameter we used "?" character in [Route]. Example: [Route("Student/Name/{Name?}")].
we can also set the default value for this. Example: [Route("Student/Name/{Name=Ashish}")].
Now below method can be accessed by below url pattern
1. Student/Name/YourName"
2. Student/Name"

    //Optional URI parameter
  [Route("Student/Name/{Name?}")]
  public string GetStudent(string Name)
  {
      return "Student with Name =" + Name;
   }

   //Default URI parameter value
   [Route("Student/Name/{Name=Ashish}")]
  public string GetStudent(string Name)
  {
    return "Student with Name =" + Name;
   }

2. Route Prefixes:
- You can use route prefix at method level as well as at controller level.

a). Route prefix at method level
In [Route("Student")] and [Route("Student/{Id}")], the Student text is acting like route prefix

 [Route("Student")]
 public string GetStudent()
 {
    return "All";
 }

 [Route("Student/{Id}")]
 public string GetStudent(int Id)
 {
    return "Student with Id=" + Id;
 }

b). Route prefix at controller level
Route prefix can be added at controller level. Here we have added [RoutePrefix("Home")]
on the top of TestController class. Now we can access the Index method with below url pattern.
Home/Index

namespace MVCTutorial.Controllers
{
    [RoutePrefix("Home")]   
    public class TestController : Controller
    {

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

     
    }
}

3. Default Route :
We can set the default route at controller level. Example [Route("{action=Index}")]

namespace MVCTutorial.Controllers
{
    [RoutePrefix("Home")]
    [Route("{action=Index}")]
    public class TestController : Controller
    {

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

     
    }
}

5. Route Constraints
Route constraints let you restrict how the parameters in the route template are matched. The general syntax is {parameter:constraint}. For example, in the below code, there are three "GetStudent()" methods. Now see below cases in which we have shown that which url pattern will be used to call "GetStudent()" method.

case (a). Test/Student/11 - It will call first GetStudent() method as we passed an integer value as an optional parameter i.e. "11" . Also "11" does not lie between 3 and 10. So, there is no chance for calling third GetStudent() method. So, this route will work : [Route("Student/{Id:int}")]
case (b). Test/Student/Ashish - It will call the second method as we have passed a string value as an optional parameter. i.e "Ashish". In this case [Route("Student/{Name}")] will be working.
case (c). Test/Student/4 - It will call the third GetStudent() method as we have passed an integer as an optional parameter and its also lies between 3 to 10. So, this route will be working in this case : [Route("Student/{Id:int:min(3):max(10)}")]

namespace MVCTutorial.Controllers
{
      
    public class TestController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [Route("Student/{Id:int}")]    //case (a)
        public string GetStudent(int Id)
        {
            return "Student with Id=" + Id;
        }

        [Route("Student/{Name}")]     // case (b)
        public string GetStudent(string Name)
        {
            return "Student with Name=" + Name;
        }

        [Route("Student/{Id:int:min(3):max(10)}")]  // case (c)
        public string GetStudent(int Id)
        {
            return "Student with Id=" + Id;
        }


        [Route("Student/Message/{Message:maxlength(5)}")]
        public string GetMessage(string Message)
        {
            return "Student message=" + Message;
        }

    }

}

Below constraint chart will help you to apply constraint against different URL







 
 
 
 
 

  
 SN

  
 Constraint

  
 Description 

  
 Example

 

  
ü1

  
alpha

  
Matches uppercase or lowercase
  Latin alphabet characters (a-z, A-Z)

  
{x:alpha}

 

  
ü2

  
bool

  
Matches a Boolean value.

  
{x:bool}

 

  
ü3

  
datetime

  
Matches a DateTime value.

  
{x:datetime}

 

  
ü4

  
decimal

  
Matches a decimal value.

  
{x:decimal}

 

  
ü5

  
double

  
Matches a 64-bit floating-point
  value.

  
{x:double}

 

  
ü6

  
float

  
Matches a 32-bit floating-point
  value.

  
{x:float}

 

  
ü7

  
guid

  
Matches a GUID value.

  
{x:guid}

 

  
ü8

  
int

  
Matches a 32-bit integer value.

  
{x:int}

 

  
ü9

  
length

  
Matches a string with the
  specified length or within a specified range of lengths.

  
{x:length(6)} 

    {x:length(1,20)}

 

  
ü10

  
long

  
Matches a 64-bit integer value.

  
{x:long}

 

  
ü11

  
max

  
Matches an integer with a maximum
  value.

  
{x:max(10)}

 

  
ü12

  
maxlength

  
Matches a string with a maximum
  length.

  
{x:maxlength(10)}

 

  
ü13

  
min

  
Matches an integer with a minimum
  value.

  
{x:min(10)}

 

  
ü14

  
minlength

  
Matches a string with a minimum
  length.

  
{x:minlength(10)}

 

  
ü15

  
range

  
Matches an integer within a range
  of values.

  
{x:range(10,50)}

 

  
ü16

  
regex

  
Matches a regular expression.

  
{x:regex(^\d{3}-\d{3}-\d{4}$)}

All Code Factory

SN	Constraint	Description	Example
ü1	alpha	Matches uppercase or lowercase Latin alphabet characters (a-z, A-Z)	{x:alpha}
ü2	bool	Matches a Boolean value.	{x:bool}
ü3	datetime	Matches a DateTime value.	{x:datetime}
ü4	decimal	Matches a decimal value.	{x:decimal}
ü5	double	Matches a 64-bit floating-point value.	{x:double}
ü6	float	Matches a 32-bit floating-point value.	{x:float}
ü7	guid	Matches a GUID value.	{x:guid}
ü8	int	Matches a 32-bit integer value.	{x:int}
ü9	length	Matches a string with the specified length or within a specified range of lengths.	{x:length(6)} {x:length(1,20)}
ü10	long	Matches a 64-bit integer value.	{x:long}
ü11	max	Matches an integer with a maximum value.	{x:max(10)}
ü12	maxlength	Matches a string with a maximum length.	{x:maxlength(10)}
ü13	min	Matches an integer with a minimum value.	{x:min(10)}
ü14	minlength	Matches a string with a minimum length.	{x:minlength(10)}
ü15	range	Matches an integer within a range of values.	{x:range(10,50)}
ü16	regex	Matches a regular expression.	{x:regex(^\d{3}-\d{3}-\d{4}$)}

Labels

Saturday, July 15, 2017

Part 42 - How to implement JQuery Autocomplete Textbox with data from server in Asp.net MVC application

Part 41 - How to create responsive sortable image gallery using Jquery-UI

Part 40 - How to send multiple checkbox Ids to controller using Jquery in Asp.net MVC

Part 39 - How to display multiple checkbox with checked and unchecked value

Part 38 - Attribute routing in asp.net MVC