How to make Html.Action parameters dynamic?

Question

I'm using ASP.NET MVC. I've an action which I call to get partial view. I'm using @Html.Action() in order to get the partial view. It works fine but for only id=533 . Let's say when user clicks a grid button we can call a Javascript function. From that function how can I pass id and tab values to Html.Action() and retrieve partial view html/js. FYI - Javascript of Partial View must work too.

<div ng-controller="submissionDashboardController">
    @Html.Action("SubmissionHeader", "Submission", new { id = 533, tab = 0 })
</div>

@using (Html.RequiredScripts())
{
    @Html.RequirePageScript("Shared", "ShortcutLinks")
    @Html.RequirePageScript("Submission", "ListSubmissionDashboard")
    @Html.RequirePageScript("Shared", "GridPersonalization")
    @Html.RequirePageScript("Shared", "SubmissionCreation")
}

This is SubmissionHeader Action in Submission Controller.

[ChildActionOnly]
        public ActionResult SubmissionHeader(int? id, SubmissionTabEnum tab = SubmissionTabEnum.None)
        {
            // More logic and code here...

            TempData["SubmissionHeaderID"] = id;
            return PartialView("_SubmissionHeader", model);
        }

Additional Comment/Code: Here is JavaScript Ajax Call to replace div with latest html response. Issue with this approach java script associated with partial view does not work, any event gets triggered from the html response doesn't work.

Div that is getting replaced with html ajax call response.

<div id="comment"></div>

Here is the javascript function which is calling ajax passing dynamic parameters-

<script>

function DisplayCommentDialog(SubmissionID) {
        
        // Ajax Call for Dynamic Parameters and html partial view response
        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: '/Submission/SubmissionHeader',
            async: false,
            data: { id: SubmissionID, tab: 0 },
            success: function (result) {
                commentDiv = result;
                $("#comment").html(commentDiv);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
</script>

Answer 1

I assume you are trying to replace id in your controller and then pass it to partial view. If so, you can do something like this. Replace

@Html.Action("SubmissionHeader", "Submission", new { id = 533, tab = 0 })

with for example:

<button class="btn btn-secondary" type="button" onclick="DisplayCommentDialog()">Press here</button>

In your partial view create hidden field [Id] with value passed from controller

@Html.Hidden("Id", @id)

Then finaly in you script

<script>

var id = 533; // replace with initial values from model if nesesery
var tab = 0;

function DisplayCommentDialog() {
        
        // Ajax Call for Dynamic Parameters and html partial view response
        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: '/Submission/SubmissionHeader',
            async: false,
            data: { id: id, tab: tab },
            success: function (result) {
                commentDiv = result;
                $("#comment").html(commentDiv);
                id = $($.parseHTML(result)).filter('#Id').val(); // set new id value from result
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
</script>

EDIT

If you are loading button dynamically to DOM you must attach event to document not to specific element.

$(document).on('click','#your_button_id', function(){
   // desired function here
})

Answer 2

Finally I could able to solve this issue by modifying my approach.

Here is what I followed -

1. I kept comment div exactly like before.

2. I updated this Div making an ajax call like I was doing at page load and passed parameters dynamically -

    function DisplayCommentDialog(id, tab) { // Ajax Call for Dynamic Parameters and html partial view response $.ajax({ type: 'POST', dataType: 'html', url: '/Submission/SubmissionHeader', async: false, data: { id: id, tab: tab }, success: function (result) { commentDiv = result; $("#comment").html(commentDiv); id = $($.parseHTML(result)).filter('#Id').val(); // set new id value from result }, error: function (XMLHttpRequest, textStatus, errorThrown) { } }); }

3. This will solve the issue with dynamic variable and updated content will be displayed in DIV as I replaced the DIV id and tab values. But please note this will not solve any issue with onclick or onload or any on event. They will be dead after div is updated even if you make js file available. In order to fix this issue I had to rebind all dynamic data, in my case a drop down values by making an ajax call and rebind the drop down - something like this.

    > <script> > function DisplayCommentDialog(EntityOrganizationID) { > var categories = $("#commentrecipients").kendoDropDownList({ > optionLabel: "Select Recipients...", > dataTextField: "Name", > dataValueField: "UserID", > height: 310, > Width: "900px", > dataSource: { > transport: { > read: function (options) { > $.ajax({ > url: "/Submission/SecurityGroupsUsersAccessRight", > dataType: "JSON", // "jsonp" is required for cross-domain requests; use "json" for same-domain > requests > data: { > id: EntityOrganizationID > }, > success: function (result) { > // notify the data source that the request succeeded > options.success(result); > }, > error: function (result) { > // notify the data source that the request failed > options.error(result); > } > }); > } > } > } > }).data("kendoDropDownList"); > } > </script>