[RESOLVED]Partial Page Post but do not refresh Main Page

I have a page that has a Webgrid. Then for each row on my webgrid I have a button to edit the details that displays underneath the webgrid in a partial page called EditInventory. But when I submit changes on the partial page it redirects it to just the partial
page so it takes me away from my main page. All I really want to do is submit the changes to the database and then maybe display some message saying the it was saved but do not take the user away from the main page. 

Here is my main View.

@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="test">
@{
var grid = new WebGrid(Model);
}
@grid.GetHtml(tableStyle: "grid",
selectedRowStyle: "selected",
columns: grid.Columns(
grid.Column("Test2",format: @<text><input id="button" type="submit" value="Edit" onclick="myFunction(@item.ProjectInventoryID)"></text>),
grid.Column("AssetType", "Asset Type", style: "assettype"),
grid.Column("CheckedIn", "Checked In"),
grid.Column("SerialNumber", "Serial Number"),
grid.Column("Installer", "Installer"),
grid.Column("IssueDate", "Issue Date"),
grid.Column("InstallDate", "Install Date"),
grid.Column("CheckInDate", "Checked In Date"),
grid.Column("Size", "Size"),
grid.Column("PrevInstaller", "Previous Installer"),
grid.Column("ProjectName", "Project Name")))
</div>

<div id="inventoryDetails">

</div>

<script>
function myFunction(id) {
$.ajax({
url: ‘/Inventory/EditInventory’,
type: ‘GET’,
data: { projectinventoryid: id },
datatype: ‘html’,
success: function(data){
$(‘#inventoryDetails’).html(data);
}
});
}

</script>

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

Here is my partial view:

@model FS.Models.ProjectInventory

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
<legend>ProjectInventory</legend>

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

<div class="editor-label">
@Html.LabelFor(model => model.SerialNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.SerialNumber)
@Html.ValidationMessageFor(model => model.SerialNumber)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.AssetType)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AssetType)
@Html.ValidationMessageFor(model => model.AssetType)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Installer)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Installer)
@Html.ValidationMessageFor(model => model.Installer)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.IssueDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.IssueDate)
@Html.ValidationMessageFor(model => model.IssueDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.InstallDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.InstallDate)
@Html.ValidationMessageFor(model => model.InstallDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.CheckedIn)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CheckedIn)
@Html.ValidationMessageFor(model => model.CheckedIn)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.AuditFlag)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AuditFlag)
@Html.ValidationMessageFor(model => model.AuditFlag)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.CheckInDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CheckInDate)
@Html.ValidationMessageFor(model => model.CheckInDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Size)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Size)
@Html.ValidationMessageFor(model => model.Size)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.PrevInstaller)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PrevInstaller)
@Html.ValidationMessageFor(model => model.PrevInstaller)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ContainerID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ContainerID)
@Html.ValidationMessageFor(model => model.ContainerID)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ProjectId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProjectId)
@Html.ValidationMessageFor(model => model.ProjectId)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ProjectName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProjectName)
@Html.ValidationMessageFor(model => model.ProjectName)
</div>

<p>
<input id="button" type="submit" value="Save" />
<input id="button1" type="submit" value="Edit" onclick="myFunction2()">
</fieldset>
}

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

<script>
$(function myFunction2() {
$("button1").click(function () {
$(‘#myForm1′).ajaxSubmit();
});
});

</script>

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

Here is my Controllers:

public ActionResult Index()
{
return View(_db.ProjectInventories.ToList());
// return View(_db.ProjectInventories.ToList());
}

public ActionResult EditInventory(int? projectinventoryid = null)
{
if (projectinventoryid == null)
{
var model1 = _db.ProjectInventories.Where(e => e.ProjectInventoryID == 1).Single(); ;
return PartialView(model1);
}
var model = _db.ProjectInventories.Where(e => e.ProjectInventoryID == projectinventoryid).Single();
return PartialView(model);
}

[HttpPost]
public PartialViewResult EditInventory(int projectinventoryid, FormCollection collection)
{
ProjectInventory coll = _db.ProjectInventories.Where(e => e.ProjectInventoryID == projectinventoryid).Select(e => e).Single();

UpdateModel(coll);
_db.SaveChanges();
return PartialView();

}

the browser does not know anything about partials. if you post to a partial, the browser will just display the response (which is just the partial). the partial should (when successful)  respond with a redirect to the main page. then the browser will redisplay
the page, but the updated info should display.

you other option is to use ajax for the form post. then on a successful form post you hide the edit div, and do another ajax call to get the current grid data.

 

Ok so I tried to create an ajax form post but it is going to a new page with my return content of Success. I thought it should just display in my div with the data. What am I doing wrong?

@model FS.Models.ProjectInventory

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Ajax.BeginForm("EditInventory", "Inventory", new AjaxOptions { UpdateTargetId = "result" }))
{

@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
<legend>ProjectInventory</legend>
<div id="result"></div>
@Html.HiddenFor(model => model.ProjectInventoryID)

<div class="editor-label">
@Html.LabelFor(model => model.SerialNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.SerialNumber)
@Html.ValidationMessageFor(model => model.SerialNumber)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.AssetType)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AssetType)
@Html.ValidationMessageFor(model => model.AssetType)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Installer)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Installer)
@Html.ValidationMessageFor(model => model.Installer)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.IssueDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.IssueDate)
@Html.ValidationMessageFor(model => model.IssueDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.InstallDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.InstallDate)
@Html.ValidationMessageFor(model => model.InstallDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.CheckedIn)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CheckedIn)
@Html.ValidationMessageFor(model => model.CheckedIn)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.AuditFlag)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AuditFlag)
@Html.ValidationMessageFor(model => model.AuditFlag)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.CheckInDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CheckInDate)
@Html.ValidationMessageFor(model => model.CheckInDate)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Size)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Size)
@Html.ValidationMessageFor(model => model.Size)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.PrevInstaller)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PrevInstaller)
@Html.ValidationMessageFor(model => model.PrevInstaller)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ContainerID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ContainerID)
@Html.ValidationMessageFor(model => model.ContainerID)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ProjectId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProjectId)
@Html.ValidationMessageFor(model => model.ProjectId)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.ProjectName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProjectName)
@Html.ValidationMessageFor(model => model.ProjectName)
</div>

<p>
<input id="button" type="submit" value="Save" />
<input id="button1" type="submit" value="Edit" onclick="myFunction2()">
</fieldset>
}

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

<script>
$(function myFunction2() {
$("button1").click(function () {
$(‘#myForm1′).ajaxSubmit();
});
});

function myFunction(m) {
$.ajax({
url: ‘/Inventory/EditInventory’,
type: ‘POST’,
datatype: ‘html’,
success: function (data) {
$(‘#inventoryDetails’).html(data);
}
});
}

</script>

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

public ActionResult EditInventory(int? projectinventoryid = null, int? installer = null)
{
if (projectinventoryid == null)
{
var model1 = _db.ProjectInventories.Where(e => e.ProjectInventoryID == 1).Single(); ;
return PartialView(model1);
}

var model = _db.ProjectInventories.Where(e => e.ProjectInventoryID == projectinventoryid).Single();
return PartialView(model);
}

[HttpPost]
public ActionResult EditInventory(int projectinventoryid, FormCollection collection)
{
ProjectInventory coll = _db.ProjectInventories.Where(e => e.ProjectInventoryID == projectinventoryid).Select(e => e).Single();

UpdateModel(coll);
_db.SaveChanges();
return Content("Success", "text/html");

}


You need to include the Mvc ajax scripts. You just included validation only. Or just use jQuery for the form post

add a preventDefault to your button click event 

$("button1").click(function (e) {
e.preventDefault();
$('#myForm1').ajaxSubmit();
});
});

Great that worked perfectly. The last thing I am having trouble with on this page is when I click my Edit button on my Index View within the Webgrid it will show my partial page of EditInventory. But if I want to select a different record and click Edit
it does not refresh the partial view of EditInventory. Why does it not fire my function again?

Thanks for all the help on this form. I have everything figured out now. 

Leave a Reply