如何从通过按钮单击呈现的部分视图将recordId传递给模型构造函数

Posted 2023-05-08

【中文标题】如何从通过按钮单击呈现的部分视图将recordId传递给模型构造函数

【英文标题】：How to pass recordId to model constructor from partial view rendered from a button click

【发布时间】：2012-01-10 22:26:54

【问题描述】：

我有一个呈现记录列表的视图。其中一列是 ID (SynchronizationID)。另一项是具有动态生成 ID 的按钮，其中包括与 ID 列连接的“btnUpdate”。效果很好。

以下是将列表呈现为网格的视图部分：

@foreach (var item in Model.PendingSynchronizations)

    <tr>
        <td>
            @item.SynchronizationID
        </td>
        <td>
            @item.CustomerName
        </td>
        <td>
            @item.ProductName
        </td>
        <td>
            @String.Format("0:g", item.LastProcessedDate)
        </td>
        <td>
            @item.OLAPServer
        </td>
        <td>
            @item.OLAPDatabase
        </td>
        <td>
            <input id="@String.Format("btnUpdate0",item.SynchronizationID.ToString())" type="submit" value="@String.Format("0", (item.ApprovedFlag) ? "Reject" : "Approve")" synchId="@item.SynchronizationID.ToString()"/>
        </td>
        <td>
            @item.ApprovedSynchDate
        </td>
    </tr>

我有一个 JQuery 选择器，它将按钮绑定到我的 click 事件，效果很好。点击事件以及处理Accept和Cancel按钮的按钮事件如下：

function promptForSynchDate() 
    $('#approve-synch').dialog(
        modal: true,
        height: 300,
        width: 450,
        title: 'Approve Production Synchronization ',
        buttons:
        [
             text: "Approve", click: approveSynch ,
             text: "Cancel", click: function ()  $(this).dialog("close");  
        ]
    );



function approveSynch() 
    $('#approveSynchForm').submit();


function updateComplete() 
    alert('Production Synch Approved');
    window.location.reload();
  

模态渲染一个局部视图，其中包含一个必填字段，一个日期，它也可以完美地工作。但是当我输入日期并单击“接受”按钮时，控制器将模型传递回构造函数并填充了日期字段（它通过在控制器的该日期字段上调用 ​​SET() 方法来完成。但是我的 id 字段更新需求始终为 0。

这是部分视图：

@model CubeBuilder.Site.Models.ProductionSynchDateModel
@using (html.BeginForm("ToggleApprove", "Synchronization", new  id = Model.SynchronizationId , FormMethod.Post))

    @Html.LabelFor(model => model.SynchronizationId);
    @Html.DisplayFor(model => model.SynchronizationId);
    @Html.LabelFor(model => model.SyncDate);
    @Html.TextBoxFor(model => model.SyncDate, new  @class = "datepicker" )        


<script type="text/javascript">
    $(document).ready(function () 
        $(".datepicker").datepicker();
    );
</script>

我实际上并不需要这种形式的 SynchronizationId。它仅用于调试目的。我只需要日期。但是当构造函数被调用时，我还需要synchronizationId，这样我就可以更新数据库中的这条记录。

以下是局部视图的 Ajax 调用：

<div id="approve-synch">
@using (Ajax.BeginForm("ToggleApprove", "Synchronization", new AjaxOptions()  
    OnFailure = "updateSynchFailed", 
    OnSuccess = "updateComplete", 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "approve-synch-form" , 
    new  id = "approveSynchForm" ))

<div id="approve-synch-form">
@Html.Partial("ApproveSynch", new CubeBuilder.Site.Models.ProductionSynchDateModel())
</div>

</div>

我已经尝试了我能想到的所有方法，并且很乐意承认可能只是我对 MVC 还很陌生，这阻碍了我。

任何帮助将不胜感激。

更新：

当我继续调试时，我在视图上添加了一个隐藏字段，其中包含名为 CurrentSynchId 的记录列表，我在按钮单击事件中设置如下：

$('#CurrentSynchId').val($(this).attr('synchId'));

如果我在部分视图中添加以下行，我绝对不想要：

@Html.EditorFor(model => model.SynchronizationId);

最后在我的提交按钮处理程序上为它工作的模式中的提交按钮设置模型中的属性值：

    $('#SynchronizationId').val($('#CurrentSynchId').val());

如果有帮助，这里是局部视图的模型：

public class ProductionSynchDateModel

    public short SynchronizationId  get; set; 
    public Synchronization synchInstance  get; set; 
    private SynchronizationManager synchManager  get; set;  

    public bool Approved
    
        get;
        set;
    

    [Required]
    [Display(Name = "Production Sync Date")]
    public DateTime? Schedule
    
        get;
        set;
    

    [Display(Name = "Production Sync Date")]
    public string SyncDate
    
        get
        
            if (Schedule.HasValue)
                return Schedule.Value.ToShortDateString();

            return string.Empty;
        
        set
        
            Schedule = Convert.ToDateTime(value);
        
    

    public ProductionSynchDateModel()
    
    

    public ProductionSynchDateModel(short id)
    
        var db = EntityContext.New;
        SynchronizationId = id;

        synchManager = new SynchronizationManager(db);
        synchInstance = synchManager[SynchronizationId];
    

同样，任何帮助都会很棒。我觉得我只是偶然发现了一些在这里工作的东西，我不知道为什么。如果我从部分视图中删除 EditorFor() 帮助器调用，它将不起作用。

再次更新：没关系。我想通了，我明白为什么。我将 EditorFor() 助手更改为 HiddenFor()，这会导致字段从视图推送到局部视图并保存在模型中以用于局部视图。一切都很好。

我希望有同样问题的其他人可以从中获得一些现场信息。它基本上是一种使用按钮和模式进行网格的方法，效果很好。

【参考方案1】：

对我有用

@Html.HiddenFor(model => model.SynchronizationId)