从视图 A 调用视图 B 中的 jquery 函数答案

【问题标题】：Calling a jquery function within a view B from a view A从视图 A 调用视图 B 中的 jquery 函数
【发布时间】：2013-10-08 15:06:13
【问题描述】：

我在我的 asp.net mvc4 Web 应用程序中有一个视图，用户可以从中配置一些与之相关的内容。当用户单击此视图中的按钮时，例如配置视图，我想在另一个视图中调用 jquery 函数，例如主视图。这个 jquery 函数负责修改主视图中的元素。

在按钮所在的配置视图中，我有以下代码、一些输入文本框和按钮（这在配置控制器中调用 AddItem 操作）：

   @using (Html.BeginForm("AddItem", "Configure", FormMethod.Post))
   {   
        @Html.DropDownListFor(m => m.CustomViewModel.SelectedItemId, Model.CustomViewModel.ListItems)
        @Html.TextBox(...)
        <input id="submitAdd" type="submit" value="@Resource.ButtonTitleAdd" />
   }

那么当用户点击配置视图上的按钮时，如何从上面的代码中调用主视图中的jquery函数呢？

我还需要将配置视图下拉列表中的值选择传递给这个 jquery 函数。例如，如果下拉列表包含：

“某物1” “东西2” “某事3”

我需要传递下拉列表中所选项目的值。例如，如果用户选择“something1”并且其值为 1，则应将 1 传递给此 jquery 函数。此下拉列表中填充了模型。

【问题讨论】：

标签： javascript jquery asp.net-mvc-4 razor

【解决方案1】：

我会用一个自定义事件来解决它，你可以从任何你喜欢的地方触发和收听。

像这样触发它：

$.event.trigger('customStuff', [arg1, arg2, argN]);

然后像这样“听”它：

$(document).on('customStuff', function (e, arg1, arg2) { });

【讨论】：

好的，所以在我的主视图中我监听这个事件，并从按钮所在的配置视图中触发它。但是如何在我发布的代码中单击按钮时触发此事件？我必须把那条线放在哪里？抱歉，我是新手……
@user304602 抱歉，有一段时间没用了。你想清楚了吗？
我认为你可以监听提交事件（像这样在表单中添加一个名称：Html.BeginForm("AddItem", "Configure", FormMethod.Post, htmlAttributes: new {@name="somename"}) 并像这样使用它：$('form[name="somename"]').submit(function() { _trigger event_ })，例如获取这篇文章中的数据：@ 987654321@
最后一个解决方案与您评论的第一个解决方案有什么区别？哪个更正确？
@user304602 我只发布了一个解决方案。我会说这比简单地监听提交事件更通用。这可以添加到任何地方。

【解决方案2】：

当您使用 jQuery 时。我认为像 pubsub 这样的东西是你最好的选择，它鼓励基于事件的松散耦合。例如：

(function($) {

  var o = $({});

  $.subscribe = function() {
    o.on.apply(o, arguments);
  };

  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };

  $.publish = function() {
    o.trigger.apply(o, arguments);
  };

}(jQuery));

现在您可以使用以下代码：

// You can pass your custom data here
$.subscribe("firefunction", function(e, a, b, c) {
  console.log(a + b + c);
});

$.publish("firefunction", [ "a", "b", "c" ]);
// logs: abc

// Unsubscribe all handlers for this topic
$.unsubscribe("firefunction");

【讨论】：