Частичное представление не обновляется правильно

Question

Я полагаю, я должен сообщить вам, что я разработчик VB.Net 2 года, пытаясь изучить MVC3. Это было нелегко. Я пытаюсь преобразовать существующее приложение в MVC3 и у меня возникли проблемы. Мои требования к рабочему месту - Visual Studio 2010 с MVC3 и VB.Net.

У меня есть PartialView, который, когда я нажимаю гиперссылку на таблицу в PartialView, должен выполняться новый поиск и результаты поиска отображаются. Это работает. Однако PartialView визуализируется как полный вид.

У меня есть вид с текстовым полем поиска. AccountTable внизу покажет результаты поиска с использованием вышеуказанного PartialView. Это отлично работает для поиска, который начинается в текстовом поле. Когда я использую гиперссылки таблицы PartialView, чтобы начать поиск, начинаются проблемы.

Вид - Index.vbhtml:

<div style="width: 400px; margin-left: auto; margin-right: auto; margin-top: 20px;">
    <p>
    @Using (Ajax.BeginForm("search", "Home", New AjaxOptions With { _
        .HttpMethod = "GET", _
        .InsertionMode = InsertionMode.Replace, _
        .UpdateTargetId = "AccountTable"}))
        @<text>Account Number: </text>@Html.TextBox("SearchField")
    End Using
    </p>
</div>
<div id="AccountTable" class="searchPage" style="width: 400px; margin-left: auto;
    margin-right: auto; margin-top: 20px;"></div>

PartialView - Search.vbhtml:

@ModelType IEnumerable(Of SSN_MVC3_Again.Account)
@Code
Layout = ""
ViewData("Title") = "Search"
End Code

<div id="Accounts" style="width: 400px; margin-left: auto; margin-right: auto; margin-top: 50px;">
@If Model Is Nothing Then
    @<p style="margin-left: 15px;">
        No accounts were found.</p>
Else
    @<table>
        <tr>
            <td>
                Name: @ViewData("MainName")
            </td>
        </tr>
        <tr>
            <td>
                Social: @ViewData("MainSSN")
            </td>
        </tr>
    </table>
    @<table>
        <tr>
            <th>
                Account
            </th>
            <th>
                ABS Name
            </th>
            <th>
                SSN
            </th>
        </tr>
        @Code
    If Not IsNothing(Model) Then
        For Each item In Model
            @<tr>
                <td>
                    <a class="hlSearch" href= '@Url.Action("search", "Home", New With {.SearchField = item.AccountNumber})'>@item.AccountNumber
                    </a>
                </td>
                <td>
                    @item.Name
                </td>
                <td>
                    @item.SSN
                </td>
            </tr>
        Next
    End If
        End Code
    </table>
End If
</div>

Контроллер - HomeController.vb:

Function Index() As ActionResult
    Return View()
End Function

Function Search(ByVal SearchField As String) As ActionResult
    Dim acctList As New AccountList
    acctList = Repository.GetAccount(SearchField)
    If acctList IsNot Nothing Then
        ViewData.Add("MainName", acctList(0).Name)
        ViewData.Add("MainSSN", acctList(0).SSN)
        acctList.RemoveAt(0)
        Model = acctList
    Else
        Model = Nothing
    End If
    Return PartialView("Search", Model)
End Function

Я уже исследовал это, но не нашел ничего, чтобы помочь. Мой файл _Layouts.vbhtml уже содержит следующие сценарии:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

Я обнаружил, что некоторые люди предлагают добавить вызов ajax/json. Однако у меня возникают проблемы с выяснением того, как получить данные поиска из кнопки ссылки в таблице для передачи в качестве параметра поиска в код ajax/json.

Какие-либо предложения?

Вот несколько скриншотов, чтобы показать актуальную проблему:

Начальный вид:

Просмотр с PartialView - гиперссылки находятся в столбце Учетная запись.

После того, как гиперссылка нажата. Текстовое поле поиска исчезло. Обратите внимание, что все CSS также отсутствуют.

Answer 1

Вот что я сделал, чтобы это работало:

Я добавил атрибут name к тегу привязки, чтобы сопоставить данные, которые мне нужно было передать, и изменил href на #.

<a name="@item.AccountNumber" class="hlSearch" href="#">@item.AccountNumber</a>

Я добавил немного ajax на страницу. Атрибут name - это то, что я использую для передачи параметров поиска, чего я раньше не мог понять. Это было моим большим камнем преткновения.

$('.lbSearch').click(function() {
$.ajax({
    cache: false,
    type: "GET",
    url: "@(Url.Action("search", "Home"))",
    data: { SearchField: $(this).attr('name')},
    success: function (data) {
        $("#AccountTable").html(data);
    }
});
});

И это работает. Теперь парциальное обновление корректно обновляется.

Answer 2

Проблема в том, где вы используете @Url.Action для своей гиперссылки. Это приводит к тому, что страница переходит в это представление, независимо от того, является ли оно частичным или нет.

Мое предложение было бы обновить таблицу, используя вместо этого jQuery. Когда пользователь нажимает кнопку "Поиск", выполните запрос Ajax и верните частичное представление.

Это довольно простой вызов ajax из View в Controller. Ссылка на сайт

Чтобы узнать больше о том, как обновить этот частичный вид, вот еще одна ссылка. Ссылка на сайт