从Ajax ActionLink MVC3.0向Javascript metod传递参数

时间:2013-05-20 12:10:58

标签: javascript asp.net-mvc asp.net-mvc-3 asp.net-ajax

我在向javascript函数发送参数(Id)时遇到问题。让我告诉你一个基本想法:我有一个训练模型,每个训练模型都有一个调查。我在下面的代码中做的是为员工拍摄的每个培训生成一个弹出式链接并显示一个弹出窗口。为此,我使用了Ajax ActionLink,并在每个部分中显示弹出窗口,我发现了一个id为Training的div。因此,当onComplete我调用一个javascript函数openPopup来显示弹出窗口但它没有。所以最后我有不同的div,我将弹出一个窗口,我想将div的id传递给javascript函数。你能告诉我如何解决这个问题吗?

谢谢。

  <script type="text/javascript">
        $(document).ready(function (id) {
            $(id).dialog({
                autoOpen: false,
                title: 'Anket',
                width: 500,
                height: 'auto',
                modal: true
            });
        });
        function openPopup(id) {
            $(id).dialog("open");
        }
    </script>

   foreach (var training in Model.TrainingList)
   {
      <tr>
        <td class="view_detail_label">
                        Eğitim Adı
         </td>
          <td>

          @Ajax.ActionLink(training.Name.Name,
                           "AddSurvey", 
          new { employeeId = Model.Id, trainingId = training.Id },
           new AjaxOptions
             {
            UpdateTargetId = training.Id.ToString(),
              HttpMethod = "GET",
              InsertionMode = InsertionMode.Replace,
               LoadingElementId = "context",
               OnComplete = "openPopup('"+training.Id.ToString()+"')"
                 })

               <div id="@training.Id" style="display:none;"/>  

                    </td>                        
                </tr>                 
               }           
            }
        </table>

1 个答案:

答案 0 :(得分:2)

你可以使用普通的Html.ActionLink,你可以不引人注意地使用AJAXify,这样可以提供更大的灵活性。此外,您似乎使用了id函数的一些document.ready参数,该函数不存在且无处可去。 document.ready回调不带任何参数。

所以:

<script type="text/javascript">
    $(document).ready(function () {
        $('.addSurvey').click(function() {
            $.ajax({
                url: this.href,
                type: 'GET',
                cache: false,
                context: this,
                success: function(result) {
                    $(this).next('.result').html(result).dialog({
                        autoOpen: true,
                        title: 'Anket',
                        width: 500,
                        height: 'auto',
                        modal: true
                    });
                }
            });
            return false;
        });
    });
</script>

<table>
    @foreach (var training in Model.TrainingList)
    {
       <tr>
           <td class="view_detail_label">
               Eğitim Adı
           </td>
           <td>
               @Html.ActionLink(
                   training.Name.Name, 
                   AddSurvey, 
                   new { 
                       employeeId = Model.Id, 
                       trainingId = training.Id 
                   },
                   new {
                       @class = "addSurvey"
                   }
               )
               <div class="result"></div>
           </td>                        
       </tr>                 
    }
</table>

另外,我强烈建议您在单独的javascript文件中移出脚本,不要将标记与脚本混合。

备注:由于您在模式对话框中打开AJAX调用的结果,我不太明白在每一行中都有结果div。你可以简单地从<table>移出它并且只有一个。