Ajax does not retrieves data in partial view in mv

2019-08-27 21:51发布

问题:

I my below code i am calling partial view with ajax but when i click on the link of product Name the description of that product is not retrieved through ajax and error of ajax executes. I am retrieving the details of items selected by user on the same page but it is not retrieved. Please give any suggestion where is the issue arising because i am new to MVC. thanks...

Create.cshtml

@model List<PartialView.Models.tbl_product>

<!DOCTYPE html>
<html>
<head>
    <title>Create</title>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.msg').click(function () {
                var id = this.id;
                $.ajax({
                    url: "/Category/Display",
                    data: { data: id },
                    success: function (mydata) {
                        $("#link").empty().append(mydata);
                    },
                    error: function (mydata) { alert("error"); },
                    type: "POST"
                });
                return false;
            });
        });
    </script>
</head>
<body>
@foreach (var item in Model)
{ 
<a class="msg" href="#" id="@item.ProductId">@item.ProductName</a>
}
<div id="link">
</div>
</body>
</html>

ClicksUs.cshtml (PartialView)

@model List<PartialView.Models.tbl_product>

@foreach(var items in Model)
{ 
    @items.ProductDesc
}

CategoryController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PartialView.Models;

namespace PartialView.Controllers
{
    public class CategoryController : Controller
    {
        dbEntities dbentity = new dbEntities();

        public ActionResult Create()
        {
            return View(dbentity.tbl_product.ToList());
        }

        public ActionResult Display(int data)
        {
            var query = dbentity.tbl_product.First(c => c.ProductId == data);
            return PartialView("ClicksUC", query);
        }

    }

}

回答1:

Your Details controller action selects a single element here (because you are calling .First()):

public ActionResult Display(int data)
{
    var query = dbentity.tbl_product.First(c => c.ProductId == data);
    return PartialView("ClicksUC", query);
}

So the type of the query variable is tbl_product and not List<tbl_product>.

On the other hand your partial's model is List<PartialView.Models.tbl_product> which is obviously wrong.

Your partial's model should be a single tbl_product:

@model PartialView.Models.tbl_product
@Model.ProductDesc

Oh and what others said about the typo in your partial view name.



回答2:

there are three issues in the code that you could address.

  • One is a typo (the partialview is called ClicksUS, NOT ClicksUC),
  • the other is related to the way you return the data
  • the third is that you use the type: "POST", you should change this to type: "GET".

try changing the code to:

public ActionResult Display(int data)
{
    // using First() would have caused you an error in the view if not found
    // still not perfect below, but a step closer 
    var query = dbentity.tbl_product.FirstOrDefault(c => c.ProductId == data);
    // You had ClicksUC, rather than ClicksUS
    return PartialView("ClicksUS", query);
}

I'd also strongly suggest that you create a ViewModel for your data, rather than passing the objects from the database as this will allow you to control exactly the data that should be viewed and how it should be formatted etc.

[edit] Also, as Darin says, based on a single row being retruned, you should change your partial view model type to:

@model PartialView.Models.tbl_product