jQueryAjaxを使用してASP.NETMVCに部分ビューを読み込む

この記事では、ASP.NETMVCの部分ビューとjQueryAJAXを介したそれらのロードについて説明します。これにはいくつかのシナリオが考えられます。さまざまなソースからの複数の部分ビューとデータを含むページがあると仮定します。したがって、AJAXを使用して各部分ビューを個別にロードできます。以前にロードできるコンポーネントはすべてのコンポーネントがロードされるまで遅延されないため、ユーザーエクスペリエンスが向上します。各コントロールが読み込まれるとすぐに、ユーザーは画面上でそれらを使用できるようになります。

この記事ではASP.NETMVC3を使用しましたが、MVC3、MVC4、MVC5のいずれを使用するかは関係ありません。メインビュー(ここではHomePage.cshtmlと呼ばれます)を作成し、表示される2つの部分ビュー(_ProductDetails.cstmlと_UserDetails.cshtml)を作成しました。そこで、Ajaxを介してこれらのコントロールを簡単にロードできることを示します。これにより、ユーザーにとってページがより直感的でシームレスになります。
これらのコントロールに簡単なデータを表示しています。1つのコントロールはユーザーの詳細を表示し、他のコントロールは製品の詳細を表示します。このために、ユーザーと製品の2つのモデルを作成しました。

また、HomeControllerでGetUserDetailsメソッドとGetProductDetailsメソッドの2つのメソッドを作成しました。GetUserDetailsはユーザーのリストを返し、GetProductDetailsは製品のリストを返します。

jQueryAJAXを介して各コントロールを簡単にロードできますが。このため、jQueryはビューのに含まれている必要があります。デフォルトでは、__ Layout.cshtmlに含まれています。これはページのマスターレイアウトとして機能しますが、ビューで使用していない場合は、jQueryファイルを具体的に含めてください。したがって、私のHomePage.cshtmlは次のようになります。

<body>  
<h1>First Partial View</h1>  
<div id="dvUserdetails" style="width: 50%%; height: 130px; display:none">  
</div>  
<h1>Second Partial View</h1>  
<div id="dvProductDetails" style="width: 50%; height: 130px; display:none">  
</div>  
</body>  

クライアント側のコードは次のとおりです。

<script type="text/javascript">  
$.ajax ({  
url: '/ Home/GetUserDetails',  
contentType: 'application/html; charset=utf-8',  
type: 'GET',  
dataType: 'html'  
})  
.success (function (result) {  
$('#dvUserdetails').html(result);  
})  
.error(function (xhr, status) {  
alert(status);  
})  
$.ajax ({  
url: '/ Home/GetProductDetails',  
contentType: 'application/html; charset=utf-8',  
type: 'GET' ,  
dataType: 'html'  
})  
.success (function (result) {  
$('#dvProductDetails').html(result);  
})  
.error(function (xhr, status) {  
alert(status) ;  
})  
</script>  

したがって、ここでは、各コントロールが個別にロードされていることがわかります。コントロールごとに、Controllerでメソッドを定義し、そのメソッドはAjaxを介して呼び出されます。ajax呼び出しから結果が正常に返されると、その成功イベントが発生します。ここでは、返されたHTMLをdivに設定して表示しています。

また、ここでは、必要に応じて、URL自体を介してパラメーターをコントローラーメソッドに簡単に渡すことができます。2つの部分ビューは、

製品部分ビュー(_ProductDetails.cshtml)は次のとおりです。

<body>  
<div>  
<table style="width: 100%%; height: 100%">  
<tr>  
<th>Product Name</th>  
<th>ManufacturedDate</th>  
<th>Price</th>  
<th>IsAvailable</th>  
</tr>  
@foreach (var item in Model)  
{  
<tr>  
<td> @item.Name</td>  
<td> @item.ManufacturedDate</td>  
<td> @item.Price</td>  
<td> @item.IsAvailable</td>  
</tr>  
}  
</table>  
</div>  
</body>  

また、ユーザーの部分ビュー(_UserDetails.cshtml)は次のようになります。
 

<body>  
<div>  
<table style="width: 100%; height: 100%%">  
<tr>  
<th>FirstName</th>  
<th>LastName</th>  
<th>DisplayName</th>  
<th>Age</th>  
<th>Profession</th>  
</tr>  
@foreach (var item in Model)  
{  
<tr>  
<td> @item.FirstName</td>  
<td> @item.LastName</td>  
<td> @item.DisplayName</td>  
<td> @item.Age</td>  
<td> @item.Profession</td>  
</tr>  
}  
</table>  
</div>  
</body>  

これで、ページが読み込まれると、個別に起動される2つのajax呼び出しが起動され、結果が返されると、コントロールが表示されます。その間、ユーザーに空白の画面が表示される場合があるため、ここでローダーイメージを表示し、結果が返され、それを非表示にすると、成功イベントでコントロールが表示されます。

アプリケーションを実行すると、次のようになります。

 

afterrunning.png


これらのコントロールは、AJAXを介して個別にロードされます。

リンク: https://www.c-sharpcorner.com/UploadFile/d551d3/how-to-load-partial-views-in-Asp-Net-mvc-using-jquery-ajax/

#jquery #aspdotnet 

What is GEEK

Buddha Community

jQueryAjaxを使用してASP.NETMVCに部分ビューを読み込む

jQueryAjaxを使用してASP.NETMVCに部分ビューを読み込む

この記事では、ASP.NETMVCの部分ビューとjQueryAJAXを介したそれらのロードについて説明します。これにはいくつかのシナリオが考えられます。さまざまなソースからの複数の部分ビューとデータを含むページがあると仮定します。したがって、AJAXを使用して各部分ビューを個別にロードできます。以前にロードできるコンポーネントはすべてのコンポーネントがロードされるまで遅延されないため、ユーザーエクスペリエンスが向上します。各コントロールが読み込まれるとすぐに、ユーザーは画面上でそれらを使用できるようになります。

この記事ではASP.NETMVC3を使用しましたが、MVC3、MVC4、MVC5のいずれを使用するかは関係ありません。メインビュー(ここではHomePage.cshtmlと呼ばれます)を作成し、表示される2つの部分ビュー(_ProductDetails.cstmlと_UserDetails.cshtml)を作成しました。そこで、Ajaxを介してこれらのコントロールを簡単にロードできることを示します。これにより、ユーザーにとってページがより直感的でシームレスになります。
これらのコントロールに簡単なデータを表示しています。1つのコントロールはユーザーの詳細を表示し、他のコントロールは製品の詳細を表示します。このために、ユーザーと製品の2つのモデルを作成しました。

また、HomeControllerでGetUserDetailsメソッドとGetProductDetailsメソッドの2つのメソッドを作成しました。GetUserDetailsはユーザーのリストを返し、GetProductDetailsは製品のリストを返します。

jQueryAJAXを介して各コントロールを簡単にロードできますが。このため、jQueryはビューのに含まれている必要があります。デフォルトでは、__ Layout.cshtmlに含まれています。これはページのマスターレイアウトとして機能しますが、ビューで使用していない場合は、jQueryファイルを具体的に含めてください。したがって、私のHomePage.cshtmlは次のようになります。

<body>  
<h1>First Partial View</h1>  
<div id="dvUserdetails" style="width: 50%%; height: 130px; display:none">  
</div>  
<h1>Second Partial View</h1>  
<div id="dvProductDetails" style="width: 50%; height: 130px; display:none">  
</div>  
</body>  

クライアント側のコードは次のとおりです。

<script type="text/javascript">  
$.ajax ({  
url: '/ Home/GetUserDetails',  
contentType: 'application/html; charset=utf-8',  
type: 'GET',  
dataType: 'html'  
})  
.success (function (result) {  
$('#dvUserdetails').html(result);  
})  
.error(function (xhr, status) {  
alert(status);  
})  
$.ajax ({  
url: '/ Home/GetProductDetails',  
contentType: 'application/html; charset=utf-8',  
type: 'GET' ,  
dataType: 'html'  
})  
.success (function (result) {  
$('#dvProductDetails').html(result);  
})  
.error(function (xhr, status) {  
alert(status) ;  
})  
</script>  

したがって、ここでは、各コントロールが個別にロードされていることがわかります。コントロールごとに、Controllerでメソッドを定義し、そのメソッドはAjaxを介して呼び出されます。ajax呼び出しから結果が正常に返されると、その成功イベントが発生します。ここでは、返されたHTMLをdivに設定して表示しています。

また、ここでは、必要に応じて、URL自体を介してパラメーターをコントローラーメソッドに簡単に渡すことができます。2つの部分ビューは、

製品部分ビュー(_ProductDetails.cshtml)は次のとおりです。

<body>  
<div>  
<table style="width: 100%%; height: 100%">  
<tr>  
<th>Product Name</th>  
<th>ManufacturedDate</th>  
<th>Price</th>  
<th>IsAvailable</th>  
</tr>  
@foreach (var item in Model)  
{  
<tr>  
<td> @item.Name</td>  
<td> @item.ManufacturedDate</td>  
<td> @item.Price</td>  
<td> @item.IsAvailable</td>  
</tr>  
}  
</table>  
</div>  
</body>  

また、ユーザーの部分ビュー(_UserDetails.cshtml)は次のようになります。
 

<body>  
<div>  
<table style="width: 100%; height: 100%%">  
<tr>  
<th>FirstName</th>  
<th>LastName</th>  
<th>DisplayName</th>  
<th>Age</th>  
<th>Profession</th>  
</tr>  
@foreach (var item in Model)  
{  
<tr>  
<td> @item.FirstName</td>  
<td> @item.LastName</td>  
<td> @item.DisplayName</td>  
<td> @item.Age</td>  
<td> @item.Profession</td>  
</tr>  
}  
</table>  
</div>  
</body>  

これで、ページが読み込まれると、個別に起動される2つのajax呼び出しが起動され、結果が返されると、コントロールが表示されます。その間、ユーザーに空白の画面が表示される場合があるため、ここでローダーイメージを表示し、結果が返され、それを非表示にすると、成功イベントでコントロールが表示されます。

アプリケーションを実行すると、次のようになります。

 

afterrunning.png


これらのコントロールは、AJAXを介して個別にロードされます。

リンク: https://www.c-sharpcorner.com/UploadFile/d551d3/how-to-load-partial-views-in-Asp-Net-mvc-using-jquery-ajax/

#jquery #aspdotnet