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()）以监视主页上的按钮单击，或者如果在部分视图中返回该按钮，只需使用部分中的on ready处理程序并附加按钮.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
        });

});

希望这会有所帮助。

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

1 个答案: