MVC 4 How to pass an object to partial view when list item is clicked?

Question

This is a controller

 public class ProductController : Controller
{
    //
    // GET: /Product/

    public ActionResult Index(int id = 0)
    {
        return View(DALCategory.GetCategoryList());
    }

    public PartialViewResult productPartial(int id)
    {
        if (id > 0)
        {
            return PartialView("_productPartial", DALProduct.GetProductListByCateDetail(id));
        }
        else
        {
            return PartialView("_productPartial", DALProduct.GetProductList());
        }


    }

This is code in index view

      @model IEnumerable<Model.Category>
        <h2>Products</h2>


        <table>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.name)
                </th>
            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.ActionLink(@item.name, "productPartial", new { id = item.id })
                    </td>
                </tr>
            }
        </table>
@Html.Partial(productPartial)

And this is code for partial view.

@model IEnumerable<Model.Product>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.SKU)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.product_name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.price)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.SKU)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.product_name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.price)
        </td>
        <td>
@*            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })*@
        </td>
    </tr>
}

</table>

So what I want to do is... when an item is clicked, it renders the partial with an new object. Yes, the partial view is only rendered on the same page. I have been doing so many things. Although I do not think it is such a hard problem, I am not really sure what I need to do for this...

Answer 1

Since you want to update a part of the page you will need to use ajax to accomplish that. You have two options there:

1. User @Ajax.ActionLink ( How can i load Partial view inside the view )

2. You can write your own jquery ajax request that invokes your controller method and returns the partial view.

Answer 2

It happened to me as well. I wanted the page to be partial and loaded on the same page but it kept forwarding me to other link. Make sure following points are taken care of:

1. You have included your jquery-1.6.2.js or whatever version of this file you have.

2. Also make you have included your jquery file you have created. Make sure the above one is included first.

3. If you have included these files in some section of your .cshtml section then make sure you render it in your _Layout.cshtml or other layout file you are using. For example you have included your file in head section of your index.cshtml like this

   @section head{ } then you have to render this section in _layout.cshtml with @RenderSection("head", required: false)

   1. what you can also do is Make sure that jQuery is not included twice and that you don't have some javascript errors. Look at your javascript console in the browser as well as the Network tab to ensure that all your scripts are included properly.

Good Luck!!!