html データを部分ビューから $(data) に変換すると、期待していた jQuery オブジェクトが返されません。
console.log($(data))->[#document]
代わりにこれを返します：
console.log($(data))->[#text, <meta charset="utf-8">, #text, <meta name="viewport" content="width=device-width">, #text, <title></title>, #text, <link href="/css?v=EY1fW53lN3Ow8WxEYembf-Ji7ogVpt21gpjVWDy8x6c1" rel="stylesheet">, #text, <div>default</div>, #text, <div id="test-div">default</div>, #text, <script src="/jsv=k_VAvcysGBhwGVVEK9GAtPakb2vjMfaxz2PhpxPuN0I1"></script>, #text
]
データの生のコンソール ログを実行すると、次のように返されます。
console.log(data)->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="/css?v=EY1fW53lN3Ow8WxEYembf-Ji7ogVpt21gpjVWDy8x6c1" rel="stylesheet"/>
</head>
<body>
<div>default</div>
<div id="test-div">default</div>
<script src="/js?v=k_VAvcysGBhwGVVEK9GAtPakb2vjMfaxz2PhpxPuN0I1"></script>
</body>
</html>
質問 1:#test-divこのデータからどのように抽出できますか?
更新 1
これが私のコントローラーです：
public ActionResult Index(string pageName, string categorySlug, string itemSlug)
{
if (categorySlug != null)
{
var category = _db.Categories.SingleOrDefault(x => x.Slug == categorySlug);
if (category == null) return Redirect("/");
ViewBag.Category = category;
if (itemSlug != null && category.Items.SingleOrDefault(x => x.Slug == itemSlug) != null)
{
ViewBag.ItemSlug = itemSlug;
}
else if (itemSlug != null)
{
return Redirect("/i/" + categorySlug);
}
}
ViewBag.PageName = pageName;
return View();
}
これが私のルーティングです：
routes.MapRoute(
name: "Default",
url: "{pageName}/{categorySlug}/{itemSlug}",
defaults: new { controller = "Home", action = "Index", pageName = UrlParameter.Optional, categorySlug = UrlParameter.Optional, itemSlug = UrlParameter.Optional },
namespaces: new string[] { "ClothRent.Controllers" }
);
インデックス ビュー:
@{
ViewBag.Title = "";
Layout = "~/Views/Shared/_Layout.cshtml";
string pageName = ViewBag.PageName;
ClothRent.Models.Category c = ViewBag.Category;
}
@switch (pageName)
{
case "info":
Html.RenderPartial("_Info");
break;
case "i":
Html.RenderPartial("_Category", c);
break;
default:
<div>default</div>
<div id="test-div">default</div>
break;
}
_Category 部分ビュー:
@model ClothRent.Models.Category
@{
string zveri = "zveri";
string teli = "teli";
}
@switch (Model.Slug)
{
case "zveri":
@zveri
break;
case "pasaku-teli":
@Html.Partial("_Teli", Model);
break;
}
それはどのように機能しますか：
- URL からアクセスすると、適切な部分ビュー データ
/i/category/が返されます。上記の部分ビューを取得する方法を参照してください。/home/index - 次に、ユーザーが必要に応じて Web サイトの閲覧を続行しますが、ページをリロードする代わりに htmlPushState を実行したい場合は、特定のコントローラーに ajax 呼び出しを行い、次に表示するコンテンツに必要なデータを抽出します。
更新 2
質問 2: ajax 呼び出し専用の API を作成する必要がないように、ajax 呼び出しから返されたデータを JavaScript のみでレンダリングする方法はありますか?
アップデート 3
答えてくれてありがとう、将来的には専用の ajax 呼び出し用の API を作成する予定ですが、今のところ、Web サイトのバックエンドをマスターしていないため、JS を使用したソリューションを見つけました。