Sys.ArgumentUndefinedException: Value cannot be undefined.

Question

I am developing some ajax stuff on asp.net mvc framework beta.

but,I got exception as following. Anyone has problem like me?

Sys.ArgumentUndefinedException: Value cannot be undefined.

and my source code is like this.

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

<script type="text/javascript">
    var myView;

    $(pageLoad);

    function pageLoad() {
        myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
        $("#callAjaxButton").click(callActionMethod);
    }

    function callActionMethod() {
        $.getJSON("/Home/GetCategories", bindData);
    }

    function bindData(data) {
        myView.set_data(data);
    }

</script>

<input type="button" id="callAjaxButton" value="ajaxCall" />

<div id="ajaxResult"></div>    

</asp:Content>

Answer 1

From the snippet you provided there are a couple of things to consider:

• You are missing a script reference to the Microsoft ASP.NET 2.0 AJAX Templates for Visual Studio 2008.

• You are using the jquery's document.ready function (raised whenever the DOM is ready to be traversed and manipulated) instead of the System.Application.init event (raised after all scripts have been loaded but before objects are created).

Can you try this to see if it works for you:

<script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>

<script type="text/javascript">
    var myView;

    Sys.Application.add_init(pageLoad);

    function pageLoad() {
        myView = $create(Sys.UI.DataView, {}, {}, {}, $get("ajaxResult"));
        $("#callAjaxButton").click(callActionMethod);
    }

    function callActionMethod() {
        $.getJSON("/Home/GetCategories", bindData);
    }

    function bindData(data) {
        myView.set_data(data);
    }

</script>

<input type="button" id="callAjaxButton" value="ajaxCall" />
<div id="ajaxResult"></div>

Scott Hanselman has written a nice post on this subject.

Answer 2

Thanks darin, It worked well :)