Ajax does not retrieves data in partial view in mvc

Question

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);
        }

    }

}

Display method get the id suppose if i click on the link whose id is 2 then Display method is getting that id and query retrieves the details of the item whose id is 2 but when the control in the ajax function goes into error block and if i print alert(mydata) it print [object Object] please give any suggestion.. — user3026519
– user3026519, Commented Nov 24, 2013 at 7:28
to return partial View with json: return View("PartialViewName",jsonData) — Mir Gulam Sarwar
– Mir Gulam Sarwar, Commented Nov 24, 2013 at 7:43
On this line return PartialView("ClicksUC", query); name of the partial view is ClicksUC. But you said before the name was ClicksUs.cshtml. I think it is misspelled. — Hossain Muctadir
– Hossain Muctadir, Commented Nov 24, 2013 at 8:02
Its ClicksUC.cshtml i think there is any error in ajax code, ecause the value is returned from the controller method properly, but the partial view is not updated, it does not show any record when i click on link.. — user3026519
– user3026519, Commented Nov 24, 2013 at 8:06

Darin Dimitrov · Accepted Answer · 2013-11-24 09:53:57Z

2

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.

answered Nov 24, 2013 at 9:53

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jim tollan Over a year ago

+1 darin, i was editing to add that, but you said it 1st (regarding singular table in view) ;)

jim tollan · Accepted Answer · 2013-11-24 09:58:02Z

0

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

edited Nov 24, 2013 at 9:58

answered Nov 24, 2013 at 9:46

jim tollan

22.5k4 gold badges53 silver badges64 bronze badges

1 Comment

jim tollan Over a year ago

correct :-) - firstordefault is what i'd meant- sunday morning maddness.. forgive!

Collectives™ on Stack Overflow

Ajax does not retrieves data in partial view in mvc

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related