Getting Json Data from ajax in mvc and partial view is not called

Question

This question is related to my previous question, i want to display the details of product on the same page, for that i have used Ajax and partial View but the partial view is not rendering and only the Json Data is Updated in the div through Ajax, I dont want to display json data but only the product Desciption in text format the following code i have used, and the output is also shown, when i click on product1 it displays details regarding with product1 and when i click on product2 it shows details regarding with product2 and so on, In the controller method search i have called view, but that view is also not called. Please help to sort these problems. thanks

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 JsonResult Search(int data)
        {
            var query = dbentity.tbl_product.Where(c => c.ProductId == data);
            return Json(query,"Record Found");
            //return View("ClickUC", query);
        }
    }
}

Seach.cshtml

@model List<PartialView.Models.tbl_product>

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

Create.cshtml

@model List<PartialView.Models.tbl_product>
@{
    Layout = null;
}

<!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;
                alert(id);
                $.ajax({
                    url: "/Category/Search",
                    data: { data: id },
                    success: function (mydata) {
                        alert("success");
                        $('#link').empty().append(mydata);
                    },
                    error: function (mydata) { alert("error"); alert(mydata); },
                    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>

Output:

View Product Details : Product 1 Product2

[{"ProductId":2,"ProductName":"Product 2","ProductDesc":"Description 2","EntityState":2,"EntityKey":{"EntitySetName":"tbl_product","EntityContainerName":"dbEntities","EntityKeyValues":[{"Key":"ProductId","Value":2}],"IsTemporary":false}}]

Community · Accepted Answer · 2017-05-23 12:05:05Z

0

It's unclear why you defined the Search.cshtml partial when you controller action returns JSON. This partial will never be used. You could delete it.

Also since the id is unique I would recommend you modify your code to return a single result (.First() instead of .Where() which returns a collection):

public ActionResult Search(int data)
{
    var query = dbentity.tbl_product.First(c => c.ProductId == data);
    return Json(query);
}

and then in your success callback:

success: function (mydata) {
    alert("success");
    $('#link').html(mydata.ProductDesc);
},

This will display the ProductDesc property in the <div>. You also have access to all other properties as well. For example mydata.ProductId or mydata.ProductName.

There's also another problem with your code. It's the fact that ids in HTML cannot start with a number. Here you defined a link:

<a class="msg" href="#" id="@item.ProductId">@item.ProductName</a>

but the id is wrong as it cannot start with a number. I would recommend you using an HTML5 data-* attribute instead:

<a class="msg" href="#" data-id="@item.ProductId">@item.ProductName</a>

and in the .click javascript handler you could retrieve it like this in order to pass it to the AJAX call:

var id = $(this).data('id');

The alternative approach using a partial view instead of JSON is what I already showed you in this answer.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Nov 24, 2013 at 11:10

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

6 Comments

user3026519 Over a year ago

I have added this code $('#link').html(mydata.ProductDesc); but it returns nothing in the div neither the json, only alert(success) is executed

Darin Dimitrov Over a year ago

Did you also change your Search controller action to use dbentity.tbl_product.First(c => c.ProductId == data); instead of dbentity.tbl_product.Where(c => c.ProductId == data); as you had in initially? Please look more carefully at how the Search controller action is defined in my answer.

Darin Dimitrov Over a year ago

No, they are accessible without any problem. The Search controller action returns them as JSON result and you could access them all. I ask you once again: Did you replace .Where(...) with .First(...)?

user3026519 Over a year ago

Thanks Darin... It now works but i want to ask if this method is efficient or we can do it with partial view also. So that i can refresh partial view every time....

user3026519 Over a year ago

One point more, if i want to display the details of Product 1 by default when my view load,how it can be achieved.

|

Collectives™ on Stack Overflow

Getting Json Data from ajax in mvc and partial view is not called

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related