Partial view updating another partial view issues - asp.net

Question

I have a page which has a list of Students. The partial view which renders a list is called "StudentManager". The partial view which I use in a modal to create a new student is called "NewStudent".
I have a couple of issues going on with this controller code. For some reason, after I press submit on the "NewStudent" partial view, every time afterwards that I refresh the page a new student is there without me going in and pressing submit... This is a problem.
Also, I have searched similar topics here on stack and I cannot seem to understand why return PartialView("StudentManager",db.Students.ToList()); will not automatically refresh my "StudentManager" view.
This code is supposed to give me a list in one partial view, and another partial view is supposed to let me create a new list item and then tell the list partial view to update.
Controller:
public ViewResult Index()
{
return View();
}
public ActionResult StudentManager()
{
return PartialView(db.Students.ToList());
}
public ActionResult NewStudent()
{
return PartialView();
}
//
// POST:
[HttpPost]
public ActionResult NewStudent(Student student)
{
if (ModelState.IsValid)
{
db.Students.Add(student);
db.SaveChanges();
return RedirectToAction("Index");
}
return PartialView();
}
Index.cshtml:
#Html.Action("StudentManager", "StudentController")
<div class="modal modal-wide fade" id="myModal4" role="dialog">
<div class="modal-dialog">
#Html.Action("NewStudent", "StudentController")
</div>
</div>
Here is the "NewStudent.cshtml" view:
#model GunneryTracker.Models.Student
<fieldset>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<center>
<h4 class="modal-title">New Student</h4>
</center>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="clearfix"></div>
<div class="x_content">
<br />
<form class="form-horizontal form-label-left" >
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12">
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right:10px">Course</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("CourseID", null, "-- Select Course --", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CourseID, "", new { #class = "text-danger" })
</div>
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right:10px">Location</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("LocationID", null, "-- Select Location--", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.LocationID, "", new { #class = "text-danger" })
</div>
</div>
<div class="editor-label">
#Html.LabelFor(model => model.FName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FName)
#Html.ValidationMessageFor(model => model.FName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LName)
#Html.ValidationMessageFor(model => model.LName)
</div>
</div>
<br />
<br />
<div class="form-group">
<center>
<p>
<input type="submit" value="Create" />
</p>
</center>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</fieldset>
Pardon the slouchy html... The prettyfication isnt completed...

Answer 1

Answer to 2nd question(if I understood what you meant):
It's not that smart as you expected.
After POST better to send back JSON result or simple null if don't use Ajax.
I would suggest you after POST do return RedirectToAction("Index");
Then page auto refresh students list.
Or do your POST via $.ajax and on success update student list using jquery or js
here is how I'm usually do it for simple "admin page" forms.
public ActionResult Teams()
{
var list = _data.GetTeams(true);
return View(list);
}
public ActionResult TeamCreate()
{
var model = _data.GetTeamCRUDViewModel();
return PartialView("_TeamCreate",model);
}
[HttpPost]
public ActionResult TeamCreate(TeamCRUDViewModel model)
{
_data.SaveTeam(model);
return RedirectToAction("Teams");
}
But on customer UI I would recommended to use $.ajax post.
Update:
Ok I see your issue
#model Student
<fieldset>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<center>
<h4 class="modal-title">New Student</h4>
</center>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="clearfix"></div>
<div class="x_content">
<br />
#using (#Html.BeginForm("NewStudent", "Home", FormMethod.Post))
{
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12">
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right: 10px">Course</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("CourseID", null, "-- Select Course --", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CourseID, "", new { #class = "text-danger" })
</div>
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right: 10px">Location</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("LocationID", null, "-- Select Location--", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.LocationID, "", new { #class = "text-danger" })
</div>
</div>
<div class="editor-label">
#Html.LabelFor(model => model.FName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FName)
#Html.ValidationMessageFor(model => model.FName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LName)
#Html.ValidationMessageFor(model => model.LName)
</div>
</div>
<br/>
<br/>
<div class="form-group">
<center>
<p>
<input type="submit" value="Create"/>
</p>
</center>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
Also change
#Html.Action("StudentManager", "StudentController") to #Html.Action("StudentManager", "Student")
like if should be name of controller

Answer 2

There's a fundamental misunderstanding here about how things work. A client makes a request to a server and the server returns a response. The client, then, generally does something with that response. In the case of a web browser, it clears the current view in the tab/window, parses the response and renders it into that tab/window. There's actually a lot more that goes on, but I'm trying to keep it simplistic.
However, AJAX (or specifically the XMLHttpRequest object in JavaScript) is what you would call a thin client. It's like a little web browser within your web browser, only without all the bells and whistles. All it does is submit requests and deliver the response to a callback. That callback is a JavaScript function whose job is to do something with the response. If the goal is to replace some portion of HTML on the page, the JavaScript code in the callback must do that. It does not happen automatically.
It's also important to realize that a "partial view" is only a thing server-side. Whether MVC is returning a partial view, a normal view, or even a view composed from various partial views is all inconsequential. What the server returns to the client is just an HTML document. In the case of the client being a web browser, it then parses that HTML document and builds what's called the Document Object Model, or DOM. It then uses the DOM to "render" the page as formatted images and text.
Likewise, all an AJAX request returns is an HTML document, which is itself really just a text document with a mime type of "text/html" that informs the client that it should be treated as HTML. As I said, it's the job of the AJAX callback to do something with this response from the server, but the point here is that you can't just say "replace that partial with this HTML", because the concept of partials doesn't exist client side. All you have is a object graph (the DOM), and you must select something from the DOM and then insert the HTML into that.