Display data in Partial View using jQuery Ajax in ASP.Net MVC

akhter

SOLVED CLOSED ACTIVE ANSWERED
User: akhter
Posted: on Oct 04, 2022 12:49 AM
Forum: ASP.Net MVC
Answer: 1
Views: 4654
Sample Code: Download

Data is not display in Partail View

Below is my Class RoomDetailsMV

public class RoomDetailsMV
{
    public int RoomId { get; set; }
    public string RoomNumber { get; set; }
    public string RoomDescriptionitem { get; set; }
    public int? RoomCapacity { get; set; }
    public string RoomImage { get; set; }
    public decimal? RoomPrice { get; set; }
    public string BookingStatus { get; set; }
    public string RoomTypeName { get; set; }
}

It has Partial View Below

@model IEnumerable<HotelSM.ViewModel.RoomDetailsMV>
<table style="width:100%">
    <thead>
        <tr>
            <th>Action:</th> 
            <th>Room Image</th>
            <th>Room No:</th>
            <th>Room Price:</th>
            <th>Booking Status:</th>
            <th>Room Type:</th>
            <th>Room Capacity:</th> 
            <th>Room Description:</th> 
        </tr>
    </thead> 
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td></td>
                <td><img src=@Url.Content("~/RoomImages/" + item.RoomImage)  width="30" height="30" class="img-responsive"/></td>
                <td>@item.RoomNumber</td>
                <td>@item.RoomPrice</td>
                <td>@item.BookingStatus</td>
                <td>@item.RoomCapacity</td>
                <td>@item.RoomDescriptionitem</td>
            </tr>
        }
    </tbody>
</table>

RoomControllor

public PartialViewResult GetAllRooms()
{
    IEnumerable<RoomDetailsMV> listOfRoomDetailViewModels =
        (from objRoom in objDB.HotelRooms
         join objBooking in objDB.BookingStatus on objRoom.BookIngStatusid equals objBooking.BookingStatusid
         join objRoomType in objDB.RoomTypes on objRoom.RoomTypeid equals objRoomType.RoomTypeid
         select new RoomDetailsMV()
         {
             RoomNumber = objRoom.RoomNumber,
             RoomDescriptionitem = objRoom.RoomDescription,
             RoomCapacity = objRoom.RoomCapacity,
             RoomPrice = objRoom.RoomPrice,
             BookingStatus = objBooking.BookingStatus,
             RoomTypeName = objRoomType.RoomTypeName,
             RoomImage = objRoom.RoomImage,
             RoomId = objRoom.Roomid
         }).ToList();
 
 
    return PartialView("_RoomDetailPartial.cshtml", listOfRoomDetailViewModels);
}

Using index for redirecting on Partial View

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        LoadRoomDetails();
        $("#btnSave").click(function () {
            SaveRoomData();
        });
    });
     
    function LoadRoomDetails() {
        $.ajax({
            async: true,
            data: 'GET',
            dataType: 'HTML',
            contentType: false,
            processData: false,
            url: '/Room/GetAllRooms',
            success: function (data) {
                $("#divLoadRoomDetails").html(data);
         },
            error: function () {
 
                alert('There Is some problem to process your request.');
            }
        });
    }
 
<div style="margin-top: 70px"></div>
<div id="divLoadRoomDetails">
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

KasimA

0 3

Reply
ANSWER
User: KasimA
Replied: on Oct 04, 2022 04:26 AM
Report

akhter says:
        $.ajax({

            async: true,

            data: 'GET',

            dataType: 'HTML',

            contentType: false,

            processData: false,

            url: '/Room/GetAllRooms',

            success: function (data) {

                $("#divLoadRoomDetails").html(data);

         },

Ajax properties are wrong.

Set type to POST, data to {}, contentType to application/json; charset=utf-8 and dataType to html.

Check the below example.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NORTHWINDEntities entities = new NORTHWINDEntities();
        return View(from customer in entities.Customers.Take(10)
                    select customer);
    }

    [HttpPost]
    public ActionResult Details(string customerId)
    {
        NORTHWINDEntities entities = new NORTHWINDEntities();
        return PartialView("Details", entities.Customers.Find(customerId));
    }
}

View

Index

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>    
</head>
<body>
    <table id="CustomerGrid">
        <tr>
            <th>CustomerID</th>
            <th>Contact Name</th>
            <th>City</th>
            <th>Country</th>
            <th></th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr>
                <td>@customer.CustomerID</td>
                <td>@customer.ContactName</td>
                <td>@customer.City</td>
                <td>@customer.Country</td>
                <td><a class="details" href="javascript:;">View</a></td>
            </tr>
        }
    </table>
    <hr />
    <div id="dvDetails">
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#CustomerGrid .details").click(function () {
                var customerId = $(this).closest("tr").find("td").eq(0).html();
                $.ajax({
                    type: "POST",
                    url: "/Home/Details",
                    data: '{customerId: "' + customerId + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "html",
                    success: function (response) {
                        $('#dvDetails').html(response);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>

Details

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="top"><b>@Html.DisplayNameFor(model => model.Address):</b></td>
        <td>
            @Html.DisplayFor(model => model.Address)
            <br />
            @Html.DisplayFor(model => model.City),
            @Html.DisplayFor(model => model.PostalCode)
            <br />
            @Html.DisplayFor(model => model.Country)
        </td>
    </tr>
</table>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display data in Partial View using jQuery Ajax in ASP.Net MVC

Company

Explore

Follow us

Contact Us