如何使 Html.Action 参数动态化？

Question

我正在使用 ASP.NET MVC。 我有一个动作，我称之为获得局部视图。 我正在使用@Html.Action()来获取局部视图。 它工作正常，但仅适用于id=533 。 假设当用户单击网格按钮时，我们可以调用 Javascript function。我如何从 function 将 id 和 tab 值传递给 Html.Action() 并检索部分视图 html/js。 仅供参考 - 部分视图的 Javascript 也必须有效。

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

这是提交 Controller 中的 SubmissionHeader 操作。

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

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

附加评论/代码：这是 JavaScript Ajax 调用以用最新的 html 响应替换 div。 这种方法的问题 java 与部分视图关联的脚本不起作用，从 html 响应触发的任何事件都不起作用。

正在被 html ajax 调用响应替换的 Div。

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

这是调用 ajax 传递动态参数的 javascript function-

<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

我假设您正在尝试替换 controller 中的 id，然后将其传递给局部视图。 如果是这样，你可以做这样的事情。 代替

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

例如：

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

在您的部分视图中创建隐藏字段 [Id]，其值从 controller 传递

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

然后最后在你的脚本中

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

编辑

如果要将按钮动态加载到 DOM，则必须将事件附加到文档而不是特定元素。

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

Answer 2

最后我可以通过修改我的方法来解决这个问题。

这是我遵循的-

1. 我像以前一样保留评论 div。

2. 我更新了这个 Div，就像我在页面加载时所做的那样调用 ajax 并动态传递参数 -

    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. 这将解决动态变量的问题，更新的内容将显示在 DIV 中，因为我替换了 DIV id 和选项卡值。 但请注意，这不会解决 onclick 或 onload 或任何 on 事件的任何问题。 即使您使 js 文件可用，它们也会在 div 更新后失效。 为了解决这个问题，我必须重新绑定所有动态数据，在我的例子中，通过调用 ajax 来重新绑定下拉值 - 就像这样。

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