网页未显示正确的信息

Question

问题

我有一个搜索结果页面，其中列出了搜索条件元素并允许用户单击一个元素来删除该搜索条件。

第一次单击某个条件元素将其删除时，一切正常。

但是，第二次删除条件元素时，第一个删除的元素又回来了。

示例

搜索条件：{topic: "abuse"}, {profession: "admin"}, {keywords: "animal"}

现在单击“主题”元素将其删除，结果页面现在显示{profession: "admin"}, {keywords: "animal"}

现在点击“关键字”将其删除，页面现在错误地显示{topic: "abuse"}, {profession: "admin"}

此时正确显示应该只有单个标签{profession: "admin"}

代码

SearchController.Results()

<HttpPost>
<NoCache>
Function Results(ByVal model As SearchCriteria) As ActionResult

    Dim resultsModel As SearchResultsModel = New SearchResultsModel
    Dim searchQuery As IQueryable(Of [Class]) = Nothing
    Dim searchResults As List(Of [Class]) = Nothing
    Dim categoryValueQuery As IQueryable(Of CourseCategoryValue) = Nothing
    Dim query As IQueryable(Of [Class]) = Nothing
    Dim queries As List(Of IQueryable(Of [Class])) = New List(Of IQueryable(Of [Class]))

    model = RemoveCriteria(model)
    model.RemovalCriteria = String.Empty

    resultsModel.Criteria = model
    Return View(resultsModel)
End Function

SearchController.RemoveCriteria()

<NonAction>
    Function RemoveCriteria(ByVal model As SearchCriteria) As SearchCriteria

        Dim result As SearchCriteria = ObjectMapper.Duplicate(model)

        If Not String.IsNullOrEmpty(result.RemovalCriteria) Then
            Select Case result.RemovalCriteria.ToLower.Trim
                Case "title"
                    result.Title = String.Empty

                Case "keywords"
                    result.Keywords = String.Empty

                Case "healthtopic"
                    result.HealthTopic = String.Empty

                Case "city"
                    result.City = String.Empty

                Case "profession"
                    result.Profession = String.Empty

            End Select
        End If

        Return result

    End Function

Results.vbhtml

@Imports System.Reflection
@ModelType SearchResultsModel

@Code
    ViewData("Title") = "Results"
    Dim properties As List(Of PropertyInfo) = Model.Criteria.GetType.GetProperties.ToList
    Dim names() As String = {"keywords", "healthtopic", "profession"}
End Code

<h2>Results</h2>

@If (Not Nothing Is Model) AndAlso (Not Nothing Is Model.Results) Then
    @<h3>Displaying @Model.Results.Count of @Model.ResultCount classes</h3>
End If
@Using Html.BeginForm("Results", "Search", Nothing, FormMethod.Post, New With {.id = "removalForm"})
    @Html.Hidden("RemovalCriteria", String.Empty, New With {.id = "removalCriteria"})
    @<div>
        <span style="font-weight: bold;">Search Criteria  </span>
        @For Each name As String In names
        Dim prop As PropertyInfo = (From p In properties Where p.Name.ToLower = name Select p).FirstOrDefault
        Dim value As Object = prop.GetValue(Model.Criteria)
        If Not Nothing Is value Then
            value = value.ToString
            If Not String.IsNullOrEmpty(value) Then
            @<span class="criteriaTag" title="click to remove" onclick="submitRemovalForm('@prop.Name');">@prop.Name<span class="criteriaValue">@value</span></span>
            End If
        End If
            @Html.Hidden(prop.Name, value)
    Next
    </div>
End Using
<script type="text/javascript">
    function submitRemovalForm(removeTag) {
        $('#removalCriteria').val(removeTag);
        $('#removalForm').submit();
    }
</script>

那么，对于为什么会发生这种情况有什么想法吗？

Answer 1

我将试探一下您的代码是如何工作的，如果正确，请认为我遇到了您的问题。似乎对于每个条件，您都在隐藏字段中输出它们。当您单击一个字段时，它会将该值添加到隐藏的 removeTag 字段，然后提交表单。提交时，它将从搜索查询中排除该字段。如果这是正确的，这就是发生的事情：

您没有删除实际表单中的属性隐藏输入。表单 HTML 标记可能类似于以下内容：

<form>
  <input type="hidden" name="RemovalCriteria" value=""/>
  <input type="hidden" name="topic" value="abuse"/>
  <input type="hidden" name="profession" value="admin"/>
  <input type="hidden" name="keywords" value="animal"/>
</form>

因此，当您提交时，您会在表单提交中得到类似以下内容：

{
    RemovalCriteria:  "abuse",
    topic: "abuse", 
    profession: "admin",
    keywords: "animal"
}

当您下一次点击“admin”标签上的删除时，您的表单提交将如下所示：

{
    RemovalCriteria:  "admin",
    topic: "abuse", 
    profession: "admin",
    keywords: "animal"
}

因此，滥用将被重新添加。为了防止以前删除的标签再次出现，您实际上还需要删除与其关联的隐藏输入：

<script type="text/javascript">
    function submitRemovalForm(removeTag) {
        $('#removalCriteria').val(removeTag);
        $('#removalForm').remove($("input[type='hidden'][name='" + removeTag + "']"));
        $('#removalForm').submit();
    }
</script>

点击删除主题标签后，您的表单标记应更改为以下内容：

<form>
  <input type="hidden" name="RemovalCriteria" value="abuse"/>
  <input type="hidden" name="profession" value="admin"/>
  <input type="hidden" name="keywords" value="animal"/>
</form>

至于这将如何影响您的搜索（缺少属性/标签组合），您可能需要解决，它可能没有任何影响。但这似乎就是为什么一个被删除的标签又回来了。