$(document).ready()在局部视图加载之前触发

Question

我有一个包含部分视图的页面。

我的主视图 MyMainView.cshtml。

<div>
    @Html.Partial("MyPartial")    
</div>
@section pagespecific {
    <script type='text/javascript'>
        $(document).ready(function(){
            console.log('Value is: ' + $('#MyModelField').val());
        });
    </script>
}

MyPartial.cshtml

<div>
    @Html.HiddenFor(x => x.MyModelField)
</div>

模型中的MyModelField的值为True，但我在浏览器控制台中得到了以下输出：

Value is: undefined

为什么这个字段没有被检测到？难道不应该在这个触发程序之前将局部视图添加到DOM中吗？

如果我将$(document).ready()更改为$(window).load()，它就能按预期工作了。

我如何实现所需的行为？

- Alex

---

文档对象模型（DOM）的就绪事件在服务器构建并发送HTML标记到浏览器之前不可能触发。 - Sparky

在得出结论$('#MyModelField')不存在之前，我建议先查看页面源代码。 - deostroll

Answer 1

是的，这是真的。原因是在你的dom准备好后会触发.ready事件。因此，你的页面首先加载并触发jquery的.ready函数，而顺序执行的部分视图也在服务器端执行。

两者在可用性上有所不同。

如果要停止或想要延迟执行:

- 你可以在部分视图中这样做

或者

• Give the delay time of your duration

  $(document).ready(function(){
      console.log('Value is: ' + $('#MyModelField').val());
      setTimeout("$('#buttonid').click()", DelayDuration);
  });
  

  //DelayDuration means give milisecond value, 1000 milisecond = 1 sec

这里有相同的问题

JQuery事件无法与ASP.NET MVC部分视图一起使用

在MVC Asp.net中呈现局部视图后，是否可能启动JavaScript函数？

- Ajay2707

Answer 2

$(document).ready 不会在部分视图渲染之前触发，因为部分视图是在服务器端渲染的。你在jquery中使用了错误的ID，因为@Html.HiddenFor(x => x.MyModelField)不会创建ID="MyModelField"的元素。该元素将具有以你的模型类名称为前缀的ID。

在浏览器工具(F12)中检查元素的ID，并确定真实的ID。

例如： 如果你的模型名称是User类，则生成的ID将类似于User_MyModelField

- opewix

---

不是 - 在这种情况下，ID 是 MyModelField。这是来自页面源代码的内容：<input data-val="true" data-val-required="The MyModelFieldfield is required." id="MyModelField" name="MyModelField" type="hidden" value="True">。 - Alex