通过JavaScript

Question

我试图使用RenderAction方法将视图称为模态对话框。我必须将视图中的一些数据传递给模态对话框的视图。我怎么能做到这一点？

到目前为止，下面是我的代码（按要求修剪）。

<table class="table">
<tr>
    <th>Project No</th>
    <th>Drawing No</th>
    <th>Revision</th>
    <th>Fabrication</th>
</tr>
@foreach (var irn in Model)
{ 
    <tr>
        <td class="projno">@irn.PROJECTNO</td>
        <td class="drawingno">@irn.DRAWINGNO</td>
        <td class="revno">@irn.REVNO</td>
        <td>
            <button class="button" type="button" class="btn  btn-sm" data-toggle="modal">Add</button>
        </td>

    </tr>
}

以下是使用RenderAction调用其他视图的模式对话框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <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">Enter Fabrication Information</h4>
        </div>
        <div class="modal-body">
            <div>
                @{Html.RenderAction("Create", "Fabrication");}
            </div>
        </div>
    </div>
</div>

以下是我尝试调用模态对话框的两种方法

<script type="text/jscript">

$(document).ready(function ()
{
    $('button').click(function ()
    {
        var $row = $(this).closest("tr")       // Finds the closest row <tr> 

        var $projectNo = $row.find(".projno")    // Gets a descendent with class="nr"
                   .text();                    // Retrieves the text within <td>

        var link = '@Url.Action("Create", "Fabrication")'

        // Method 1 - 
        $('#myModal').modal('show');

        //Method 2
        $.ajax({
            type: "GET",
            url: link,

            error: function (data)
            { },
            success: function (data)
            {
                $("#myModal.modal-body").html(data);
                $('#myModal').modal('show');
            },
            // in method 2, when I close the dialog, the screen becomes tinted and freezes while it works ok in method 1. why is that?
        });

    });
});

这是Fabrication / Create Conroller方法

public ActionResult Create(string projectNo, string drawingNo, string revisionNo)
    {
        ViewBag.ProjectNo = projectNo;
        ViewBag.DrawingNo = drawingNo;
        ViewBag.RevisionNo = revisionNo;
        return PartialView("Create");
    }

当用户单击“添加”按钮时，应显示模式对话框，其中包含来自父视图的ProjectNo信息。

Answer 1

您需要在调用控制器操作时传递数据。

通过JavaScript

当您通过jQuery发送AJAX请求时，您可以使用data选项属性，如下例所示。

如果您要发送GET请求，jQuery会自动将此对象附加到URL，如下所示：/Fabrication/Create?projectNo=123&drawingNo=456&revisionNo=789。

Hovewer，如果您发送POST请求，则不会更改URL，并且数据对象将在请求正文中传递。

$.ajax({
  type: "GET",
  url: link,
  data: {
    projectNo: 123,
    drawingNo: 456,
    revisionNo: 789
  }
  error: function (data)
  { },
  success: function (data)
  {
      $("#myModal .modal-body").html(data); // Note that you missed a space between selectors
      $('#myModal').modal('show');
  },
  // in method 2, when I close the dialog, the screen becomes tinted and freezes while it works ok in method 1. why is that?
});

通过Razor

您还可以使用Html.RenderAction或Url.Action中的一个参数来使用匿名对象传递任何其他数据。无论您之前传递了多少个参数（控制器和区域名称是可选的），此对象始终是最后一个函数参数。请注意，它更像是一个有趣的事实，因为在使用服务器端方法时无法直接访问JavaScript变量。在渲染表单的默认状态时，它会很好。

@* Pass custom parameters to controller's action and render it *@
@Html.RenderAction("Create", "Fabrication", new { 
  projectNo = 123,
  drawingNo = 456,
  revisionNo = 789
})

@* Create an URL to a controller's action with custom parameters *@
@Url.Action("Create", "Fabrication", new { 
  projectNo = 123,
  drawingNo = 456,
  revisionNo = 789
})

如何使用RenderAction

1 个答案:

通过JavaScript

通过Razor