单击 PartialView 中的按钮后重新加载主视图

Question

我有一个部分视图，用户可以在其中执行搜索，搜索结果显示在选择框中。在我的主视图中，我有一个部分应该在按下选择按钮后显示搜索结果。现在，当我单击选择按钮时，会将正确的信息加载到我的主视图的正确模型中，但主视图不会改变。当我单击刷新时，页面会正确更新。如何在插件视图中单击按钮时自动更新页面？

我的主视图中的部分 (Index.vbhtml) 在我的主应用程序中：

@Section CUInfo

 Credit Union Name: @Model.CUInfo.CUName

 end section

这是我的插件中的控制器方法：

Function ChangeCUInfo(strCUName As String) As ActionResult
        m_hostApp.CUInfo.CUName = strCUName
        m_hostApp.blnPluginRefreshButtonPressed = True
        Return View("Index", m_hostApp)
    End Function

我尝试在 hostApp 对象中设置一个布尔值，然后在我的主 razor 视图中调用此函数（如果为真）：

@code
     If Model.blnPluginRefreshButtonPressed = True Then


         @<script type="text/javascript">
              $(function () {
                  window.location.reload();
              });
         </script>


      End If

      Model.blnPluginRefreshButtonPressed = False
End Code

编辑：

点击选择按钮时调用的JS函数：

function loadCU(CUInfo) {
           strCU = CUInfo.split('|');
           strCUName = strCU[0];         
           $.ajax({
           type: "POST",
           url: "/CUContractNumberPlugin/ChangeCUInfo",
           data: { "strCUName": strCUName }
       });
       }

插件视图中使用的表单：

@Using (Html.BeginForm("ChangeCUInfo", "CUContractNumberPlugin"))
                 @<div id="LogoSigSearch" style="height:300px;width:500px;position:relative;">



    <span style="display:inline-block;height:20px;width:166px;position:absolute;top:35px;left:5px;">Credit Union Name</span>


    <br />
     @Html.TextBox("strCUName")
    <input type="submit" name="LogoSigSearch$ctl02" value="Search" id="LogoSigSearch_ctl02" tabindex="3" style="width:60px;position:absolute;top:5px;left:352px;" />






    <input name="LogoSigSearch$ctl05" type="button" onclick="javascript:clearSearch()" value="Clear" style="position:absolute;top:35px;left:352px;width:60px;" />

    <select size="4" name="LogoSigSearch$ctl06" id="LogoSigSearch_ctl06" tabindex="5" style="height:230px;width:342px;position:absolute;top:65px;left:5px;"></select>

    <input type="button" name="SelectCU" value="Select" onclick="javascript:loadCU(LogoSigSearch_ctl06.options[LogoSigSearch_ctl06.selectedIndex].value)"  tabindex="4" style="width:60px;position:absolute;top:65px;left:352px;" />
        </div>
    End Using

Answer 1

两个按钮都是表单的一部分吗？除非您将按钮附加到脚本或使其成为具有关联操作的表单的一部分，否则按钮不会调用操作。

使用局部视图来呈现查询结果，即使在主页加载时也是如此。这简化了您的开发。

添加一个 jQuery 事件处理程序 (jQuery.on()) 来监视主页上的按钮单击，或者如果按钮在局部视图中返回，只需在局部视图中使用准备就绪处理程序并附加一个 button.click () 事件，再次使用 jQuery。

jQuery 事件处理程序可以处理提交查询的值、发布到您的控制器以及显示结果。我有一些较旧的文章here，但它们仍然与您的问题相关，并展示了提交数据和获取部分数据。

您的客户端代码最终将如下所示：

 $("#your-button").click(function () {
    var fetchUrl = '@Url.Action("ActionName", "Controller")';

    $.post(fetchUrl, { searchParams: $("#your-search-box").val() })
        .success(function (data) {
          // replace the contents of the DIV with the results. 'data' 
          // here has whatever you sent back from your partial view
        })
        .error(function (data) { 
          // handle the error, use a DIV with some kind of alert message etc
        });

});

希望这会有所帮助。