Reloading main view after button in PartialView is clicked

Question

I have a partial view that the user can preform a search in, and the search results are shown in a select box. In my main view I have a section that is supposed to show the search results after a select button is pressed. Right now when I click the select button is loads the correct information into the correct model for my main view, but the main view doesn't change. When I click refresh, the page updates correctly. How do I make the page update automatically when a button is clicked in the plugin view?

My section in the main view (Index.vbhtml) in my main app:

@Section CUInfo

 Credit Union Name: @Model.CUInfo.CUName

 end section

Here is my controller method in my Plugin:

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

I've tried to set a boolean value in the hostApp object and then in my main razor view call this function if it is true:

@code
     If Model.blnPluginRefreshButtonPressed = True Then


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


      End If

      Model.blnPluginRefreshButtonPressed = False
End Code

EDIT:

JS function called when the select button is clicked:

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

Form that is used in the plugin view:

@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

Do you want to reload the whole page or just the search results in the main view? Either case you can do this with jQuery by adding an event handler to the button click. — lopezbertoni, Jul 06 '12 at 14:30
@lopezbertoni: It doesn't really matter to me. I just want the search results to appear in the main view when the submit button is clicked. Would I put the jQuery in the plugin? If so, how do I have it pass that event to the main app? If it is in the main app, how do I have the plugin trigger the event? — gblock, Jul 06 '12 at 14:34
like @misterjames said "Use a partial view to render the results of the query, even on the main page load. This simplifies your development." that is key to achieve what you want. You can update the main view from the partial view using jQuery. — lopezbertoni, Jul 06 '12 at 19:55
You need to get away from telling the browser to reload itself if a button is pressed. You *don't want* to reload your whole page, you're missing out on the benefits of Mvc/jQuery/Ajax here. Look up `RenderPartial` and go the route of partial views, then implement the button click handler as I spec'd out below. — MisterJames, Jul 06 '12 at 21:52

score 0 · Answer 1 · answered Jul 06 '12 at 16:01

Are both buttons part of a form? A button won't invoke an action without you attaching it to script or making it part of a form with an associated action.

Use a partial view to render the results of the query, even on the main page load. This simplifies your development.

Add a jQuery event handler (jQuery.on()) to watch for the button click on your main page, or if the button is returned in the partial view, just use an on ready handler in your partial and attach a button.click() event, again using jQuery.

The jQuery event handler can take care of submitting the values of the query, posting to your controller, and displaying the results. I have a number of older articles here but they are still relevant to your question and demonstrate submitting data and fetching partials.

Your client-side code will end up looking something like this:

 $("#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
        });

});

Hope this helps some.

The select button and the select list are both in a form. When the button is clicked it calls a javascript function that parses the information from the select list and passes it to the controller action. That action then changes the info of the model imported from the host app. Then the controller of the plugin returns the `Index.vbhtml` of the host app. I am going to update the question with code from my plugin view. — gblock, Jul 06 '12 at 18:02
I have also changed the view that shows the CUName in the host app to a partial view of a CUInfoPlugin. — gblock, Jul 06 '12 at 18:07

Reloading main view after button in PartialView is clicked

1 Answers1