MVC return Content without refreshing page

I have a view and a partial view. The idea is to have a webgrid in the main view then they can select to edit a record and it will display the partial view to edit that record. When a user edits a record in the partial view I would like to just show a message
that says "Success" display on that page. I had this working in a different project in MVC 4 but now in MVC 5 it is redirecting my "Success" message to a new page. 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");
}

Hi NEG1934,

Thanks for your post.

NEG1934

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>

According to your code, it seems that you show the message “Success” in a div (“projectDetails”) which is in main view, so it will show in main view. But you said it redirected to a new page, do you mean that it opened a new page?

Best Regards,

Fei Han

Yes it opens a completely blank white page except it says Success and that is it. 

I believe that your problem is here:

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);
}
});

As About Fei Han – MSFT says you are reloading on the partial. After that you are calling to myFunction() again without any id, you have a loop if I’m not wrong. You could add an alert on the data to see what are your receiving, moreover you’ll see how many
times go throught the function. Also you can try to put a breakpoint at /Setup/ProjectEdit. I hope this helps you.

I put an alert message  there and the id is only passed once and it is never null. So I am not sure still why my Successful message is displaying in a whole new page. Any other ideas?

I am still having issues with this. Any other reasons why my message would not just show up in my div instead of creating a whole new page??? Please help!!

Can anyone help me with this issue? Is it really that complex? Is their an alternative for doing this? I am sure I am not the only one trying to do something similar to this. 

Leave a Reply