简体   繁体   English

如何将参数传递给jQuery document.ready()函数(ASP.NET MVC,C#)

[英]How to pass parameters to jQuery document.ready() function (ASP.NET MVC, C#)

I would like to pass a parameter to the jQuery document.ready() function from my View: 我想从我的视图中将参数传递给jQuery document.ready()函数

$(document).ready(function (parameter){
        $('select[name=Product]').val(parameter);
});

How can I fire the event from my View and pass the parameter? 如何从我的View中激活事件并传递参数? I use Razor as View engine. 我使用Razor作为View引擎。

Thanks 谢谢

You can't. 你不能。 The document.ready function doesn't take parameters. document.ready函数不带参数。 You could for example define this parameter as a global variable in your view: 例如,您可以将此参数定义为视图中的全局变量:

<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
</script>

and then in your separate javascript file use this global variable: 然后在你单独的javascript文件中使用这个全局变量:

$(function() {
    $('select[name=Product]').val(model.SomeProperty);
});

To avoid using global variables, you can define a closure and then returning this function to ready() : 要避免使用全局变量,可以定义一个闭包,然后将此函数返回到ready()

function start(parameter)
{
    return function()
    {
        /*...use parameter */
        alert('parameter: ' + parameter);
    }
}

and then call ready() : 然后调用ready()

$(document).ready(start('someValue'));

You can also define the start function in a external .js file and calling ready (for example) in your main html file. 您还可以在外部.js文件中定义启动函数,并在主html文件中调用ready(例如)。 Example: external script.js: 示例:external script.js:

function start(parameter)
{
   return function()
   {
        /*...use parameter */
        alert('parameter: ' + parameter);
   }
}

html file: html文件:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script>
$(document).ready(start('someValue'));
</script>
</head>
<body>
</body>
</html>

Calling ready() in the latter file allows you to pass server parameters to your functions. 在后一个文件中调用ready()允许您将服务器参数传递给您的函数。 Example (using PHP. In this case you must change the extension from html to php to this file): 示例(使用PHP。在这种情况下,您必须将扩展名从html更改为php到此文件):

$(document).ready(start('<?php echo $serverParameter; ?>'));

You can effectively accomplish this with a closure. 您可以通过闭包有效地完成此操作。 That is, if you are calling something like $(document).ready(startup) then you can easily rewrite startup so that you can call it with a parameter, eg $(document).ready(startup(7)) . 也就是说,如果你正在调用类似$(document).ready(startup)那么你可以轻松地重写startup这样你就可以使用参数调用它,例如$(document).ready(startup(7)) Pablo gave an excellent underrated answer, and it is worth giving a more detailed example. 巴勃罗给出了一个非常低估的答案,值得给出一个更详细的例子。

Example

Here is a page which displays an alert, invoked by $(document).ready() , that calculates 6*9 : 这是一个显示由$(document).ready()调用的警报的页面,它计算6*9

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      function startup() {
        alert('6 * 9 = ' + 6 * 9);
      }
    </script>
  </head>

  <body>
    Hello!
    <script>
      $(document).ready(startup);
    </script>
  </body>
</html>

Say you want to replace "9" with a variable parameter. 假设您要用可变参数替换“9”。 The 4-step recipe to do this is: 这样做的四步方法是:

  1. Parameterize the function. 参数化功能。
  2. Wrap the function body in a closure. 将函数体包裹在一个闭包中。 That is, return function() {...} . 也就是说, return function() {...}
  3. Parameterize the body. 参数化身体。
  4. Call the function with the parameter. 使用参数调用该函数。

Applying this to the above code: 将此应用于上述代码:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      function startup(x) { // Step 1 - Parameterize the function
        return function() { // Step 2 - Put body in "return function() {...}"
        alert('6 * '+x+' = ' + 6 * x); // Step 3 - Parameterize the body.
        } // (closing brace for step 2)
      }
    </script>
  </head>

  <body>
    Hello!
    <script>
      $(document).ready(startup(7)); // Step 4 - Call function with parameter.
    </script>
  </body>
</html>

This displays the alert "6 * 7 = 42". 这会显示警告“6 * 7 = 42”。

What's Happening? 发生了什么?

$(document).ready() takes as its parameter a function. $(document).ready()将一个函数作为参数。 This is why it is called in the first version above with just startup as the parameter. 这就是为什么在上面的第一个版本中调用它只是startup作为参数。 In contrast if you called it with startup() you wouldn't be passing in the startup function anymore, you would be passing in the return value of startup . 相反,如果你用startup()调用它,你将不再传递startup函数,你将传递startup返回值

Since $(document).ready() takes a function as its parameter, that's what we give it: startup is transformed in the second version above into a function that returns a function, which has the parameter x set to the value we pass it initially. 因为$(document).ready()接受一个函数作为参数,所以我们给它: startup在上面的第二个版本中转换为一个返回函数的函数,该函数的参数x设置为我们传递给它的值原来。 That is, startup(7) returns a function to $(document).ready() that has the value of x set to 7 . 也就是说, startup(7)将函数返回到$(document).ready() ,其值x设置为7

OP's Question OP的问题

To specifically apply this to the OP's question, rewrite that call as 要将此问题专门应用于OP的问题,请将该调用重写为

$(document).ready((function(x) { return function() {
    $('select[name=Product]').val(x);
}})('name'));

where 'name' can be any other value that gets substituted for x . 其中'name'可以是替换x任何其他值。 No need for global variables. 不需要全局变量。

More information: JavaScript closures . 更多信息: JavaScript闭包

You can simply echo your parameter value into the Javascript code if its inline in your view. 如果您的参数值在视图中内联,则可以简单地将参数值回显到Javascript代码中。

$(document).ready(function (){
        $('select[name=Product]').val('@ViewBag.Parameter');
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM