how to bind the dropdown list with Webgrid in ASP.NET MVC3, Razor

In this tutorial i will show you that how can we create the dynamic webgrid on dropdown selected index change in MVC & razor using JSON ....



What we will do is that on dropdown change event we will call the jquery which will take the value of the selected item of dropdown list & will pass it to Action....


DropDown list is ...

@Html.DropDownListFor

(model => @Model.ListId, new SelectList(Model.Lists, "ListId", "Name"), "--Select a list--")

also we have to one empty Div like this...
<div id="grid">   </div>

Jquery is ....

    <script type="text/javascript">
        $(function() {
            $('#ListId').change(function() {
                var customDataListId = $("#ListId").val();
     $.getJSON('@Url.Action("Data")', { id: ListId}, function (result) {
                    var customDataList = $('#grid');
                    customDataList.empty();
                    customDataList.append(result.Data);
                });
            });
        });
    </script>

Where....  "#ListId" is Name property of the Dropdown list...

     ......    "Data" is action name 

     .....    "result" is result returned from the action .....  see bellow for action method

      .......   "#grid" is id of the empty grid

Now We will write ActionMethod....

[AcceptVerbs(HttpVerbs.Get)] 
        public JsonResult CustomData(int id)
        {
            // here I get the data from the database in result
            var result = _customDataListRepository.GetCustomDataWithId(id).ToList(); 

//now I create the new webgrid ,also i will pass result as it parameter
            var grid = new WebGrid(result);

//now i create the columns of the grid ....
var htmlString = grid.GetHtml

(tableStyle: "paramTable", htmlAttributes: new {id = "grid"},
                                          columns: grid.Columns(
                                              grid.Column("Name", "MyName"),
                                              grid.Column("CustomValue", "MyCustomValue")
                                              ));

// while returning i am passing this grid as htmlstring...
            return Json(new
                            {
                                Data = htmlString.ToHtmlString()
                            }
                , JsonRequestBehavior.AllowGet);
        } 

By doing this .... every time new grid will be created & old grid will be deleted .....

Also if you want to show whole table which u get from the database  then....

[AcceptVerbs(HttpVerbs.Get)] 
        public JsonResult CustomData(int id)
        {
            // here I get the data from the database in result
            var result = _customDataListRepository.GetCustomDataWithId(id).ToList();   

//now I create the new webgrid ,also i will pass result as it parameter
            var grid = new WebGrid(result); //now i create the columns of the grid ....
var htmlString = grid.GetHtml();// while returning i am passing this grid as htmlstring...
            return Json(new
                            {
                                Data = htmlString.ToHtmlString()
                            }
                , JsonRequestBehavior.AllowGet);
        }

Like this we can create dynamic webgrid using JSON with dropdown list 

How to change color or background of the menu tab of current page using css & jquery

Hello,
In this tutorial i will show you that how can we change the color or background of the menu tab when we are on that page.

<div class="menu">
            <ul>
                <li><a href="/Home">Home</a></li>
                <li><a href="/About Me">Forms</a></li>
                <li><a href="/Contact Me">Look &amp; Feel</a></li>
                <li><a href="/Blog">Security</a></li>
            </ul>
        </div>

 The css is somthing like this....

.menu ul{
    width: 100%;
    height: 21px;
    list-style: none;
    margin: 0px;
    padding: 0px 0px 0px 3px;
}

  .menu ul li {
    display: block;
    float: left;
    text-align: center;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top : 1px solid black;
    background-color: #ececec;
}  
 
 
 .menu ul li a{
    text-decoration: none;
    width: 90%;
    color: black;
    padding-left: 29px;
    padding-right: 29px;
    
 } 
 
  .menu ul li a:hover{
     color: blue;
     text-decoration: underline;
 } 
 
 .menu ul li.active a{
    border-bottom: 2px solid white;
    background-color: white;
}

and a samll jquery which does all magic is ...

<script>
        $(".menu ul li").removeClass("active");
        $(function () {
            var url = window.location.pathname;  
            var activePage = url.substring(url.lastIndexOf('/') + 1);
            $('.menu ul li a').each(function () {
       var currentPage = this.href.substring(this.href.lastIndexOf('/') + 1);
             if (activePage == currentPage) {
               $(this).parent().addClass('active');
                }
            });
        });
</script>

JQuery Introduction & JQuery Search Characters

We mainly use J Query for searching for some items on the page & doing something with them .

The JQuery functions which finds the items on the page are called selectors.

Base Selector in J Query is JQuery() or $() function.

String arguments can be passed to this functions in three ways 

 

Select by Element: This finds the elements with specific tag name & returns the array of that.

E.g.: $(“h2”) – this will find all <h2> tags.

Select by ID: This finds the elements which has the specified ID. We use “#” character to find the ID.

E.g.: 1) $(“#div1”) ---then this will search the elements which have the ID=div1.  

         2) If you want to search the element <div ID=”mydiv”> then JQuery would be $(“#mydiv”).

Select by CSS: this finds the elements with specific CSS class names. We use “.” to find the CSS class.

E.g.: 1) $(“.divStyle”) ---then it will search for the element which has CSS class as divStyle.

         2) If we want to search for the element <div class=”myDiv”> then JQuery will be $(“.myDiv”).

1.

There are some search characters used in JQuery to find the specific elements.

1.       “*” (asterisk) character: This is used to search the specified search term in the elements.

E.g.: $(“a[href*=net]”) ---- this will search in all <a> tags which has the text “net” as the part of the href attribute.

2.       “^” (caret) character: This is used to search the specified search term at the starting of the string.

E.g. $(“a[href^=folder/]”) ---- This will search in all <a> tags which has the text “folder/” at the beginning of the href attribute.

3.       “$” (dollar) character: This is used to search the specified search term at the end of the string. 

      E.g. $(“a[href$=in]”) ---- This will search for all <a> tags which has the text “in” at the end of the href      attribute.

4.       “!” (exclamation) character: This is used to search the elements whose attributes do not match the specified string 

      E.g.: $(“a[href!==http://www.google.com]”) ---- This will search for all <a> tags whose href attribute is not equal to www.google.com

How to make the height of the DIVs equal ?

In this tutorial i will show how can we make the heights of two divs equal by using jquery css.

I found this jquery when i was searching for the same question on net & it works perfectly.
We might have some divs which has different heights some thing like shown in image besides, but we want both divs to be of same height .

We can use jquery for doing this insted of changing the css .

function equalHeight(group) 
{  
var tallest = 0;
group.each(function() 
{   
var thisHeight = $(this).height();
if(thisHeight > tallest) 
{  
tallest = thisHeight;   
}  
});
group.height(tallest); 
}

This is the jquery which works perfectly....

What does this jquery do ?

It sets the "tallest" equals zero & then loops through each div in the
group & sets the tallest height as highest height of the "tallest" variable.

Value of the "tallest" variale is applied to whole group.

So to equalize the height of each div we need to do this...

$(document).ready(function() 
{
equalHeight($(".container));
}
);

where ".container" is the class of which is applied to each of the div.....

Lets see the bellow example to understand more ....

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>Untitled Page
< style>
#col1{ height:auto;width:200px;float:left;background-color:Aqua;}
#col2{ height:auto;width:200px;float:left;background-color:Beige;}
< /style>
< script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">< / script>
< script type="text/javascript">
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".container"));
});
< / script>
< / head>
< body>
< div class="container" id="col1">
The mango is a fleshy stone fruit belonging to the genus Mangifera, consisting of numerous species of
tropical fruiting trees in the flowering plant family Anacardiaceae.
< / div>
< div class="container" id="col2">
The mango is a fleshy stone fruit belonging to the genus Mangifera,
consisting of numerous species of tropical fruiting trees in the flowering plant family Anacardiaceae.
While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis,
Mangifera indica – the common mango or Indian mango – is the only mango tree commonly cultivated in many
tropical and subtropical regions, and its fruit is distributed essentially world-wide.
< / div>
< / body>
< / html>


Without jquery output will be something like this....


While applying jquery we need to take care of some things...

1. all divs which should have height equal should be applied with float:left or right & some width.
2. < script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> should be there , else jquery wont work.
3. ".container" class should be applied to each div . & in jqury as shown.

So after applying this jquery output should look something like this...


I found this on http://www.cssnewbie.com/equal-height-columns-with-jquery/ website ....

We can do same thing with more than 2 divs also....