Using ASP. NET AJAX and Bootstrap popup solutions

When I was working on the procurement system, I was able to make the page partially refreshed because of the UpdatePanel control using ASP. But there are still a lot of problems to use.

Here's a case where it's almost 5 hours before it's settled, though not perfect, but it should be enough.

Application background: In the procurement system, because one product can have multiple suppliers, the same supplier can have multiple products. So products and suppliers are many-to-many relationships.

On the product page, the user chooses a product and we hope he can select the supplier. For example, select "Deli paper" and then click "Manage Vendor" to eject the supplier page.

In fact, if the use of refresh technology, users choose "Manage the vendor" security, let the parent page refresh, the solution is very simple. The general solution is to use window.open () to pop up the sub-page,

Then, when the child page closes, the parent page is refreshed. This way, the user experience is very poor because the parent page is fully refreshed.

At first, I feel the problem is very simple, bootstrap have model template (see http://v3.bootcss.com/javascript/), the code is similar to the following

  <a href= "#" class= "btn btn-sm bg-green Btn-flat" data-toggle= "modal" data-target= ". Bs-example-modal-lg" > Associated suppliers &L T;/a>

When the user clicks on the associated vendor, a layer appears on the Product List page. (Note: Is the layer, so there is no parent-child page, for the local refresh), the code is similar to the following

  <asp:updatepanel id= "UpdatePanel5" runat= "Server" >                        <contenttemplate><div class= "Modal fade Bs-example-modal-lg "tabindex="-1 "role=" dialog "aria-labelledby=" Mylargemodallabel "aria-hidden=" true ">                <asp:linkbutton text= "Category A" Runat=server id= "C1"/> <asp:linkbutton               text= "Category B" Runat=server id= "C21"/>                             <asp:gridview runat= "Server" id= "prod" ></asp:gridview>                    <asp:button id= "Btn_connection_ Supply "  runat=" server "text=" Associated supplier "onclick=" Btn_connection_supply_click "/>                    </div>      </div >                         </ContentTemplate>                    </asp:UpdatePanel>

Pop the layer, put it in the UpdatePanel, in UpdatePanel, the left is the ASP. LinkButton Display the category name, the right is the GridView display classification results, the lower one button, click Manage Vendor,

It feels perfect. But the actual test, the problem came.

When the user clicks on the left category name, the White bullet box is the hour, the user does not have time to select the right list, the more troublesome is the white disappears, the background of the shadow that pops up, the entire page died there as if. Only to receive a re-

Refreshes the page.

When the problem arose, we began to find a solution. Home want, the user clicks the left LinkButton, because is the asynchronous postback, the simplest way, is when the postback returns, still lets the white supplier form display. Checked the bootstrap, found a function.

Bootstrap provides a show function that can display the call and let the popup display.

So, I called this method in LinkButton, and the code looks like this

     Scriptmanager.registerstartupscript (Button, typeof (LinkButton),                 "Init", "$ (". Pop "). Show (true);", true);

Strangely, traced back to the resolution, found that the client did not execute although the server was executed. I remember when I was doing the log system, this code was executed, and the only difference was:

In the purchasing system, I set UpdatePanel's childrenastriggers to "False" UpdateMode Set "Conditional", in order to not let the child refresh, the parent follows refresh.

See Bootstrap can not solve, only can solve by ScriptManager, Sys.WebForms.PageRequestManager provides a series of request client what cycle, see

Https://msdn.microsoft.com/zh-cn/library/bb311028.aspx

So, when I returned to Lnkbutton, I executed endrequest.

     var PRM = Sys.WebForms.PageRequestManager.getInstance ();             Prm.add_endrequest (function () {              $ (". Model"). Show (True)            

Then, this situation gets the result of the idea, the white page cannot be turned off. Normally, when the user clicks on "Confirm management vendor", the page should be closed and now shut down.

It seems that I would like to distinguish endrequest, the other way is: you should be able to determine the user-submitted button type. In fact, there is a problem is not resolved, if the GridView vendor paging, the same click on the previous page, the next page, this problem will also occur. There seems to be more and more problems.

var PRM = Sys.WebForms.PageRequestManager.getInstance ();             Prm.add_endrequest (function (send,arg) {              $ (". Model"). Show (True)            

At this time, I was exhausted, forget, do not, to eat.

Using ASP. NET AJAX and Bootstrap popup solutions