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

时间:2011-12-01 19:23:03

标签: jquery asp.net-mvc razor

我有一个呈现记录列表的视图。其中一列是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("btnUpdate{0}",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字段I需要更新始终为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 个答案:

答案 0 :(得分:0)

它对我有用

@ Html.HiddenFor(model =&gt; model.SynchronizationId)