How to pass data from one view to another using RenderAction

Question

I am trying to call a view as modal dialog using RenderAction method. I have to pass some data from the view to the modal dialog's View. How can I achive this?

Below is my code (trimmed as per required) so far.

<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>
}

Here is the modal dialog using RenderAction to call another view

<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>

Here are two ways I have tried to invoke the modal dialog

<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?
        });

    });
});

Here is the Fabrication/Create Conroller method

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

When user click Add button, modal dialog should appear carrying ProjectNo information from parent View.

Answer 1

You need to pass the data when invoking controller action.

via JavaScript

When you're sending AJAX request via jQuery, you can use data option property, like in the example below.

If you're sending GET requst, jQuery will automagically append this object to the URL, like so: /Fabrication/Create?projectNo=123&drawingNo=456&revisionNo=789 .

Hovewer, if you're sending POST request, URL will not be changed and the data object will be passed inside a request body.

 $.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? }); 

via Razor

You can also use one of the parameter of Html.RenderAction or Url.Action to pass any additional data using anonymous object. This object is always the last function argument, no matter how many arguments you pass before (controller and area names are optional). Note that it's more of a fun fact , because you can't access JavaScript variables directly when using Server-Side methods. It'd be good when rendering default state of your form.

 @* 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 })