Partial View is not updating correctly

Question

I believe I should let you know that I am a VB.Net developer of 2 years trying to learn MVC3. It has not been easy. I am attempting to convert an existing application into MVC3 and am having problems. My workplace requirements are Visual Studio 2010 with MVC3 and VB.Net.

I have a PartialView that, when I click a hyperlink on the table in the PartialView, a new search should take place and the search results displayed. This is working. However, the PartialView is being rendered as a full view.

I have a View with a Search textbox. The AccountTable at the bottom will show the results of the search using the above PartialView. This works fine for a search that is started in the textbox. It's when I use the PartialView's table's hyperlinks to start the search that the troubles begin.

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

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

The 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

I have already been researching this but haven't found anything to help. My _Layouts.vbhtml file already has the following scripts in it:

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

I had found some people suggesting adding an ajax/json call in. However, I am having problems figuring out how to get the search data from the linkbutton in the table to pass in as the search parameter into the ajax/json code.

Any suggestions?

Here are some screenshots to show the actual problem:

Initial View:

View screen

View with PartialView - The hyperlinks are in the Account column.

View with PartialView

After a hyperlink is clicked. The search textbox is gone. Notice that all css is also missing.

Hyperlink clicked

score 1 · Answer 1 · answered Aug 06 '14 at 19:48

Here is what I did to make it work:

I added the name attribute to the anchor tag to equal the data that I needed to pass in and changed the href to #.

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

I added some ajax to the page. The name attribute is what I am using to pass in the search parameters, which is what I couldn't figure out earlier. That was my big sticking point.

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

And it works. Now the partialview updates correctly.

score 0 · Answer 2 · edited May 23 '17 at 12:01

The issue is where you are using @Url.Action for your href of your hyperlink. This is causing the page to go to that View, whether it be a Partial or not.

My suggestion would be to update the table using jQuery instead. When the user clicks the Search button, do an Ajax request and return the Partial View.

This has a pretty basic ajax call from the View to the Controller. Link

To get more on how to update that Partial View, here is another link. Link

Partial View is not updating correctly

2 Answers2