CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvcasp.net-mvc-4
user2802591
user2802591

Reputation: 71

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

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>

Upvotes: 1

Views: 2990

Answers (3)

Imran
Imran

Reputation: 504

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>

Upvotes: 0

Snesh
Snesh

Reputation: 555

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/

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039508

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.

Upvotes: 1

Related Questions