Unobtrusive JavaScript and Ajax in MVC 3

In the previous release of the ASP.NET MVC which is (MVC 2) I didn’t like the Ajax usage, like Ajax action link and Ajax begin form and I make a rule for the previous project for all my team memebers, that it is prohibited to use any of them, Why??

Because they generate inline JavaScript which is the same way as the web form does, this one of the reason that makes me hit the web form approach.

So why I use them isnted of I can makes a clean JQuery code to follow JavaScript Unobtrusive JavaScript which means that we should keep our JavaScript code separated in. js file, as the CSS it must be separated from the html, the JavaScript also must be separated from html

But in MVC 3 I surprised that all Ajax action not generate inline scripts and use JQuery and custom html attributes, we just reference unobtrusive-ajax.js file and of course the JQuery library, which I can consider it (unobtrusive) as a JQuery plugin, so now I really consider using Ajax helper method in  my next proejct

• See Ajax Begin Form in MVC 2

<form onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event),
{ insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: '#myDiv' });"
onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
method="post" action="/Home/Save">

<input type="text" name="Name">
    <input type="submit" value="Save">

</form>

• See the Ajax Begin from in MVC 3

<form method="post" id="form0" data-ajax-update="#myDiv" data-ajax-mode="after" data-ajax-method="POST" data-ajax="true" action="/Home/Save">

<input type="text" name="Name">
<input type="submit" value="Save">

</form>

This really show us how Microsoft not only imporove the MVC itself  but also how they try to follow and lead the web community again as before

Thanks Microsoft Keep Improving

How to pass function by name variable not by body to JQuery?

It is a very small tip but the final comments are very important and it just here for fast remember, the story begin when I start re-factoring my team JQuery code, I found that there are many functions passed by body and inside these function another many functions also passed by body and most of these functions repeated with no need and the code become terrible and can’t maintained specially for someone like me that didn’t write JQuery everyday

So all you need to do just declare a function and pass it like the following:

<script language="javascript" type="text/javascript">

        var func1 = function () {
            alert("Finished");
        };
        var func2 = function () {

            $("#div2").fadeOut(5000, func1);
        };
        $("#div1").click(func2);

    </script>

• My mistake was I was pass the function with the parentheses, so I only need to write the function name and if I write the parentheses it will give me errors
• If  I create a function that take parameters I can’t pass parameters in a callback
• Remember who call the callback, if the JQuery do?  it will pass the parameters that needed if the callback signature require parameters like the function exist in the Ajax request callback which has parameter data that response from the request
• The function must be declare before the usage of  it in the code so consider the arrange of the code
• Remember you can call a function and pass a parameters normally inside any function but the key here that you can’t pass parameter when you register or passing the function to JQuery code
• ddd

 <script language="javascript" type="text/javascript">
        var text = "Hello";
    </script>
    
    
    <script language="javascript" type="text/javascript">
        var func1 = function () {
            alert(text+" Seif and Lara");
        };
        var func2 = function () {
            
            $("#div2").fadeOut(5000, func1);
        };
        var s = "#div" + 1;
        $(s).click(func2);
      
    </script>