asp.net mvc hinzufügen Teilansicht dynamisch mit Ajax

Question

Ich bin neu in ASP.NET und ich habe ein Problem, einen Inhalt zu meiner Hauptansicht hinzufügen. In HtmlBeginform lade ich die Datei per Knopfdruck hoch und nach dem Laden der Datei muss ich eine Teilansicht unter meiner Hauptansicht anzeigen. Ich weiß nicht, wie man Ajax-Skript richtig aufruft.

Meine Hauptansicht:

@using prvniAplikace.Models; 
@using Chart.Mvc.ComplexChart; 
@using Chart.Mvc.Extensions; 

@{ 
    ViewBag.Title = "Index"; 
} 
@using (Html.BeginForm("LoadFile", "Home", FormMethod.Post, 
                new { enctype = "multipart/form-data" })) 
{ 
    <div class="form-group" align="left"> 
     <label for="exampleInputFile">Load File</label> 
     <input type="file" accept=".tcx" class="form-control-file" name="exampleInputFile" id="exampleInputFile" aria-describedby="fileHelp"> 
    </div> 

    <div class="form-group" align="left"> 
     <button class="btn btn-primary" type="submit" id="add" name="add" value="Add">Display</button> 
    </div> 
} 

@section Scripts { 
    <script type="text/javascript"> 

     $("#add").on('click', function() { 

      $.ajax({ 
       async: false, 
       url: '/Home/getContent' 
      }).success(function (partialView) { 

       $('#getContent').append(partialView); 

      }); 
     }); 

    </script> 
} 

View I auf eine Hauptansicht hinzufügen möchten:

@{ 
     ViewBag.Title = "getContent"; 
     Layout = null; 
    } 


    <h2>Obsah</h2> 
    <p>Odstavec</p> 
    <p>@DateTime.Now.ToString()</p> 

Controller:

namespace prvniAplikace.Controllers 
{ 
    public class HomeController : Controller 
    { 
     // GET: Home 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult getContent() 
     { 

      return PartialView("~/Views/Home/AjaxRequest.cshtml"); 
     } 

     [HttpPost] 
     public ActionResult LoadFile(HttpPostedFileBase exampleInputFile) 
     { 


      if (exampleInputFile.ContentLength > 0) 
      { 
       var fileName = Path.GetFileName(exampleInputFile.FileName); 
       var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName); 
       exampleInputFile.SaveAs(path); 

       string xmlFile = Server.MapPath(fileName); 

       XmlDocument doc = new XmlDocument(); 
       doc.Load(path); 

       XmlNodeList nodes = doc.GetElementsByTagName("HeartRateBpm"); 
       XmlNodeList nodes2 = doc.GetElementsByTagName("Time"); 

      } 
      return RedirectToAction("Index"); 
     } 



    } 
} 

Answer 1

Wie pro Ihren Kommentar, möchten Sie Laden Sie den Inhalt der Teilansicht über Ajax, nachdem die Indexansicht nach dem normalen Formular, das Sie zum Hochladen der Datei ausführen, neu geladen wird. Um dies zu erreichen, sollten Sie den Ajax-Aufruf im document ready-Ereignis durchführen. Da es sich um die gleiche Seite/Ansicht handelt, die der Benutzer vor und nach dem Senden des Formulars sieht, sollten Sie den Ajax-Aufruf abhängig davon, ob die Seite für Ihre erste GET-Anfrage oder für die vom Umleitungsruf in Ihrem http ausgegebene GET-Anfrage geladen wird, bedingt vornehmen Post-Aktion.

Da Http zustandslos ist, gibt es für die GET-Aktionsmethode keine Möglichkeit zu ermitteln, ob diese nach dem erfolgreichen Verarbeiten des übermittelten Formulars (in Ihrer http-Post-Aktion) vom Redirect-Methodenaufruf aufgerufen wurde. Sie können TempData verwenden, um dieses Problem zu beheben. Stellen Sie vor dem Umleiten in die Indexansicht ein Flag für das temporäre Datenwörterbuch ein, das in der nächsten GET-Anforderung verfügbar sein wird.

[HttpPost] 
public ActionResult LoadFile(HttpPostedFileBase exampleInputFile) 
{ 
    // your existing code here 
    TempData["Success"] = true; 
    return RedirectToAction("Index"); 
} 

Jetzt in Ihrem GET Aktion, lesen Sie diese und geben sie über ViewBag (oder ein View-Modell-Eigenschaft, wenn Sie eine haben) sehen

in der Ansicht

public ActionResult Index() 
{ 
    ViewBag.IsSuccess = TempData["Success"]; 
    return View(); 
} 

Nun überprüfen Sie diese ViewBag Artikel und Wenn es existiert und den Wert true hat, rendere das Div, in dem der Inhalt der Teilansicht angezeigt werden soll. Sie können die Hilfsmethode Url.Action nutzen, um den korrekten relativen Pfad zur Aktionsmethode zu generieren, die die Teilansicht zurückgibt und diese im html5-Datenattribut im div-Tag behält, damit wir sie später in Javascript verwenden können, um den Ajax aufzurufen.

Fügen Sie das also zu Ihrer Indexansicht hinzu.

@if (ViewBag.IsSuccess!=null && ViewBag.IsSuccess) 
{ 
    <div data-url="@Url.Action("getContent", "Home")" id="myPartial"> </div> 
} 

Jetzt alles, was Sie brauchen, ist der Javascript-Code, der den Ajax Anruf macht. Führen Sie das im document ready-Ereignis aus. Sie können die jQuery-Methode load verwenden.

$(function(){ 
    // Get the url from the data attribute of the div 
    var url = $("#myPartial").data("url"); 
    // Make the ajax call using load method 
    $("#myPartial").load(url); 

});