Category Archives: jQuery

Calling Page_View jQuery function

1. Include utility.js which include below script:

$(document).ready(function () {
    var activePage = $("body");
    activePage.InitializeComponent({ Init: $("body").attr("id") });
});

(function () {
    var baseMethods = {
        InitializeComponent: function (options) {
            var defaults =
                {
                    Base: "Page_",
                    Init: "",
                    Data: "",
                    Date: ""
                };
            var opts = $.extend(defaults, options);
            var functionName = opts.Base + opts.Init;
            var C_Ref = null;
            C_Ref = $(this);
            var state = (C_Ref.data("IsBinded") === undefined || C_Ref.data("IsBinded") === null || !C_Ref.data("IsBinded")) ? false : true;

            if (typeof window[functionName] !== "undefined") {
                window[functionName]({ Handled: state, Reference: C_Ref, Data: opts.Data, Date: opts.Date });
                C_Ref.data("IsBinded", true);
            }
        }
                      
    };

    jQuery.each(baseMethods, function (i) {
        jQuery.fn[i] = this;
    });
})(jQuery);

2. Now add a Common js file all views which has js function Page_ for all view pages. Like

 function Page_HelloJQueryTest(e) {
	alert('hi Demo');
 }

here ‘HelloJQueryTest’ is the name of my view.

3. Add both above js file reference layout view. And in html body tag of layout add id attribute i.e. . So your layout will look like:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/utility.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Demo.js")" type="text/javascript"></script>
</head>

<body id="@ViewBag.PageID">
    @RenderBody()
</body>
</html>

4. Add ViewBag.PageID = “HelloJQueryTest” to each view which include above layout. Like:
For View HelloJQueryTest.cshtml

	@{
		ViewBag.Title = "HelloJQueryTest";
		ViewBag.PageId = "HelloJQueryTest";
		Layout = "~/Views/Shared/_Layout.cshtml";
	}

	<h2>HelloJQueryTest</h2>
   

5. Above view will have controller action defined. Like:

	public class DemoController : Controller
        {
             public ActionResult HelloJQueryTest()
             {
                return View();
             }
        }
       

6. Now when you run your MVC application then for “HelloJQueryTest” all script user function Page_HelloJQueryTest(e) will be called.
Happy coding

Leave a comment

Filed under jQuery

jQuery Explained

How to use jQuery selectors with examples.
http://jquerybyexample.blogspot.com/2011/05/jquery-selectors-examples.html

Difference between $(this) & this in jQuery?
http://jquerybyexample.blogspot.com/2010/08/difference-between-this-and-this-in.html

Does jQuery returns error if DOM element doesn’t exist?
http://jquerybyexample.blogspot.com/2010/08/how-to-check-element-exists-or-not-in.html

What is .bind() method do? And differ from .click() ?
http://jquerybyexample.blogspot.com/2010/06/jquery-bind-function-exampledemo.html

Differ between .bind(), .live() & .delegate()?
http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html

Understand $.proxy() in jQuery.
http://stackoverflow.com/questions/4986329/understanding-proxy-in-jquery

Leave a comment

Filed under jQuery