ASP.NET MVC3 ajaxパーシャルビューリフレッシュ

Question

asp.net mvc3のdivのajax更新に関する問題に直面しています。

私はコンテンツ

<div id="post_comments"> 
    @{Html.RenderPartial("_RefreshComments", Model);} 
</div> 
<div id="commentForm"> 
@using (Ajax.BeginForm("Details", new { id = Model.Post.PostId }, new AjaxOptions 
      { 
       HttpMethod = "POST", 
       InsertionMode = InsertionMode.InsertAfter, 
       UpdateTargetId = "post_comments" 
      } 
     )) 
{ 
// form content goes here 
<p id="buttons"> 
    <input type="submit" value="@Strings.Save" /> 
</p> 
} 

とビューを持っているこれは私が、私は、スクリプトを次のようしているコントローラ

public ActionResult Details(int id, FormCollection form) 
{ 
    var model = new PostDetailsViewModel(UnitOfWork, id); 
    return PartialView("_RefreshComments", model); 

} 

は私のレイアウトCSHTMLに含まれてい私の部分図

@model Project.Models.Posts.PostDetailsViewModel 

@{ 
    foreach (var c in Model.ApprovedComments) 
    { 
     @Html.DisplayFor(x => c)   
    } 
} 

ある

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

とも

<appSettings> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 

それは実際に動作する、私はコメントを追加することですが、コントローラは、レイアウトのみに含まれていない、PartialViewを返します。私はASP.net MVC3 - Razor Views and PartialViews with Ajax Postbacksが見つかりましたが、そこから何も私を助けませんでした。

誰にもアイデアはありますか？

Answer 1

jquery ajaxを使用してアクションを呼び出し、コントローラから部分的なビューを返します。その後、返されたhtmlをjqueryを使ってコンテナにリロードします。

まず、リフレッシュボタンなどを追加して、ajaxイベントをトリガーすることができます。次に、以下のjavascriptを実行してください。

<div id="post_comments">  
    @{Html.RenderPartial("_RefreshComments", Model);}  
</div> 
<div id="commentForm"> 
    @using (Ajax.BeginForm("Details", new { id = Model.Post.PostId }, new AjaxOptions  
    { 
    HttpMethod = "POST", 
    InsertionMode = InsertionMode.InsertAfter, 
    UpdateTargetId = "post_comments" 
    } 
)) 
{ 
// form content goes here 
<p id="buttons"> 
    <input type="submit" value="@Strings.Save" /> 
    <input type="button" id="refreshButton" value="Refresh" />" 
</p> 
} 





$('#refreshButton').click(function(){ 
    $.ajax({ 
     url: 'controller/Details.aspx', 
     datatype: 'html', 
     success: function(data) { 
     $('#post_comments').empty().html(data); 
     } 
    }); 
}); 

明らかに、URLは、アクションへのルートにする必要がある：

はこのような何かを行います。それ以外は、これはあなたのために正常に動作するはずです。

Answer 2

使用法：

function onUploadComplete() 
    { 
     @Ajax.Update("targetId", helper => helper.Action("ActionName")) 
    } 

とコード：

/// <summary> 
    /// I'd rather stab myself in the eye with a fork than bothering with php ever again and living without extension methods 
    /// </summary> 
    /// <param name="helper">makes sense to make it available here. who likes dozens of new helper classes</param> 
    /// <param name="updateTargetId">simple enough</param> 
    /// <param name="actionUrlFactory">resharper will show if we're messing stuff up. hurray.</param> 
    /// <param name="isAsync">speaks for itself</param> 
    /// <param name="options">might as well reuse that one for callbacks</param> 
    /// <returns>generated code with compile time checks</returns> 
    public static IHtmlString Update(this AjaxHelper helper, string updateTargetId, Func<UrlHelper, string> actionUrlFactory, bool isAsync = true, AjaxOptions options = null) 
    { 
     var requestUrl = actionUrlFactory(new UrlHelper(helper.ViewContext.RequestContext)); 
     if (options == null) 
     { 
      options = new AjaxOptions() 
      { 
       AllowCache = false, 
       HttpMethod = "GET" 
      }; 
     } 

     string cache = options.AllowCache ? "true" : "false"; 
     string success = options.OnSuccess.Length > 0 ? ".done(" + options.OnSuccess + ")" : ""; 
     string fail = options.OnFailure.Length > 0 ? ".fail(" + options.OnFailure + ")" : ""; 
     string always = options.OnComplete.Length > 0 ? ".always(" + options.OnComplete + ")" : ""; 
     string isAsyncString = isAsync ? "true" : "false"; 

     // of course you can go way further here, but this is good enough for me. just sharing since i didn't find a nice solution here that doesnt involve writing js manually every time. 
     string js = string.Format(@" 
      $.ajax({{ 
       cache : {7}, 
       async : {6}, 
       url : '{0}', 
       type : '{1}' 
      }}) 
      .done(function(data){{ 
       $('#{5}').html(data); 
      }}); 
      {2} 
      {3} 
      {4} 
     ", requestUrl, options.HttpMethod, success, fail, always, updateTargetId, isAsyncString, cache); 

     return new HtmlString(js); 
    }