JQuery - 需要在页面上的任何锚链接单击上显示模式对话框

发布于 2024-12-08 16:12:34 字数 326 浏览 0 评论 0原文

在我的剃刀视图中，我有带有锚的桌子。下面显示的单元格之一：

@foreach (MillitarySlot slot in item.SundaySlots)
                { 
                    <a style="color:@slot.Color" title="@slot.ToolTip" href="@slot.HRef">@slot.SlotText</a><br />
                }

如果用户单击任何锚点，那么我需要显示模式对话框。我怎样才能实现这个目标？

原文

In my razor view, I have got table with the anchors. One of the cell shown below:

@foreach (MillitarySlot slot in item.SundaySlots)
                { 
                    <a style="color:@slot.Color" title="@slot.ToolTip" href="@slot.HRef">@slot.SlotText</a><br />
                }

If user clicks any of the anchor then I need to show modal dialog. How can I achieve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

快乐很简单 2024-12-15 16:12:34

所以，如果你做了这样的事情：

$('a').click(function(e) {
   alert('anchor clicked');
});

你会收到页面上点击的每个锚点的警报 - 这不太可能是你想要的。如果您为这些锚点分配了一个类，那么您可以执行以下操作：

$('a.myclass').click(function(e) {
   alert('anchor clicked');
});

然后您将收到属于该类的锚点的警报。对于模式对话框部分，您可以替换我收到警报的位置，本质上是在页面上创建一个隐藏的 div 来用作模式对话框。我做了类似的事情，看起来像：

$('a.myclass).click(function () {
   // add the div or reuse it
   var modaldialog = ($('#ModalDialog').length > 0)
     ? $('#ModalDialog')
     : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body');
   load up data via ajax call
   $.get('@Url.Action("MyAction", "MyController")', {},
      function (responseText, textStatus, XMLHttpRequest) {
         modaldialog.html(responseText);
         modaldialog.dialog({
            modal: true,
            width: 500,
            title: 'My Modal Dialog',
         });
      }
   );
});

无论如何，这是一个开始。您也可以向对话框添加按钮，并让这些按钮根据您的特定需求执行操作。

So, if you did something like this:

$('a').click(function(e) {
   alert('anchor clicked');
});

you'd get that alert for every anchor clicked on the page - not likely what you want. If you assigned those anchors a class, then you could do this:

$('a.myclass').click(function(e) {
   alert('anchor clicked');
});

and then you'd get the alert for just the anchors which were of that class. For the modal dialog part, you could just substitute that where I've got the alert, essentially creating a hidden div on the page to use as the modal dialog. I did something like this and it looked something like:

$('a.myclass).click(function () {
   // add the div or reuse it
   var modaldialog = ($('#ModalDialog').length > 0)
     ? $('#ModalDialog')
     : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body');
   load up data via ajax call
   $.get('@Url.Action("MyAction", "MyController")', {},
      function (responseText, textStatus, XMLHttpRequest) {
         modaldialog.html(responseText);
         modaldialog.dialog({
            modal: true,
            width: 500,
            title: 'My Modal Dialog',
         });
      }
   );
});

Anyway, that's a start. You can add buttons to the dialog as well and have those do things based on whatever your particular needs are.

回复收藏 0 原文