Question

因此我们在ASP.Net MVC项目中有一些非常相似的模态，我想动态设置它们，这样我们就不必遍布这么多的文件了。

一旦我点击了某个按钮并打开了模态，我如何检查哪个按钮打开了模态，这样我就可以自定义逻辑并注入特定的html？

按钮＃1：

df['openchgprevday']  =   (df['Open']-1)-(df['Open'])

print("Hello World")

按钮＃2：

<a class="btn btn-primary margin-bottom-5" data-toggle="modal" data-target="#newBugModal">
    <i class="fa fa-lg fa-fw fa-plus"></i> New Bug
</a>

<div class="modal fade" id="newBugModal" tabindex="-1" role="dialog" aria-labelledby="newBugModalLabel" aria-hidden="true">
    @Html.Partial("_bugModal")
</div>

可自定义模式：

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#bugEditModal">
    Edit
</a>

<div class="modal fade" id="bugEditModal" tabindex="-1" role="dialog" aria-labelledby="bugEditModalLabel" aria-hidden="true">
    @Html.Partial("_bugModal")
</div>

我知道这可能很简单但是我不能完全理解它，以及我是否应该使用jQuery来完成这个或只是一些Razor代码。想法？

Answer 1

您可以尝试将按钮选择器ID传递给部分，如下所示：

 @Html.Partial("_bugModal", new ViewDataDictionary { { "buttonId", "you-button-id"} });

在你的局部只需添加一个隐藏的字段：

 <input type='hidden' id='some-id' value='@ViewBag.buttonId'/>

Answer 2

你可以有2个动作方法，它们返回2个不同的局部视图结果，一个用于新的，一个用于编辑。让模态对话框根据点击链接的href属性获取远程内容。

<a class="btn btn-primary margin-bottom-5 modal-link" href="@Url.Action("New","Bug")"  
    New Bug
</a>    
<a  class="btn btn-default modal-link" href="@Url.Action("Edit","Bug", new {id= 101 })" >
    Edit
</a>

以及将远程内容加载到模态

的客户端代码

$(function(){
     $('body').on('click', '.modal-link',function (e) {
         e.preventDefault();

          $("#myModal").remove();
          $.get($(this).attr("href"),function (data) {
              $('<div id="myModal" class="modal fade"><div class="modal-dialog" 
                                                  role="document">' +data +'</div></div>')
                                .modal();
          });
   });

});

假设您有一个New和Edit操作方法，该方法返回带有模式对话框所需标记的相关局部视图。

public ActionResult New()
{
  return PartialView();
}

并在New的部分视图中

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
        <h4>Add Bug</h4>
         <!-- add your form elements here as needed -->
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

编辑操作方法也一样，但是您接受参数中的Id并使用它来构建编辑局部视图所需的视图模型

public ActionResult Edit(int id)
{
  var bugViewModel = GetBugViewModel(id);
  return PartialView(bugViewModel);
}

Answer 3

您可以使用Bootbox.js之类的插件，并在每个按钮的事件处理程序中生成模式：

<强>标记：

<a href="#" class="btn btn-default edit" data-id="some value">Edit</a>

<a href="#" class="btn btn-primary add">Add</a>

<强> jQuery的：

您的编辑按钮应将查找值存储为数据属性，或者（如果您愿意）将其存储为兄弟隐藏输入（使用closest()查找）：

$('.btn.edit').on('click', function(e){
    e.preventDefault();

    var id = $(this).data('id'); 

    /* your code to get the item data, template, whatever... */
    var value = "This is the current bug text";

    bootbox.prompt({
        title: 'Edit Bug',
        inputType: 'textarea',
        value: value,
        callback: function(result){
            if(result != ''){

                /* 
                    result will be a string value 
                    You'd add your persistence code here...
                */

            }
        }
    });
});

添加按钮类似：

$('.btn.add').on('click', function(e){
    e.preventDefault();

    bootbox.prompt({
        title: 'Add Bug',
        inputType: 'textarea',
        callback: function(result){
            if(result != ''){

                /* 
                    result will be a string value 
                    You'd add your persistence code here...
                */

            }
        }
    });
});

像Bootbox这样的插件的优点是你不需要在页面上的任何地方都有模态标记。特别是在Bootbox中，作者提供了可以用来代替原生提示的函数（需要注意Bootstrap模态不会阻塞）。

Answer 4

使用$.ajax()

的Javascript

$.ajax({
    url: "/controller/action", //The action return partial views
    type: "GET",
    beforeSend: function() {
        //Your code.
    },
    success: function(data) {
        $("#modal-content").html(data);
    },
    error: function() {
        alert("Failed");
    }
})

使用（最好）C＃Razor或JQuery来查找哪个按钮动态打开模态和设置模式

4 个答案: