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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s