使用 MVC 部分视图异步填充 jquery 模式对话框,并显示在屏幕中央

2024-01-30

我正在尝试使用 jquery 模式对话框在单击某些内容时显示异步部分视图。很简单,而且有很多问题,但我似乎无法让它发挥作用。我已经有模态显示,但不在中心。我读过这是因为我正在填充 divafter显示对话框,因此该位置是相对于空 div,而不是填充的 div - 我已经通过显示一些静态内容证明了这一点,并且它居中良好。

所以现在,我尝试先获取部分视图,然后在 load() 回调中显示对话框,但它不起作用。我在“dialog('open')”行收到错误,因为对话框方法未定义。这是我的代码:

(P.S. 我是 javascript/jQuery 的新手,如果它很明显,很抱歉)

<script type="text/javascript">

    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });
    });

    $(document).ready(function() {
        $('#show-modal').click(function() {
            $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                $('#my-dialog').dialog('open');
            });

            return false;
        });
    });

</script>

<div id="my-dialog"></div>

<a href="#" id="show-modal">Click Me </a>

帮助表示感谢!

Edit我已更改代码以匹配达林的代码,并上传了一张显示问题所在的图像?


您的代码看起来不错,并且在我测试时它有效。这是我的完整测试用例:

控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult MyActionOnController()
    {
        // TODO: You could return a PartialView here of course
        return Content("<div>Hello world</div>", "text/html");
    }
}

查看(~/Views/Home/Index.cshtml):

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#my-dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true
            });

            $('#show-modal').click(function() {
                $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                    $(this).dialog('open');
                });
                return false;
            });

        });
    </script>
</head>
<body>
    <div id="my-dialog"></div>
    <a href="#" id="show-modal">Click Me </a>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 MVC 部分视图异步填充 jquery 模式对话框,并显示在屏幕中央 的相关文章

  • 如何让 jQuery 的自动完成插件在页面加载时显示其下拉列表?

    http community sciencecareers org mt static plugins CommunityPlus js autocomplete http community sciencecareers org mt s
  • 起订量:无法投射到接口

    今天早些时候我问过这个question https stackoverflow com questions 2774785 moq unable to cast 因此 由于起订量从接口创建它自己的类 我无法将其转换为不同的类 所以这让我想知
  • 两个 OnClick 事件重叠

    我在元素内有一个元素 当我单击下面的元素时 我希望打开滑块 当我单击最外面的元素时 我希望滑块关闭 不幸的是 当我单击最外面的元素时 它也会单击下面的元素 有没有办法只单击最外面的元素而忽略下面元素的单击 这些事件在单击时触发并使用 Jav
  • 如何使用 php 发送服务器错误响应?

    一旦用户点击删除按钮我的 jQuery 脚本要求服务器删除所选项目 现在我想要我的php发送成功或错误响应的脚本 是否有可能触发错误回调万一该项目无法删除 Thanks 我的 jQuery 代码 ajax type post url myA
  • jquery验证-等待远程检查完成

    当我打电话时 form valid 我连接了远程验证检查 一切正常 但是如果所有其他字段都有效 则表单会通过验证 因为远程检查没有 足够快 返回响应 有没有办法强制 jquery 验证等待任何远程检查完成或挂钩远程检查调用的完成事件 我目前
  • 如何在 MVC3 Razor 视图中呈现数据表

    我在 xls 电子表格 1 之间有一个可靠且经过测试的导入方法 该方法返回DataTable 我已将其定位在我的服务层中 而不是数据中 因为只有工作簿作为上传文件保存 但现在我想知道在哪里以及如何生成此内容的 HTML 表示形式DataTa
  • CDATA 真的有必要吗?

    我经常使用内联 Javascript 通常是在我制作的 WordPress 主题中 我没有听说过将内联 Javascript 包装在 直到几个月前 几年来我一直在以相当的能力水平做这些事情 我用谷歌搜索了一下 听说人们使用它是因为他们的 J
  • jquery datatable ajax 无数据可用 mvc

    我有一张桌子是在 document ready功能 我还使用 jQuery DataTables 插件 由于某种原因 当页面加载时 ajax 调用控制器并返回数据并将其设置为我的网格所有获取的数据 但是尽管所有数据都加载到数据表中 但仍获取
  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • Active Directory 会员资格提供商 - 如何对此进行扩展?

    我正在努力通过 AD Membership Provider 启动并运行 MVC 应用程序 但在解决这个问题时遇到了一些问题 我有一个基本配置设置并在我登录时工作 电子邮件受保护 cdn cgi l email protection 密码
  • jqgrid删除:没有获取值

    我使用 JSP 和 Servlet IDE Eclipse 数据库 Oracle10 开发 Web 应用程序 我在用JQGRID以表格格式显示数据 我还想要添加 编辑 删除的功能JQGRID 到目前为止我已经完成了编辑功能 现在我想要Del
  • ajax推送服务器

    好吧 我最近写了一个ajax推送脚本 其中后端的php在等待某人更新时处于休眠状态 但是休眠的进程占用了大量的cpu 关于如何防止这种情况的任何想法 我猜我必须要么找到一个可以使用线程休眠的程序 要么用我不太熟悉的 python 或 c 编
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 如何在 jQuery 中获取 ul 列表中 li 的第一个 href 链接

    我有以下清单 ul class tabs li a href testlink php First link a li li a href testlink2 php Second link a li ul 我想获取第一个链接的 href
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • jquery.validate 中是否有一个函数可以像重置表单一样重置单个字段?

    我想调用 jquery 函数来手动删除单个字段中的错误并重置错误标记 是否有一个函数可以执行此操作 类似于 resetForm 函数 您可以执行以下操作来验证单个字段 your field valid 也许它会对某人有所帮助 Thanks
  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表

随机推荐