[RESOLVED]Partial View not displaying current data after the data was updated

I created a webgrid in my main view. I put an Edit button on each row that will call a partial view to show editable fields for that record. But when I run my solution to test I will edit a record then navigate back to my main view and the grid shows the
updated data but when I click Edit again it shows the data it originally was not the data I updated with. I posted my views and controllers. What am I missing?

Main View

@{
ViewBag.Title = "Project";
}

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>

<h2>Project</h2>

<div id="test">
@{
var grid = new WebGrid(Model);
}
@grid.GetHtml(tableStyle: "grid",
selectedRowStyle: "selected",
columns: grid.Columns(
grid.Column("Edit", format: @<text><input id="button" type="submit" value="Edit" onclick="myFunction(@item.ProjectId)"></text>),
grid.Column("ProjectName", "Project"),
grid.Column("Address", "Address"),
grid.Column("City", "City"),
grid.Column("State", "State"),
grid.Column("Zip", "Zip")))
</div>

<div id="projectDetails" style="text-align:center">
</div>

<script>
function success(data) {
$("#projectDetails").html(data);
myFunction();
}

function myFunction(id) {
$.ajax({
url: ‘/Setup/ProjectEdit’,
type: ‘GET’,
data: { projectid: id },
datatype: ‘html’,
success: function (data) {
success(data);
}
});

function success(data) {
$(‘#projectDetails’).html(data);
}
}

</script>

Partial View

@model FS2.Models.Project

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>

@using (Ajax.BeginForm("ProjectEdit", "Setup", new AjaxOptions { UpdateTargetId = "result" }))
//@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>Project</h4>
<div id="result"></div>
<hr />
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.ProjectId)

<div class="form-group">
@Html.LabelFor(model => model.ProjectName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ProjectName)
@Html.ValidationMessageFor(model => model.ProjectName)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Address, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Address)
@Html.ValidationMessageFor(model => model.Address)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.City, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.City)
@Html.ValidationMessageFor(model => model.City)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.State, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.State)
@Html.ValidationMessageFor(model => model.State)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Zip, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Zip)
@Html.ValidationMessageFor(model => model.Zip)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Phone, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Phone)
@Html.ValidationMessageFor(model => model.Phone)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.UpdatedBy, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.UpdatedBy)
@Html.ValidationMessageFor(model => model.UpdatedBy)
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.UpdatedDt, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.UpdatedDt)
@Html.ValidationMessageFor(model => model.UpdatedDt)
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Controllers

public ActionResult ProjectCreate()
{
return View(new ProjectModel());
}

[HttpPost]
public ActionResult ProjectCreate(ProjectModel pjmodel)
{

try
{
Project pj = new Project();

pj.ProjectName = pjmodel.ProjectName;
pj.Address = pjmodel.Address;
pj.City = pjmodel.City;
// pj.State = pjmodel.State;
pj.Zip = pjmodel.Zip;

_db.Projects.Add(pj);
_db.SaveChanges();

return RedirectToAction("Index");
}

catch
{
return RedirectToAction("Index");
}
}

public ActionResult ProjectEdit(int? projectid = null)
{
var model = _db.Projects.Where(e => e.ProjectId == projectid).Single();
return PartialView(model);
}

[HttpPost]
public ActionResult ProjectEdit(int projectid, FormCollection collection)
{
Project coll = _db.Projects.Where(e => e.ProjectId == projectid).Select(e => e).Single();
UpdateModel(coll);
_db.SaveChanges();
return Content("Success", "text/html");
}

1. based on markup, on click edit, two requests go to the server.
one because of onclick="myfunction" which is sends ajax request after my function submit button is doing another request.
2. Whenever you attaching tha ajax response html to the div you clear the existing html

Ok but I am not sure from what you are saying what I need to change in my code or how it should be written differently. 

NEG1934

function success(data) {
$(‘#projectDetails’).html(data);
}

clear content before adding div

 function success(data) {
        $("#projectDetails").empty();
        $('#projectDetails').html(data);
    }

NEG1934

grid.Column("Edit", format: @<text><input id="button" type="submit" value="Edit" onclick="myFunction(@item.ProjectId)"></text>),

use button instead of submit. because you are attaching ajax call explicitly

grid.Column("Edit", format: @<text><input id="button" type="button" value="Edit" onclick="myFunction(@item.ProjectId)"></text>)

I added those two items you mentioned above but it does still shows the old data. Any other suggestions?

Debug the retrieving action if it is giving the latest data. check the database after you do the save in edit mode if the db having changes

Ok here is what is happening. When I first go to the main view and click on edit to one of the records it fires the ProjectEdit ActionResult. 

After I hit Save, go back to the main view, click Edit on that same record it does not fire that ProjectEdit ActionResult again even though it does fire the myFunction() javascript function. How can I force it to fire that ActionResult again? 

Also does db has the change made from edit/save

Yes it does. But it is probably not showing in my ProjectEdit partial page because that ActionResult is not firing again to requery the database. How can I ensure that it fires since I would think that should resolve the issue. 

Here is the answer. In the $ajax call needed to set this parameter. 

cache: false

Leave a Reply