asp.net mvc ajaxを使用して動的に部分ビューを追加する

Question

私はASP.NETを初めて使用しています。メインビューにコンテンツを追加する際に問題があります。 HtmlBeginformでは、ボタンをクリックしてファイルをロードした後にファイルをアップロードします。メインビューの下に部分ビューを表示する必要があります。ajaxスクリプトを正しく呼び出す方法はわかりません。

私のメインビュー：私はメインビューに追加したい

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

ビュー：

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


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

はコントローラー：あなたのコメントを1として

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

を、あなたがしたいと思いますファイルをアップロードするために通常のフォームを送信した後で、インデックスビューが（再）ロードされた後に、ajax経由で部分的なビューコンテンツをロードします。これを達成するには、document readyイベントでajax呼び出しを行う必要があります。フォームの送信前後で同じページ/ビューが表示されるため、最初のGETリクエスト用にページがロードされているか、HTTPでリダイレクトされたGETリクエスト用にページがロードされているかに基づいて条件付きでajaxコールを行う必要がありますポストアクション。

Httpはステートレスなので、（HTTPのポストアクションで）送信されたフォームを正常に処理した後、GETアクションメソッドがRedirectメソッド呼び出しから呼び出されたかどうかを知る方法はありません。この問題に対処するためにTempDataを使用することができます。索引ビューにリダイレクトする前に、次のGET要求で使用できる一時データ・ディクショナリのフラグを設定します。

あなたGETアクションで今すぐ

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

、これを読んで、（あなたは1を持っている場合はビューモデルプロパティ）ViewBagを経由して表示し、それを渡す

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

さてビューで、このViewBag項目をチェックし、それが存在し、trueの値を持つ場合は、部分表示コンテンツを表示するdivをレンダリングします。 Url.Actionヘルパーメソッドを利用して、部分的なビューを返すアクションメソッドへの正しい相対パスを生成し、divタグのhtml5データ属性に保持して、あとでjavascriptでそれを使用してajax呼び出しを行うことができます。

これをインデックスビューに追加します。

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

ここで必要なのは、ajax呼び出しを行うjavascriptコードです。これを文書準備完了イベントで実行します。 jQueryロードメソッドを使用できます。

$(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); 

});