C# Bootstrap 4模式弹出按钮功能被clickable阻止<；tr>；要素_C#_Asp.net Mvc 4_Bootstrap 4_Razor 2

C# Bootstrap 4模式弹出按钮功能被clickable阻止<；tr>；要素

c# asp.net-mvc-4 bootstrap-4

C# Bootstrap 4模式弹出按钮功能被clickable阻止<；tr>；要素,c#,asp.net-mvc-4,bootstrap-4,razor-2,C#,Asp.net Mvc 4,Bootstrap 4,Razor 2,我有以下用于简单库存管理应用程序的GUI：我的问题是。。。元素的@Url.Action（…）正在阻止delete（trash）按钮弹出引导模式。页面导航到行项目“详细信息”页面。但是，如果没有导航，模态将弹出表格行标记： <tr onclick="location.href = '@(Url.Action("Action", "Controller", new { id = item.ItemID }))'" class="inventory-row"> ... <

我有以下用于简单库存管理应用程序的GUI：

我的问题是。。。

元素的

@Url.Action（…）

正在阻止delete（trash）按钮弹出引导模式。页面导航到行项目“详细信息”页面。但是，如果没有导航，模态将弹出

表格行标记：

<tr onclick="location.href = '@(Url.Action("Action", "Controller", new { id = item.ItemID }))'" class="inventory-row">
    ... <!-- Item Info -->
</tr>

@Html.ActionLink("<i class='fas fa-trash-alt'></i>", "#", null, new { @class = "btn btn-danger", @data_toggle = "modal", @data_target = "#DeleteConfirmationModal" })

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
    <i class="fas fa-pencil-alt"></i>
</button>

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
    try
    {
        Item.RemoveItem(id);
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

$(".btn-warning").click(function (e) {
  e.stopPropagation()
  let target = $(this).data('target')
  $(target).modal('show')
})
$(".btn-danger").click(function (e) {
  e.stopPropagation()
  let target = $(this).data('target')
  $(target).modal('show')
})

此标记可以工作，但您需要提供该模式ID：

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
    <i class="fas fa-pencil-alt"></i>
</button>

我不确定你是不是误丢了身份证

编辑：

我明白了，我想这是因为你在使用

，而我也遇到了同样的问题

请尝试以下标记：

<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
    <i class="fas fa-pencil-alt"></i>
</a>

编辑：

哦，我明白你的意思了，是的，是你的

事件触发了。将此添加到按钮单击事件：

event.stopPropagation（）
文档：
因此，看看您的代码，因为您有一个编辑按钮，所以您应该添加一个视图按钮，并从
标记中删除操作链接，然后将其移动到一个按钮。这将阻止页面导航离开整行的onclick事件。使用右侧的3个按钮，用户可以知道如何单击，而不是使整行都可单击
编辑：
因此，我将以下内容设置为MVC，在页脚后加载jQuery，在页面中加载脚本时遇到问题，因为它会在多行按钮上出错。我从来都不是e.stopPropagation（）
的粉丝，因为它总是会在页面上引起其他问题，但是在没有其他jQuery调用的情况下，这个页面上的接缝应该可以工作。这是一张工作票
在视图中包括文件：
@section Scripts
{
  <script src="@Url.Content("~/Scripts/index.js")"></script>
}

由于垃圾箱按钮位于tr
内，因此可以尝试处理垃圾箱按钮本身的单击事件，并阻止事件向上传播。我假设您使用的是引导，所以下面的解决方案使用的是jQuery。这适用于按钮
或操作链接
，但通常在使用
如何在MVC中实现这一点

将防伪令牌添加到您的视图中（将下面的控制器名称
替换为您的控制器
）
将JavaScript包装在脚本块中

将修改后的JavaScript代码放在视图的末尾：
@section Scripts{
    <script>
        $(document).ready(function () {
            // handler for the trash button
            $(".btn.btn-danger").click(function (e) {

                e.stopPropagation()
                let target = $(this).data('target')
                let forkliftId = $(this).data('fid')
                // update the forklift to delete in the hidden field
                $('#forklift-Id').val(forkliftId)
                $(target).modal('show')
            })

            // handler for the delete confirmation on the modal
            $('#delete-confirm').click(function () {
                $('#delete-forklift-form').submit()
            })
        })
    </script>
}

到

@RenderSection（“脚本”，必需：false）
//末尾的RenderSection脚本
很抱歉。。。我在输入问题时遗漏了它，但我的实际代码中没有遗漏ID。这确实会打开模式，但页面仍然会从
标记导航到items“Details”页面。我也尝试过这样做。我认为无论我在哪里单击该行，它都会触发转到详细信息页面。“编辑”按钮工作的唯一原因是它在有机会导航到“项目详细信息”页面之前导航到“项目编辑”页面。使用我的删除按钮，我试图在同一页面上弹出一个确认模式，因此
元素将被导航离开。如果这有道理的话。我也尝试过javascript禁用默认链接行为，但仍然没有成功。我可能不得不改变我的设计。现在，我刚刚将这些按钮移动到“项目详细信息”页面。如果用户单击行上的任意位置，您需要导航到“详细信息”页面吗？或者仅当用户单击铅笔按钮时，您需要导航到“详细信息”页面吗？如果用户单击行上的任意位置，我需要导航到“详细信息”页面。铅笔按钮将它们带到项目编辑页面。我可以，但我在问题中的限制是允许用户单击行而不是查看按钮。行元素将优先于元素，因为元素嵌套在元素中。这就像试图触摸密封玻璃罐中的一个按钮。解决这个问题的唯一方法是使ID可单击，这样您就可以控制哪些元素可单击。我希望这是有意义的。你可以做的另一件事是删除按钮，并将删除按钮放在项目视图页面上。因此，当他们单击行时，他们可以编辑、保存或删除记录。我不确定通过使ID可单击来指的是什么，但我理解你对嵌套元素的意思，我只是觉得编辑（铅笔）按钮很奇怪。现在我在详细信息页面中有按钮，所以他们只需单击该行，然后单击以编辑/删除/等等。将所有内容放在一个位置将非常方便。可单击的行是否将用户带到与编辑按钮相同的URL？我感谢您的帮助。对我来说，这似乎是最有希望的答案。特别是当我看到e.stopPropagation（）
是一件事，但我仍然无法让它起作用。看起来它仍在试图打开模态，但它已经导航离开了。我正在使用bootstrap-4。@GregHess嗯，很有趣。我添加了一个演示，其中有一个html的原型。看看演示，看看我是否遗漏了什么。看看你的演示，我确实注意到我在将模式代码放入
元素时犯了一个巨大的错误。然而，即使将模态移到表外，我仍然面临同样的问题。这是我的代码的一个例子，我很困惑我可能会做错什么，因为你的演示显然有效。很抱歉，在粘贴箱中忽略第68行类之间的额外空间。。。我添加了空间，认为可能需要它。我试过有空间和没有空间。@GregHess问题出在你的布局上。在使用jQuery之后，您将其包括在内。在我的答案中将JavaScript包装在脚本块中之后，您必须进行的所有更改才能开始工作。我注意到您正在使用$（“#DeleteForkliftButton”）
，请不要使用此选项，请使用回答中提供的$（“.btn.btn danger”）。这应该可以掩盖这个问题。另外，请随时删除重新设置
$(".btn-warning").click(function (e) {
  e.stopPropagation()
  let target = $(this).data('target')
  $(target).modal('show')
})
$(".btn-danger").click(function (e) {
  e.stopPropagation()
  let target = $(this).data('target')
  $(target).modal('show')
})

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
    <i class="fas fa-trash-alt"></i>
</button>

$(document).ready(function() {
  $(".btn.btn-danger").click(function(e) {
    e.stopPropagation()
    let target = $(this).data('target')
    $(target).modal('show')
  })
})

// The purpose of this form is to create a Anti-forgery token
// needed by the controller. Insert this anywhere in your html
@using (Html.BeginForm("DeleteConfirmed", "ControllerName", FormMethod.Post, new { id = "delete-forklift-form" }))
{
    @Html.AntiForgeryToken()
    <input type="hidden" id="forklift-Id" name="id" value="" /> 
}

<!-- Modal -->
<div class="modal fade" id="DeleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this item?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="delete-confirm" type="button" class="btn btn-primary">Delete</button>
      </div>
    </div>
  </div>
</div>

// We need this ID to be passed to the delete action
// This is the foreach statement in you view from the pastebin link
@foreach(var item in Model.ForkliftStockInventoryList)
{
    // ... rest of the stuff
    <button type="button" class="btn btn-danger" data-fid="@item.ForkliftID" data-toggle="modal" data-target="#DeleteConfirmationModal">
        <i class="fas fa-trash-alt"></i>
    </button>  
}

@section Scripts{
    <script>
        $(document).ready(function () {
            // handler for the trash button
            $(".btn.btn-danger").click(function (e) {

                e.stopPropagation()
                let target = $(this).data('target')
                let forkliftId = $(this).data('fid')
                // update the forklift to delete in the hidden field
                $('#forklift-Id').val(forkliftId)
                $(target).modal('show')
            })

            // handler for the delete confirmation on the modal
            $('#delete-confirm').click(function () {
                $('#delete-forklift-form').submit()
            })
        })
    </script>
}

 @RenderSection("scripts", required: false)
    @*<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>*@
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    @RenderSection("scripts", required: false)
// RenderSection scripts at the end