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

Я считаю, что должен сообщить вам, что я разработчик 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 также отсутствуют.

Нажата гиперссылка


person Susan O    schedule 06.08.2014    source источник


Ответы (2)


Вот что я сделал, чтобы заставить его работать:

Я добавил атрибут 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);
    }
});
});

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

person Susan O    schedule 06.08.2014

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

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

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

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

person IyaTaisho    schedule 06.08.2014