Travis T Travis T - 1 month ago 7
ASP.NET (C#) Question

Partial view updating another partial view issues

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">&times;</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

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">&times;       </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

Comments