Partial View not rendered on the same Page in asp.net mvc

Question

I want to display the details of particular record on same page, user can choose the product from the list of Product name and as soon as user clicks on the links the details of the specific product should display on the other side of the page i.e. othe div. I tried it by creating partial View and Ajax but the details are not displayed on the separate page a new blank page is opened with the name of Partialview and the records are displayed there, but i want details on the same page.ProductName are comming from database, first time the page loads it must contains the details of first record by default, that is working OK. Please try to solve this problem. Thanks

HomeController.cs

public class HomeComtroller:Controller
{
dbProductEntity Productdbentity=new dbProductEntity();

public ActionResult ProductDetails(int id)
{
var query=Productdbentity.tbl_product.First(c=>c.ProductId==id);
return PartialView("PartialView",query);
}

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

PartialView.cshtml

@model MvcProject.Models.tbl_product

<label> @Model.ProductName </label>
<label> @Model.ProductDesc </label>

Product Page

@model List<MvcProject.Models.tbl_product>

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$(div.product a").click(function(e){
var url=this.ref;
$get(url,{},function(data) {
$('#product-detail').html(data);
});
});
});
</script>
</head>

<body>
<div class="product">
<ul class="list">
@foreach(var item in Model)
{
<li><a href="@Url.Action("ProductDetail","Home",new {id=item.ProductId})">
@item.ProductName</a></li>
}
</ul>

<div class="product-detail">
@{Html.RendererPartial("PartialView",Model.FirstOrDefault());}
</div>
</div>
</body>
</html>

Darin Dimitrov · Accepted Answer · 2013-11-23 15:59:20Z

1

You should cancel the default action of the anchor by returning false from your .click event handler:

$(document).ready(function() {
    $(div.product a").click(function(e) {
        var url=this.ref;
        $get(url,{},function(data) {
            $('#product-detail').html(data);
        });
    });
    return false; // <-- That's the important bit you were missing
});

If you do not return false from the .click handler, the browser will simply follow the linking to which your anchor is pointing stopping any javascript execution you might have started. Returning false ensures that the browser will not redirect away from the current page, leaving you the possibility to execute an AJAX request and update the current view.

answered Nov 23, 2013 at 15:59

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

5 Comments

user2802591 Over a year ago

Thanks for you answer but it did not solve that issue, it is still redirecting to /Home/PartialView/2 when i click on the link to display product details....

Darin Dimitrov Over a year ago

Make sure that you have included jQuery.js in your page before this script. Also check for some javascript errors in the console of your web browser.

user2802591 Over a year ago

Yes I have included jquery-1.4.1.min.js and jquery-1.5.1.js but i can't get from where this issue is arrising

Darin Dimitrov Over a year ago

Why did you include the 2 versions of jquery? That would produce a conflict. Include jQuery only once. Also, as I already mentioned in my previous comment, if you want to debug this, look at the console of your web browser where you might see potential errors with your code.

user2802591 Over a year ago

I have removed one library and checked but still it redirects to the other page i.e. partialview, but i want it to display on the same where product Name links are available, Is there issue in Url from where the Partial view is being called...

Snesh · Accepted Answer · 2013-11-25 07:14:41Z

0

I think you are missing "." after the "$" in first line in below code. And in second line, since "product-detail" is a class name so in jQuery selector use "." (not "#") before class name. Below is the corrected code:

$.get(url,{},function(data) {
$('.product-detail').html(data);
});

For more have a look at http://api.jquery.com/jQuery.get/

edited Nov 25, 2013 at 7:14

answered Nov 25, 2013 at 7:05

Snesh

5551 gold badge11 silver badges21 bronze badges

Comments

Imran · Accepted Answer · 2013-11-25 15:10:46Z

0

You have to stop the default behavior of click event on a link.

<script>
   $(function(){
   $("div.product a").click(function(e){
      e.preventDefault();
      var url=this.ref;
      $('.product-detail').load(url);
      });
   });
</script>

answered Nov 25, 2013 at 15:10

Imran

5047 silver badges15 bronze badges

Collectives™ on Stack Overflow

Partial View not rendered on the same Page in asp.net mvc

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related