Remark :
simple data in these controls and one control display the details of the users and other control displays product details. For this, I have created two models, User and Product
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
