Teilansicht Aktualisierung einer anderen Teilansicht Probleme

Question

Ich habe eine Seite, die eine Liste von Studenten hat. Die Teilansicht, die eine Liste darstellt, heißt "StudentManager". Die Teilansicht, die ich in einem Modal zum Erstellen eines neuen Schülers verwende, heißt "NewStudent".

Ich habe ein paar Probleme mit diesem Controller-Code. Aus irgendeinem Grund, nachdem ich Submit auf der Teilansicht "NewStudent" gedrückt habe, jedesmal nachdem ich die Seite aktualisiert habe, ist ein neuer Student da, ohne dass ich rein gehe und auf "Submit" drücke ... Das ist ein Problem.

Auch ich habe ähnliche Themen hier auf Stapel gesucht und ich kann nicht zu verstehen scheinen, warum PartialView zurückzugeben ("StudentManager", db.Students.ToList()); wird meine "StudentManager" -Ansicht nicht automatisch aktualisieren. Dieser Code soll mir eine Liste in einer Teilansicht geben, und eine andere Teilansicht soll mir erlauben, ein neues Listenelement zu erstellen und dann die Liste Teilansicht zu aktualisieren.

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> 

Hier ist die "NewStudent.cshtml" Ansicht:

@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 die slouchy html ... Die prettyfication ist nicht abgeschlossen ...

Answer 1

Beantworten Sie die 2. Frage (wenn ich verstanden habe, was Sie gemeint haben):

Es ist nicht so schlau, wie Sie erwartet haben. Nach POST besser zurück zu senden JSON Ergebnis oder einfach null, wenn nicht Ajax verwenden.

Ich würde vorschlagen, Sie nach dem POST tun return RedirectToAction("Index"); Dann Seite automatisch aktualisieren Studenten Liste.

Oder Ihre POST über $ Schnipsel und auf Erfolg Update Schüler Liste mit Jquery oder js

hier ist, wie ich bin in der Regel tut es für einfache „Admin-Seite“ Formen.

Aber auf Kunden-UI würde ich empfehlen, $ .ajax Post zu verwenden. Update: Ok ich sehe Ihr Problem

@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> 

Auch

@Html.Action("StudentManager", "StudentController") to @Html.Action("StudentManager", "Student") 

wie ändern, wenn der Name des Controllers

Answer 2

Es gibt ein grundlegendes Missverständnis hier darüber, wie die Dinge funktionieren sollte. Ein Client stellt eine Anfrage an einen Server und der Server gibt eine Antwort zurück. Der Client tut dann normalerweise etwas mit dieser Antwort. Im Fall eines Webbrowsers löscht er die aktuelle Ansicht in der Registerkarte/dem Fenster, analysiert die Antwort und rendert sie in diese Registerkarte/dieses Fenster. Es gibt tatsächlich viel mehr, aber ich versuche, es einfach zu halten.

Allerdings ist AJAX (oder speziell das Objekt XMLHttpRequest in JavaScript), was Sie einen Thin Client nennen würden. Es ist wie ein kleiner Webbrowser in Ihrem Webbrowser, nur ohne den ganzen Schnickschnack. Alles, was es tut, ist Anfragen zu übermitteln und die Antwort auf einen Rückruf zu liefern. Dieser Rückruf ist eine JavaScript-Funktion, deren Aufgabe es ist, etwas mit der Antwort zu tun. Wenn das Ziel darin besteht, einen Teil des HTML-Codes auf der Seite zu ersetzen, muss der JavaScript-Code im Callback dies tun. Es passiert nicht automatisch.

Es ist auch wichtig zu erkennen, dass eine "Teilansicht" nur eine Sache serverseitig ist. Ob MVC eine Teilansicht zurückgibt, eine normale Ansicht oder sogar eine Ansicht, die aus verschiedenen Teilansichten zusammengesetzt ist, ist alles belanglos. Was der Server zum Client zurückgibt, ist nur ein HTML-Dokument. Wenn der Client ein Webbrowser ist, analysiert er das HTML-Dokument und erstellt das so genannte Document Object Model (DOM). Dann verwendet es das DOM, um die Seite als formatierte Bilder und Texte zu "rendern".

Ebenso gibt eine AJAX-Anfrage ein HTML-Dokument zurück, das eigentlich nur ein Textdokument mit einem MIME-Typ "text/html" ist, das den Client darüber informiert, dass es als HTML behandelt werden soll. Wie gesagt, es ist die Aufgabe des AJAX-Callback, etwas mit dieser Antwort vom Server zu tun, aber der Punkt hier ist, dass Sie nicht einfach sagen können, "ersetzen Sie das teilweise mit diesem HTML", weil das Konzept der Partials dies nicht tut existieren Client-Seite. Alles, was Sie haben, ist ein Objektdiagramm (das DOM), und Sie müssen etwas aus dem DOM auswählen und dann das HTML in das DOM einfügen.