Why isn't my JavaScript function being called?

Here is what I have so far for my Index site:

<%  if (Model.Data != null)
    {
       if (Model.Data.Rows.Count > 0)
       {
       var divLoadGif = string.Empty;
           var divRealData = string.Empty;
           for(int n = 0; n < Model.Data.Rows; n++)
           {
               divLoadGif  = "divLoadGif_"  + n.ToString("0000");
               divRealData = "divRealData_" + n.ToString("0000");    
%>
               <div id="<%:divLoadGif%>" style="width: 100%;">
                  Please wait ... 
                  <img src="/loading.gif" alt="loading ..." />
               </div> 

               <div id="<%:divRealData%>" style="visibility: hidden;">
                  <div id="column_1" style="width: 25%; float:left;">
                     This
                  </div>
                  <div id="column_2" style="width: 25%; float:left;">
                     is
                  </div>
                  <div id="column_3" style="width: 25%; float:left;">
                     a test
                  </div>
                  <div id="column_4" style="width: 25%; float:left;">
                    row.
                  </div>
               </div>

               <script type="text/javascript">
                  AsyncFunction(<%: divLoadGif %>, <%: divRealData %>, n);
               </script>
<%        }
       }
    }
%>

The controller fills my Model.Data. For example:

• Model.Data.Row should be equal to 3. This means the loop will make 3 "rounds". The idea is that in each "round" a loading gif should be displayed while the div part (with the 4 columns) is invisible.

• Then the JavaScript function AsyncFuntionCall should be called. (This failed.)

• This JavaScript function becomes two "div tag ids" and n (variable of the for loop). It will then use AJAX to call a controller method.

• The controller method gets also the div tags and n.

• Finally, the controller method will be called 3 times. The controller method will return a "result" for every call. Every call will need a few seconds before it returns a result to the AJAX functionality.

The success: function (result) { result = $.parseJSON(result); ...} part of my AJAX call will then do the following:

• Parse the result.

• Switch the div with id="<%:divLoadGif%>" to hidden.

• Switch the div with id="<%:divRealData%>" to visible.

• Replace the 4 "values" with the parsed values from result.

Easy? Not for me :-( because I have some problems:

1. The loop works fine. But the JavaScript function AsyncFunction isn't called at 开发者_开发知识库all! What's going wrong?

2. I have absolutely no idea how I can change the "This" "is" "a test" "row" values in the success: function (result) { result = $.parseJSON(result); ...} part of my AJAX call.

---

Try AsyncFunction(<%: divLoadGif %>, <%: divRealData %>, <%: n %>);