Question

我使用Bootstrap创建了一个弹出视图（EmployeeRegistration.cshtml）进行注册及其Action方法。但我想从另一个视图（EmployeeList.cshtml）获取此弹出视图。我可以做吗？如果是，那么如何？请问任何代码。 //EmployeeList.cshtml

 @Html.ActionLink("Create New", "Registration", "Registration", new
{
    @class = "openDialog",
    data_dialog_id = "aboutDialog",
    data_dialog_title = "Create Employee"
})

<div id="gridposition" style="width: 100%;">
    @{

        @grid1.GetHtml(mode: WebGridPagerModes.All,
//code to display employee list on grid
     }
</div>

以下是Registration.cshtml

@using (Html.BeginForm())
{
<div class="modal fade mymodal" id="openDialogDiv">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

//code here to pop up
       </div>
   </div>
</div>

我想在点击ActionList时显示弹出窗口，如上所示

Answer 1

在EmployeeList.cshtml中创建一个div来保存从Registration.cshtml返回的html

<div id="result"></div>

将Registration.cshtml作为局部视图。

使用此锚标记。

 <a href ="#" onclick="funName()" class=="openDialog">Create New </a>

发出ajax请求以获取弹出内容和onsuccess，使用返回的html填充div并打开模式弹出窗口。

<script>
function funName()
{
   $.ajax({
   url: 'yoururl',
   type: 'GET',
   dataType: 'html',
   success: function(data) {
               $('#info').html(data);
               $('#mymodal').modal('show');
              },
   error: function() {}
   });
}

Answer 2

我认为有两种选择： 1.忘记Registration.cshtml并将以下代码放在EmployeeList.cshtml中：

  <button type="button" class="openDialog">Create New</button>
  <form class="modal fade mymodal" id="openDialogDiv" role="dialog">
     <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
             //code here to pop up
          </div>
      </div>
    </div>
  </form>

然后使用jquery显示表单：

$('.openDialog').click(function(){
   $('#openDialogDiv').modal();
});

2.在控制器中创建新的操作方法，将EmployeeRegistration.cshtml作为部分视图返回，让我将其命名为DisplayRegistration()，现在您可以使用ajax调用，DisplayRegistration()并显示{{ 1}}。请注意，我已将EmployeeRegistration.cshtml更改为Html.ActionLink代码

在MVC中查看对另一个视图的调用

2 个答案: