Question

我相信我应该让你知道我是一名2年来尝试学习MVC3的VB.Net开发人员。这并不容易。我试图将现有的应用程序转换为MVC3并遇到问题。我的工作场所要求是带有MVC3和VB.Net的Visual Studio 2010。

我有一个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>

Controller - 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调用。但是，我在确定如何从表中的linkbutton获取搜索数据以作为搜索参数传入ajax / json代码时遇到问题

有什么建议吗？

以下是一些显示实际问题的屏幕截图：

初步观点：

View screen

使用PartialView查看 - 超链接位于“帐户”列中。

View with PartialView

单击超链接后。搜索文本框消失了。请注意，所有css也都缺失了。

Hyperlink clicked

Answer 1

以下是我的工作：

我将anchor属性的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用于超链接的href。这导致页面转到该视图，无论它是否为部分。

我的建议是使用jQuery更新表。当用户单击“搜索”按钮时，请执行Ajax请求并返回“部分视图”。

这有一个从View到Controller的非常基本的ajax调用。 Link

要了解有关如何更新该局部视图的更多信息，请访问以下链接。 Link

部分视图未正确更新

2 个答案: