MVC4 : refreshing partial view on button click

Question

I'd like to do something simple. I've got a list of products (with a name attribute) with a "details" button next to each. When I click on the button, I want the details of the product to be displayed next to the list (unexpected, I know ^^).

What I've done so far:

Displayed the list of products - a name and button displayed for each product:

@foreach (var product in item.Value) {
        <div>id : @product.product.PRODUCT_ID , name : @product.product.PRODUCT_NAME @Html.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, null)</div> 
    }

The displaying of the details of a product in another page:

@model IEnumerable<MyService.PRODUCT>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.EPC_NUMBER)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PRODUCT_NAME)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MANUFACTURING_DATE)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.EPC_NUMBER)
        </td>      
        <td>
            @Html.DisplayFor(modelItem => item.PRODUCT_NAME)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MANUFACTURING_DATE)
        </td>
    </tr>
}
</table>

What I want to do now : ling the 2 in the same view. When I click on the details button, a function of my controller is called with the product.id as parameter then display the details of the product. How to do what I want ? Thanks !

score 3 · Accepted Answer · edited May 23 '17 at 12:16

Derbie it easy.

First you need to do a View or PartialView for the Details Section with a model of MyService.PRODUCT.

Change

@Html.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, null)

to

@Ajax.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, new AjaxOptions {UpdateTargetId = "myDisplayID"})

Add a new Div under the list of products

<div id="myDisplayID"></div>

The link will make an Ajax Call using the Jquery files that comes in the MVC box. It will go the the action Details of the ProductDetails controller , it returns a partial view already set and renders the return HTML into the Div tag specified.

You also might want to take a look at this: How to use Ajax.ActionLink?

Additionally you might need to add the below scripts:

<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

Ok, it's almost working : when I click on the "details" button, it loads a new page instead of updating the div content. How to solve it ? I've tried to include to my cshtml page but it didn't change anything. — Derbie, Jun 23 '13 at 17:37
I have edit my answer including the script that you need to reference on your page! — DJ., Jun 24 '13 at 15:12

score 0 · Answer 2 · answered Jun 23 '13 at 16:58

0

I think your best bet is to also make an actionresult for the items. (that will reload the data from the db) and then call it using ajax. (on the button click)

answered Jun 23 '13 at 16:58

Maximc

1,722
1
23
37

Just to be sure that I undestand. My function to recover the details of an item works that way : public ActionResult ProductDetails(int id) { var context = new MyEntitie(new Uri("http://localhost:12345/MyWS.svc/")); var prod = from product in context.PRODUCT where product.PRODUCT_ID == id select product; return PartialView("ProductDetails", prod.ToList()); }. Do I have to change it ? And how to call it using ajax ? (Newbie with all of this...) – Derbie Jun 23 '13 at 17:13

MVC4 : refreshing partial view on button click

2 Answers2