Частичные виды, перенаправленные на другой URL?

Question

Я пытаюсь построить проект с использованием MVC 4 и Razor. У меня проблемы с пониманием частичных просмотров. У меня есть список объектов моего домена, которые я перебираю и отображаю в окне списка (каждая строка является интерактивной). Я разделил это на основной вид и частичный вид, который делает объект домена прекрасным. Внутри моего частичного представления я хочу сделать каждый элемент кликабельным и после клика, я хочу создать новый частичный вид, отображающий детали объекта домена.

Вот что я

Мой главный вид выглядит как этот

<div class="panely"> 
    <div class="list-group"> 
     @{ Html.RenderPartial("DomainObjectsPartial");} 
     </div> 
</div> 

Мой частичный вид выглядит как этот

<div class="list"> 
    @foreach (var x in @Model) 
    { 
    <a href="@Html.Partial("DomainObjectPartial")" class="list-item"> 
     <em>@x.Name</em> 
    </a> 
    } 
</div> 

У меня есть мнение по имени DomainObjectPartial, который не имеет ничего, кроме маленький div с приветствием. Когда пользователь нажимает на объекте домена, я ожидаю, что частичное быть вынесен в главном окне, но вместо этого я получаю ошибку говоря

потенциально опасное значение Request.Path было обнаружено от клиента (<).

И когда я смотрю на мой URL, содержимое частичного вида содержатся в нем, как

http://localhost/<div>hello</div> 

Я не хочу быть перенаправлены на другой URL. Я просто хочу, чтобы частичный вид отображался под списком. Может ли кто-нибудь объяснить мне, что мне не хватает или не понимаю?

Answer 1

Я думаю, что вы хотите использовать AJAX:

<div class="list"> 
    @foreach (var x in Model) 
    { 
     <a href="@Url.Action("Index", "Items", new { id = x.Id })" class="ajax-link"> 
      <em>@x.Name</em> 
     </a> 
    } 
</div> 

, и тогда вы, очевидно, действие контроллера, который будет обрабатывать этот частичный:

public class ItemsController: Controller 
{ 
    public ActionResult Index(string id) 
    { 
     // go get the specific item from your database using the id and pass it to 
     // the partial view 
     var viewModel = ... 
     return Partialview("DomainObjectPartial", viewModel); 
    } 
} 

и последняя часть должна AJAXify этот якорь :

$(function() { 
    $('.ajax-link').on('click', function() { 
     // Send an AJAX call to the server endpoint pointed by the href attribute 
     // of the anchor and inject the results of this endpoint execution inside a 
     // DOM element with id="result" 
     $('#result').load(this.href); 

     // By returning false you are canceling the default action of the 
     // anchor click and prevent the browser to redirect to the url pointed 
     // by the href property. This would leave enough time for your AJAX request 
     // to execute and return the results. 
     return false; 
    }); 
}); 

и вам, очевидно, понадобится элемент DOM с id = "result" где-нибудь на y наша страница обслуживает результаты запроса AJAX:

<div id="result"></div>