MVC4: освежающий частичный вид при нажатии кнопки

Я хотел бы сделать что-то простое. У меня есть список продуктов (с атрибутом имени) с кнопкой «Сведения» рядом с каждым. Когда я нажимаю на кнопку, я хочу, чтобы детали продукта отображались рядом со списком (неожиданно, я знаю ^^).MVC4: освежающий частичный вид при нажатии кнопки

Что я сделал до сих пор:

Отображается список продуктов - имя и кнопка отображается для каждого продукта:

@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> 
    }

отображения деталей продукта на другой странице:

@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>

Что я хочу сделать сейчас: ling the 2 в том же виде. Когда я нажимаю на кнопку сведений, функция моего контроллера вызывается с параметром product.id, а затем отображает детали продукта. Как делать то, что я хочу? Благодаря !

источник

2013-06-23 Derbie

Дерби это легко.

Прежде всего вам нужно сделать представление или частичный просмотр для раздела сведений с помощью модели MyService.PRODUCT.

Изменить

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

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

Добавить новый Div под списком продуктов

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

Ссылка будет сделать Ajax вызова с использованием файлов Jquery, что приходит в поле MVC. Он перейдет к описанию действия контроллера ProductDetails, он возвращает уже установленное частичное представление и отображает обратный HTML в указанный тег Div.

Вы также можете захотеть взглянуть на это: How to use Ajax.ActionLink?

Кроме того, вы, возможно, потребуется добавить следующие сценарии:

<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>

источник

2013-06-23 17:14:05

Хорошо, он почти работает: когда я нажимаю кнопку «Детали», он загружает новую страницу вместо обновления содержимого div. Как его решить? Я попытался включить на мою страницу cshtml, но он не изменился что-нибудь. – Derbie

Я отредактировал свой ответ, включая скрипт, который вам нужно ссылаться на вашей странице! –

Я думаю, что ваш лучший выбор - также сделать actionresult для предметов. (который перезагрузит данные из db), а затем вызовет его с помощью ajax. (при нажатии кнопки)

источник

2013-06-23 16:58:55 Maximc

Просто, чтобы быть уверенным, что я undestand. Моя функция для восстановления деталей элемента работает так: public ActionResult ProductDetails (int id) { var context = new MyEntitie (новый Uri («http: // localhost: 12345/MyWS.svc /»)); var prod = из продукта в контексте.PRODUCT где product.PRODUCT_ID == id выбрать продукт; return PartialView («ProductDetails», prod.ToList()); }. Должен ли я изменить его? И как назвать это с помощью ajax? (Новичок со всем этим ...) – Derbie

Ваш контроллер выглядит отлично! –

MVC4: освежающий частичный вид при нажатии кнопки

ответ

Смежные вопросы