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

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

我使用的是 ASP.NET MVC。我有一个动作，我调用它来获取局部视图。我正在使用 @Html.Action() 以获得局部视图。它工作正常，但仅适用于 id=533。假设当用户单击网格按钮时，我们可以调用 Javascript 函数。从该函数如何将 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")
}

这是提交控制器中的提交标题操作。

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

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

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

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

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

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

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

解决方法

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

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

例如：

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

在你的局部视图中创建隐藏字段 [Id] 与从控制器传递的值

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

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

这是我遵循的 -

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

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

function DisplayCommentDialog(id,tab) {
        
        // Ajax Call for Dynamic Parameters and html partial view response
        $.ajax({
            type: 'POST',errorThrown) {
            }
        });
    }

这将解决动态变量的问题，更新的内容将显示在 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>