I have a Dialog box within my view, in which there is an editor template rendered containing a checbox list.
The idea is, users make selections and hit the select button from the dialog box, a request is made to a controller action method which returns the updated model.
So whats happening is it does successfully make a hit to the controller, the updated view with the new model property values is returned but I believe since I am not refreshing the DOM correctly, the new model values do not reflect on the page.
Should I just refresh the div which contains the model properties? or do .LOAD as opposed to a .Post
$('#main').load('@Url.Action("Create", "RunLogEntry")', { $("#form").serialize() });
var RunDialog;
$(document).ready(function () {
RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: false, modal: false, resizable: false, draggable: true, title: 'Select Run Dates:', width: 600, height: 500,
buttons: { Select: function () {
$.post("/RunLogEntry/Create",
$("#form").serialize(),
function (data) {
$('main').html(data);
}, "json");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$('#RunDatesChildDialogLink').click(function () {
RunDialog.dialog('open');
$("#runDatestreeview").parent().appendTo("form");
});
// $("#runDatesList").appendTo("#runDatestreeview");
});
EDIT
View:
@model RunLog.Domain.Entities.RunLogEntry
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/errorCode.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/runDates.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/testexception.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/runLogEntry.js")" type="text/javascript"></script>
<script type="text/javascript">
var runlogListErrorsUrl = '@Url.Action("ListErrorCodes", "RunLogEntry")';
</script>
<fieldset>
<legend>Enter a new Run Log Entry</legend>
<div id="main">
@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
{
@Html.ValidationSummary(true)
<div class="exception">@(ViewBag.ErrorMessage)</div>
<div class="bodyContent">
<span class="leftContent">Load List File (Select): </span><span class="rightContent">
<input type="file" name="file" id="file1" style="width: 500px" />
</span>
</div>
if (Model.LoadListStoredFileName != null)
{
<div class="bodyContent"> <span class="leftContent">Attached Load List: </span><span
class="rightContent">
@Html.ActionLink(Model.LoadListFileName, "Download", new { @file = Model.LoadListStoredFileName })
</span> </div>
}
<div class="bodyContent">
<span class="leftContent">Output File (Select): </span><span class="rightContent">
<input type="file" name="file" id="file2" style="width: 500px" />
</span>
</div>
if (Model.OutputStoredFileName != null)
{
<div class="bodyContent"> <span class="leftContent">Attached Output: </span><span
class="rightContent">
@Html.ActionLink(Model.OutputFileName, "Download", new { @file = Model.OutputStoredFileName })
</span> </div>
}
<div class="bodyContent">
<span class="leftContent">.LOG File(s) -Zip: </span><span class="rightContent">
<input type="file" name="file" id="file3" style="width: 500px" />
</span>
</div>
if (Model.AttachedLogFileName != null)
{
<div class="bodyContent"> <span class="leftContent">Attached Log File(s): </span><span
class="rightContent">
@Html.ActionLink(Model.AttachedLogFileName, "Download", new { @file = Model.AttachedLogFileName })
</span> </div>
}
<div class="bodyContent">
<span class="leftContent">Import Files: </span>
<button name="submit" class="art-button" type="submit" value="Upload" style="width: 100px">
Upload</button>
<button name="submit" class="art-button" type="submit" value="Remove" style="width: 100px">
Remove</button>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Operator")
</span><span class="rightContent">
@Html.DropDownList("OperatorID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run ID")
</span><span class="rightContent">[Generated] </span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Start Date / Time")
</span><span class="rightContent">
@Html.EditorFor(model => model.RunDate)
@Html.DropDownList("Hour", ListHelpers.HourList())
:
@Html.DropDownList("Minute", ListHelpers.Minute15List())
@Html.DropDownList("AMPM", ListHelpers.AMPMList())
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("System")
</span><span class="rightContent">
@Html.DropDownList("SystemID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Type")
</span><span class="rightContent">
@Html.DropDownList("RunTypeID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Description")
</span><span class="rightContent">
@Html.TextAreaFor(model => model.RunDescription, new { style = "width: 600px; height=30px" })
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Assay Performance Issues")
</span><span class="rightContent">
@Html.DropDownList("AssayPerformanceIssues1", ListHelpers.YesNoList())
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Tests/Cycles Requested")
</span><span class="rightContent">
@Html.EditorFor(model => model.SPTestsRequested)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Tests/Cycles Completed")
</span><span class="rightContent">
@Html.EditorFor(model => model.SPTestsCompleted)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Status")
</span><span class="rightContent">
@Html.DropDownList("RunStatusID", String.Empty)
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Assay")
</span><span class="rightContent">
@Html.ListBoxFor(model => model.SelectedAssayIDs, new MultiSelectList(RunLog.Domain.Lists.GlobalList.AssayListItems(), "ID", "Name", Model.SelectedAssayIDs))
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Run Dates")
</span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
Click here to Select Run Dates</span>
<br />
<span id="RunDatesDisplayy" style="cursor: pointer; text-decoration: underline;">
</span></span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Error Code")
</span><span class="rightContent"><span id="ChildDialogLink" class="treeViewLink">Click
here to Select Error Codes</span>
<br />
<span id="ErrorCodeDisplay" style="cursor: pointer; text-decoration: underline;">@(Model.ErrorDescription)</span>
@Html.HiddenFor(model => model.ErrorDescription)
</span>
</div>
<div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 400px; height: 450px;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Run Dates:
</th>
<th>
Minimum Replicate:
</th>
</tr>
</thead>
<tbody>
@Html.EditorFor(x => x.RunDatesDisplay)
</tbody>
</table>
</div>
<div class="bodyContent">
@if (Model.TestExceptionDisplay != null && Model.TestExceptionDisplay.Count() > 0)
{
<span class="leftContent">
@Html.Label("Test Exceptions")
</span><span class="rightContent"><span id="TestExceptionChildDialogLink" class="treeViewLink">
Click here to View Test Exceptions</span>
<br />
<span id="TestExceptionDisplayy"></span></span>
}
</div>
<div id="testExceptiontreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Exception
</th>
<th>
Frequency
</th>
<th>
Comment
</th>
<th>
Replicate Range
</th>
</tr>
</thead>
<tbody>
@if (Model.TestExceptionDisplay != null)
{
@Html.EditorFor(x => x.TestExceptionDisplay)
}
</tbody>
</table>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Service Entry Request")
</span><span class="rightContent">
@Html.DropDownList("ServiceRequest", ListHelpers.YesNoList())
</span>
</div>
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Problem Description")
</span><span class="rightContent">
@Html.TextArea("ProblemDescription", new { style = "width: 600px; height: 30px" })
</span>
</div>
if (Model.UserRole == "Admin" || Model.UserRole == "SuperUser")
{
<div class="bodyContent">
<span class="leftContent">
@Html.Label("Active")
</span><span class="rightContent">
@Html.CheckBoxFor(model => model.Active)
</span>
</div>
}
else
{
@Html.HiddenFor(model => model.Active)
}
<p>
<input id="LogType" type="hidden" value="Run" />
<input id="ID" type="hidden" value="0" />
@if (Model.ExitCode == "1")
{
@Html.Hidden("ExitCode", Model.ExitCode)
}
else
{
<input id="ExitCode" type="hidden" value='0' />
}
</p>
@Html.HiddenFor(model => model.MaxReplicateId)
@Html.HiddenFor(model => model.MinReplicateId)
@Html.HiddenFor(model => model.OutputFileName)
@Html.HiddenFor(model => model.OutputStoredFileName)
@Html.HiddenFor(model => model.LoadListFileName)
@Html.HiddenFor(model => model.LoadListStoredFileName)
@Html.HiddenFor(model => model.AttachedLogFileName)
@Html.HiddenFor(model => model.AttachedMultipleLogFileNames)
@Html.HiddenFor(model => model.MinTestCompletionDate)
@Html.HiddenFor(model => model.MaxTestCompletionDate)
@Html.HiddenFor(model => model.UserRole)
@Html.HiddenFor(model => model.Active)
<div class="bodyContent">
<span class="leftContent"></span><span class="rightContent">
<button id="submit" name="submit" class="art-button" type="submit" value="Create">
Create</button></span>
</div>
}
</div>
</fieldset>
<script src="@Url.Content("~/Scripts/exitCode.js")" type="text/javascript"></script>
<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 800px; height: 450px;">
<div id="errorCodes">
@Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
</div>
<div id="inputReps" style="display: none;">
</div>
</div>
CONTROLLER ACTION
[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM,
string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates)
{
#region LogFile_UserConfrimation
if (submit == null)
{
if (runLogEntry.RunDatesDisplay != null || runLogEntry.RunDatesDisplay.Count() > 0)
{
//1. Get The selected/Checked Run Dates
//2. Locate The Parsed File(s)
//3. Parse the File Again and populate fields
List<string> fileNames = new List<string>();
if (runLogEntry.AttachedLogFileName != null || runLogEntry.AttachedLogFileName != string.Empty)
{
if (runLogEntry.AttachedLogFileName.Contains(".zip") || (runLogEntry.AttachedLogFileName.Contains(".ZIP")))
{
string[] splitData = runLogEntry.AttachedMultipleLogFileNames.Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries);
foreach (string s in splitData)
{
fileNames.Add(s);
}
}
else
{
fileNames.Add(runLogEntry.AttachedLogFileName);
}
}
foreach (var modelValue in ModelState.Values)
{
modelValue.Errors.Clear();
}
OutputResults or = FileImport.logfileOutput(fileNames, runLogEntry.RunDatesDisplay);
if (or != null && or.isValid == true)
{
ModelState.Remove("SPTestsCompleted");
ModelState.Remove("MinReplicateId");
ModelState.Remove("MaxReplicateId");
ModelState.Remove("OutputFileName");
ModelState.Remove("MinTestCompletionDate");
ModelState.Remove("MaxTestCompletionDate");
ModelState.Remove("SelectedAssayIDs");
ModelState.Remove("RunStatusID");
//ModelState.Remove("OutputStoredFileName");
runLogEntry.SPTestsCompleted = or.testsCompleted;
runLogEntry.MinReplicateId = or.minReplicateId;
runLogEntry.MaxReplicateId = or.maxReplicateId;
runLogEntry.MinTestCompletionDate = or.minCompletionDate;
runLogEntry.MaxTestCompletionDate = or.maxCompletionDate;
//runLogEntry.OutputFileName = file.ElementAt(1).FileName;
//runLogEntry.OutputStoredFileName = storedFileName;
//set run date
if (or.minimumDate.HasValue)
{
ModelState.Remove("Hour");
ModelState.Remove("Minute");
ModelState.Remove("AMPM");
ModelState.Remove("RunDate");
runLogEntry.RunDate = or.minimumDate.Value;
ViewBag.Hour = or.minimumDate.Value.ToString("%h");
ViewBag.Minute = or.minimumDate.Value.Minute;
ViewBag.AMPM = or.minimumDate.Value.ToString("tt");
}
if (or.testExceptions != null)
{
//ModelState.Remove("TestExceptionDisplay");
runLogEntry.TestExceptionDisplay = or.testExceptions;
//ViewBag.TestExceptions = or.testExceptions;
}
string moduleName = "";
//set module name
if (or.module != null)
{
ModelState.Remove("SystemID");
//string s = or.module.Trim('"', ' ', '\t');
switch (or.module.Trim('"', ' ', '\t'))
{
case "EP001":
runLogEntry.SystemID = 1;
moduleName = "EP001";
break;
case "EP002":
runLogEntry.SystemID = 2;
moduleName = "EP002";
break;
case "EP003":
runLogEntry.SystemID = 3;
moduleName = "EP003";
break;
case "EP004":
runLogEntry.SystemID = 4;
moduleName = "EP004";
break;
case "EP005":
runLogEntry.SystemID = 5;
moduleName = "EP005";
break;
case "EP006":
runLogEntry.SystemID = 6;
moduleName = "EP006";
break;
case "EP007":
runLogEntry.SystemID = 7;
moduleName = "EP007";
break;
}
ViewBag.SystemID = new SelectList(db.System1, "ID", "SystemFullName", runLogEntry.SystemID).OrderBy(l => l.Text);
}
//fetch corresponding assay ids
if (or.assayList != null && or.assayList.Count() > 0)
{
runLogEntry.SelectedAssayIDs = (from assays in db.Assay
where or.assayList.Contains(assays.AssayKey ?? 0)
select assays.ID).ToArray();
}
}
}
}
#endregion
// set runstatus if tc = tr
if (runLogEntry.SPTestsRequested != 0 && runLogEntry.SPTestsCompleted != 0 && runLogEntry.SPTestsRequested == runLogEntry.SPTestsCompleted)
{
runLogEntry.RunStatusID = 1;
ViewBag.RunStatusID = new SelectList(db.RunStatus, "ID", "RunStatusName", runLogEntry.RunStatusID).OrderBy(l => l.Text);
}
else
{
ViewBag.RunStatusID = new SelectList(db.RunStatus, "ID", "RunStatusName").OrderBy(l => l.Text);
}
//if (runLogEntry.SystemID == 0)
//{
// //viewbag.systemid = new selectlist((from asys in db.system1
// // where asys.active == true
// // select asys), "id", "systemfullname").orderby(l => l.text);
ViewBag.SystemID = new SelectList(db.System1, "ID", "SystemFullName", runLogEntry.SystemID).OrderBy(l => l.Text);
//}
ViewBag.OperatorID = new SelectList(db.User, "ID", "FullName").OrderBy(l => l.Text);
ViewBag.AssayID = new SelectList(db.Assay, "ID", "AssayFullName").OrderBy(l => l.Text);
//ViewBag.SystemID = new SelectList(db.System1, "ID", "SystemFullName").OrderBy(l => l.Text);
ViewBag.GroupID = new SelectList(db.Group1, "ID", "GroupName").OrderBy(l => l.Text);
ViewBag.LocationID = new SelectList(db.Location, "ID", "LocationName").OrderBy(l => l.Text);
ViewBag.RunTypeID = new SelectList(db.RunType, "ID", "RunTypeName").OrderBy(l => l.Text);
List<SelectListItem> ServiceRequest1 = new List<SelectListItem>();
ServiceRequest1.Add(new SelectListItem { Text = "No", Value = "N" });
ServiceRequest1.Add(new SelectListItem { Text = "Yes", Value = "Y" });
ViewData["ServiceRequest"] = (Object)ServiceRequest1;
return View(runLogEntry);
So in the above controller action, the #region LogFile_UserConfrimation is the confirmation step, When the users click the dialogbox, this region gets executed, its recieves the list of checkboxes from the dialogox box and simply I process those selections and update a few model properties and return the view
You are defeating the purpose of making the ajax call to the server by refreshing the page. You should just submit the form normally if the page refresh is acceptable. Otherwise, you should use the json returned from the server and add the results to the DOM using jQuery.
Edit:
Assuming the server is returning a partial view:
Client-side javascript:
Server-side controller action called via ajax:
Inside the original view, where #main is:
Then inside “_RunLogEntryPartialView” you include only the html that goes inside #main.
You were using json as the data type instead of html. Also you need to return a partial view using PartialView() in the controller action method instead of a regular view using View(). In addition, the reason you were not seeing any changes was most likely because you were using incorrect selector syntax when setting the html of main. You were using $(‘main’) instead of $(‘#main’).