Happy to Help: JQuery

Calling Controllers method from Javascript / Jquery in ASP.Net MVC

<div dir="ltr" style="text-align: left;" trbidi="on">
Following is the next post in the <a href="http://counsellingbyabhi.blogspot.in/search/label/Programming">Programming </a>section of this blog and 2nd post in <a href="http://counsellingbyabhi.blogspot.in/search/label/ASP.Net%20MVC">MVC </a>.  
 
Scenario : While working in my first MVC project , I was trying  to add functionality in a menu embedded in MVC View (city.cshtml). The view was having details of a particular city and in menu there were certain menu items like 'CRIME' , 'WEATHER' etc for that City. 
 
According to the menu item clicked , there was need of some server side processing and according to that processing result , I had to show some information in the left side panel keeping the whole View (page) intact means I didn't want to refresh whole of the View. So one of the several approaches can be to call controller method (server side processing) via javascript or Jquery. 
 
AIM: Calling controllers method using Jquery / Javascript  
 
 
<div>
<div>
Following is the Controller method to be called returning an array of some class objects. Let the class is 'A'</div>
<div>
 </div>
<div>
 
<div>
 public JsonResult SubMenu_Click(string param1, string param2)</div>


 
<div>
        {</div>


<div>
           A[] arr = null;</div>

<div>
            try</div>
<div>
            {</div>
<div>
                Processing... 
               Get Result and fill arr.</div>
<div>
 </div>
<div>
            }</div>
<div>
            catch { }</div>
<div>
 </div>
<div>
 </div>
<div>
            return Json(arr , JsonRequestBehavior.AllowGet);</div>
<div>
 </div>
<div>
        } 
 
 
Following is the complex type (class) 
 
   public class A 
   { 
 
    public string property1 {get ; set ;} 
 
    public string property2 {get ; set ;} 
 
   }</div>
<div>
 </div>
<div>
Now it was turn to call above controller method by JQUERY. Following is the Jquery function to call the controller method.</div>
</div>
<div>
 </div>
<div>
<div>
function callControllerMethod(value1 , value2) {</div>
<div>
        var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2'</div>
<div>
        $.getJSON(strMethodUrl, receieveResponse);</div>
<div>
    } 
 </div>
</div>
<div>
 
<div>
  function receieveResponse(response) {</div>


 
<div>
        if (response != null) {</div>


<div>
            for (var i = 0; i < response.length; i++) {</div>

<div>
               alert(response[i].property1);</div>
<div>
            }</div>
<div>
        }</div>
<div>
    }</div>
</div>
 
 
In the above Jquery function 'callControllerMethod' we develop controller method url  and put that in a variable named 'strMehodUrl' and call getJSON method of Jquery API. 
 
receieveResponse is the callback function receiving the response or return value of the controllers method.  
 
Here we made use of JSON , since we can't make use of the C# class object 
<div>
directly into the javascript function , so we converted the result (arr) in controller method into JSON object as follows: 
 
 Json(arr , JsonRequestBehavior.AllowGet); 
 
and returned that Json object. 
 
Now in callback function of the <a href="http://counsellingbyabhi.blogspot.in/search/label/JQuery">Javascript / JQuery</a> we can make use of this resultant <a href="http://counsellingbyabhi.blogspot.com/2013/02/json-javascript-object-notation.html">JSON</a> object and work accordingly to show response data on UI. 
 
Hope this will help. Happy Coding. 
 
You may also be interested in  
<ul style="text-align: left;">
<li><a href="http://counsellingbyabhi.blogspot.in/2013/01/aspnet-mvc-multiple-button-actions-in.html" style="font-family: Verdana, sans-serif;">Calling multiple actions in an MVC form</a></li>
<li><a href="http://counsellingbyabhi.blogspot.in/2013/01/jquery-examples-1.html" style="font-family: Verdana, sans-serif;">JQuery and Javascript examples</a></li>
</ul>
<div>
For exploring more in programming on this blog <a href="http://counsellingbyabhi.blogspot.in/search/label/Programming">click here </a></div>
 
 
 
 </div>
 
 </div>
</div>

Calling Controllers method from Javascript / Jquery in ASP.Net MVC

Following is the next post in the Programming section of this blog and 2nd post in MVC . Scenario : While working in my first MVC proje...

Read complete article »

JSON (JavaScript Object Notation)

<div dir="ltr" style="text-align: left;" trbidi="on">
 
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the <a href="http://javascript.crockford.com/" style="color: maroon; text-decoration: initial;">JavaScript Programming Language</a>, <a href="http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf" style="color: maroon; text-decoration: initial;">Standard ECMA-262 3rd Edition - December 1999</a>. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language. 
 
JSON is built on two structures: 
<ul>
<li>A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.</li>
<li>An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.</li>
<li> </li>
</ul>
These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangeable with programming languages also be based on these structures. 
In JSON, they take on these forms: 
An object is an unordered set of name/value pairs. An object begins with <tt>{</tt> (left brace) and ends with <tt>}</tt> (right brace). Each name is followed by <tt>:</tt> (colon) and the name/value pairs are separated by <tt>,</tt> (comma). 
<img height="113" src="http://www.json.org/object.gif" width="598" /> 
An array is an ordered collection of values. An array begins with <tt>[</tt> (left bracket) and ends with <tt>]</tt> (right bracket). Values are separated by <tt>,</tt> (comma). 
<img height="113" src="http://www.json.org/array.gif" width="598" /> 
A value can be a string in double quotes, or a number, or <tt>true</tt> or <tt>false</tt> or <tt>null</tt>, or an object or an array. These structures can be nested. 
<img height="278" src="http://www.json.org/value.gif" width="598" /> 
A string is a sequence of zero or more Unicode characters, wrapped in double quotes, using backslash escapes. A character is represented as a single character string. A string is very much like a C or Java string. 
<img height="413" src="http://www.json.org/string.gif" width="598" /> 
A number is very much like a C or Java number, except that the octal and hexadecimal formats are not used. 
<img height="266" src="http://www.json.org/number.gif" width="598" /> 
Whitespace can be inserted between any pair of tokens. Excepting a few encoding details, that completely describes the language. 
 
 
 
 
 
 
 
 
You may also be interested in  
<ul>
<li><a href="http://counsellingbyabhi.blogspot.in/2013/01/jquery-examples-1.html" style="font-family: Verdana, sans-serif;">JQuery and Javascript examples</a></li>
</ul>
<div>
For exploring more in programming on this blog <a href="http://counsellingbyabhi.blogspot.in/search/label/Programming">click here </a></div>
 
 </div>

JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machi...

Read complete article »

JQuery and Javascript Examples - 1

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" trbidi="on">
 
We discussed in my <a href="http://counsellingbyabhi.blogspot.in/2013/01/JQuery.html">previous post</a> that how efficient J Query is ?It enables to perform the required functionality in very less code as compare to the java script. 
In this series of article I will write about small J query samples and their comparison with JavaScript code. 
 
So starting this series, I am presenting here the code to select some item in combo box. (select tag in HTML). Lets suppose I have a HTML form and we are having a combo box in that form. My task is to select some item in combobox. the task can be achieved by Javascript and Jquery both. Lets see how can we achieve the purpose : 
 
HTML code to have a combobox in a form. 
 
 <html> 
 <head> 
 </head> 
 <body> 
  <select id="ddlStates" name="states[]" class="mySelect" onchange="callStateChange(this);"> 
           <option value="">State</option> 
           <option value="NY">New York</option> 
           <option value="NC">North Carolina</option> 
           <option value="ND">North Dakota</option> 
           <option value="OH">Ohio</option> 
           <option value="OK">Oklahoma</option> 
         </select> 
 </body> 
 </html> 
 
Now if I want that the combobox gets selected on load then I can use Javascript as well as Jquery. 
Lets suppose I want that on load , Newyork item should be selected. JQuery code : 
 <script type="text/javascript"> $("#ddlStates").val('NC'); </script></div>
<div dir="ltr" trbidi="on">
 </div>
<div dir="ltr" trbidi="on">
  JavaScript code: 
 
<script type="text/javascript">   
  var stateComboBox = document.getElementById('ddlStates'); 
  stateComboBox.value = 'NC' 
 </script> The example can be found here : <a href="http://bheeshamaindustries.com/Abhishek/a.html">Example</a> The complete source code of the example is follows: 
  <html>  
 <head>   
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">   
 </script>   
  <script type="text/javascript">   
    function selectByJQuery() {   
      $("#ddlStates").val('JQ');   
    };   
    function selectByJavascript() {   
      var stateComboBox = document.getElementById('ddlStates');   
      stateComboBox.value = 'JS';   
    }   
 </script>   
 </head>   
 <body>   
  <select id="ddlStates" name="states[]" class="mySelect" onchange="callStateChange(this);">   
           <option value="">Options</option>   
           <option value="JQ">JQuery</option>   
           <option value="JS">Javascript</option>   
         </select>   
  <input type="button" id="selectbyJQuery" value="JQuery Execution" onClick="selectByJQuery();"/>   
 <input id="selectbyJQuery" type="button" value="Javascript Execution" onClick="selectByJavascript();"/>   
 </body>   
 </html>   
</div>
</div>
</div>
</div>
</div>
</div>
 
</div>

JQuery and Javascript Examples - 1

We discussed in my previous post that how efficient J Query is ?It enables to perform the required functionality in very less code ...

Read complete article »

JQuery - A PowerFul Tool

<div dir="ltr" style="text-align: left;" trbidi="on">
The purpose of jQuery is to make it much easier to use JavaScript on your website. 
<h2 style="font-family: verdana, helvetica, arial, sans-serif; margin-bottom: 10px; margin-top: 10px;">
</h2>
<h2 style="margin-bottom: 10px; margin-top: 10px;">
What is jQuery?</h2>
jQuery is a lightweight, "write less, do more", JavaScript library. 
The purpose of jQuery is to make it much easier to use JavaScript on your website. 
jQuery takes a lot of common tasks that requires many lines of JavaScript code to accomplish, and wraps it into methods that you can call with a single line of code. 
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. 
The jQuery library contains the following features: 
<ul>
<li>HTML/DOM manipulation</li>
<li>CSS manipulation</li>
<li>HTML event methods</li>
<li>Effects and animations</li>
<li>AJAX</li>
<li>Utilities</li>
</ul>
Tip: In addition, jQuery has plugins for almost any task out there.

<h2 style="margin-bottom: 10px; margin-top: 10px;">
Why jQuery?</h2>
There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. 
Many of the biggest companies on the Web use jQuery, like: 
<ul>
<li>Google</li>
<li>Microsoft</li>
<li>IBM</li>
<li>Netflix</li>
</ul>
Query is very strong tool. The same functionality implemented in JavaScript can be implemented very efficiently in J query. 
 
<div>
<a href="http://counsellingbyabhi.blogspot.in/2013/01/jquery-examples-1.html">Click here</a> to see J Query effective sample and comparison with JavaScript.</div>
</div>

JQuery - A PowerFul Tool

The purpose of jQuery is to make it much easier to use JavaScript on your website. What is jQuery? jQuery is a lightweight, "writ...

Read complete article »