Ajaxを介して生成されたアンカータグの中に部分的なビューをロードする方法

Question

私はドロップダウンリストを持つフォームを持っています。オプションを選択すると、ビュー内のリンクのリストを動的に追加するためのajax呼び出しを行います。リンクの1つをクリックすると、PostListSubCategory()メソッドによって返された部分的なビューで既存のページを更新したいと考えています。

現在、リンクの1つをクリックするとリダイレクトされ、新しいページに部分的な表示が表示されます。既存のページを更新するにはどうすればよいですか？

<script language="javascript" type="text/javascript"> 
function GetSubCategory(_categoryId) { 
    var procemessage = "<a='0'> Please wait...</a>"; 
    $("#SubCategoryID").html(procemessage).show(); 
    var url = "/Posts/GetSubCategoryById/"; 

    $.ajax({ 
     url: url, 
     data: { categoryid: _categoryId }, 
     cache: false, 
     type: "POST", 
     success: function (data) { 
      var markup = ""; 
      for (var x = 0; x < data.length; x++) { 
       var num = data[x].Text; 
       markup += "<a href='/posts/postlistsubcategory?subcategoryid=" + data[x].Text + "'>" + data[x].Text + "</a><br />"; 
       // markup += "<a href=" + Url.Action("postlistsubcategory", new { subcategoryid = num }); 
      } 
      $("#SubCategoryID").html(markup).show(); 
     }, 
     error: function (reponse) { 
      alert("error : " + reponse); 
     } 
    }); 
    $.ajax({ 
     url: "/Posts/PostListCategory", 
     data: { categoryid: _categoryId }, 
     cache: false, 
     type: "POST", 
     success: function (data) { 
      $("#postList").html(data).show();     
     }, 
     error: function (reponse) { 
      alert("error : " + reponse); 
     } 
    }); 
} 
</script> 
@using (Html.BeginForm()) 
{  
@Html.ListBoxFor(m => m.CategoryModel, new SelectList(Model.CategoryModel,  "CategoryId", "Name"), new { @id = "ddlcategory", @style = "width:200px;", @onchange = "javascript:GetSubCategory(this.value);" }) 
<br /> 
<br /> 
<div id="SubCategoryID" name="SubCategoryID" style="width: 200px"></div> 

<br /><br /> 

}

コントローラ

public PartialViewResult PostListSubCategory(string subcategoryid) 
    { 
     if (subcategoryid == null) 
     { 
      return PartialView(db.Posts.ToList()); 
     } 
     return PartialView("PostList", db.Posts.Include(i => i.SubCategory).Where(p => p.SubCategory.Name == subcategoryid)); 
    } 

Answer 1

あなたは現在dyamicallyので、それらをクリックすると、リダイレクトを行いますhref属性とのリンクを生成するには。イベントの委譲を使用してこれらのリンクのclickイベントを処理し、次にajaxを使用して既存のDOMを更新する必要があります。あなたのコード内のいくつかの他の悪い習慣が、私はあなたが以下の

@using (Html.BeginForm()) 
{ 
    // no need to override the id attribute and use Unobtrusive Javascript (don't pollute markup with behavior) 
    @Html.ListBoxFor(m => m.CategoryModel, new SelectList(Model.CategoryModel,"CategoryId", "Name")) 
} 
<div id="SubCategoryID"></div> // no point adding a name attribute 
<div id="postList"></div> 

var subcategories = $('#SubCategoryID'); 
$('#CategoryModel').change(function() { 
    var url = '@Url.Action("GetSubCategoryById", "Posts")'; // don't hard code url's 
    var category = $(this).val(); 
    subcategories.empty(); // clear any existing links 
    $.post(url, { categoryid: category }, function(data) { // this could be a GET? 
     $.each(data, function(index, item) { 
      subcategories.append($('<a></a>').text(item).attr('href','#').addClass('subcategory')); // see note below 
     }); 
    }); 
}); 

注意を使用ござい勧め：あなたのアヤックスは唯一のリンク（リンクに表示する値）を生成するために、一つの特性を必要とするので、その後、あなたのGetSubCategoryById()はすべきIEnumerable<string>は複雑なオブジェクトのコレクションではありません（現在のコードでは、決して使用しない他のデータが返されます）。オブジェクトのコレクションを返す必要がある場合は、.text(item.Text)を使用するように上記を変更します。上記のコードでは、返品する商品ごとに

<a href="#" class="subcategory">.....</a> 

が生成されます。そして、（VAR xに対して `そうJSONない、

var posts = $('#postList'); 
$('#SubCategoryID').on('click', '.subcategory', function() { 
    var url = '@Url.Action("postlistsubcategory", "posts")'; 
    var subcategory = $(this).text(); 
    posts.load(url, { subcategoryid: subcategory }); 
});