I have a view that displays a list of records. One of the columns is the identifier (SynchronizationID). Another element is a button with a dynamically generated identifier, which includes "btnUpdate", concatenated with the ID column. It works great.
Here is the part of the view that displays the list as a grid:
@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> }
I have a jQuery selector that binds buttons to a click event that works fine. The click event, as well as the button events that handle the Accept and Cancel buttons, are as follows:
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(); }
Modal display of a partial view containing one required field, a date that also works fine. But when I enter the date and click the "Accept" button, the controller passes the model back to the constructor with the filled date field (which it calls by calling the SET () method in the controller date field, but the id field I need to update is always 0.
Here is a partial view:
@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>
I really don't need a SynchronizationId in this form. It is intended for debugging purposes only. I just need a date. But when the constructor is called, I also need synchronizationId so that I can update this entry in the database.
The following is an Ajax call for a partial view:
<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>
I tried everything I could think of, and I readily admit that it might just be that I'm pretty new to MVC that keeps me going.
Any help would be welcomed by grealy.
UPDATE:
As I continued to debug this, I added a hidden field in the list view entry called CurrentSynchId, which I set in the button click event as follows:
$('#CurrentSynchId').val($(this).attr('synchId'));
Then, if I add the following line to my partial view, which I definitely don't want:
@Html.EditorFor(model => model.SynchronizationId);
And finally, set the property value in the model on my submit button handler for the submit button in modal mode:
$('#SynchronizationId').val($('#CurrentSynchId').val());
Here is an example of a partial view in case this helps:
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]; } }
Again, any help would be great. I feel like I just stumbled upon something that works here, and I don't know why. If I remove this helper call EditorFor () from the partial view, this will not work.
UPDATED AGAIN: Nevermind. I understood this, and I understand why. I changed the EditorFor () helper to HiddenFor (), which causes the field to move from the view to a partial view and be saved in the model for partial viewing. Everything is good.
Hope someone else having the same problem can get some information from this. This is basically a way to make a grid with buttons and modules and works well.