Server side ASP.net code causes a full postback from inside a jQueryUI modal dialog_问答_开发者

Server side ASP.net code causes a full postback from inside a jQueryUI modal dialog

开发者 https://www.devze.com 2023-02-17 06:31 出处：网络

I\'ve got an ASP.Net page name ListView.aspx that displays a list of records. It uses jQueryUI to display details of a single record modal dialog. The content of the modal dialog is another asp.net pa

I've got an ASP.Net page name ListView.aspx that displays a list of records. It uses jQueryUI to display details of a single record modal dialog. The content of the modal dialog is another asp.net page named DetailsView.aspx. It is displayed like this:

function DisplayDetails(promoID) {

            $("#promotionDetailsDialog").dialog({
                height: 400,
                width: 600,
                modal: true
            }).load("DetailsPage.aspx?ID=" + promoID);

            return false;
        }

The DetailsView page that is displayed in the dialog 开发者_如何转开发is simple.

<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
    </form>
</body>

The server side code in the DetailsView Button1_Click event handler make a simple database call. My problem is that after the button on the modal dialog post back, the browser redirects from the ListView to the DetailsView. Is there a way to prevent that?

The thing is that postback is simple post of the page. So here we have post to the DetailsPage.aspx, so naturally you get response from that page.

TheSuperTrump is right - the best solution is to execute database call via ajax. You can create a sipmle web service for that, which you can use later for similar issues, and apply WebMethod attribute to some Service method to call it from js via ajax.

[WebMethod(EnableSession = true)]
public string GetPromotionMessage(int employeeId)
{
    return String.Format("Congratulation! You're promoted {0}", Employee.GetEmployeeByID(employeeId).FullName);
}

and then call it in your client side js like that

ServiceNamespace.ServiceName.GetPromotionMessage(parseInt(employeeId), function (result) { ... }, function (exception) { alert(exception.get_message()); });

This attribute will allow you to use session variables in your method (probably you'll need this to access database - without the attribute an runtime exception will be raised while trying to access session)

This function

function (exception) { alert(exception.get_message()); }

will be called if an exeption will be rased in your service method even without try-catch block.

And the function function (result) { ... } will be called after you'll receive service method response. If your service method returns some more complicated data the result will contain json data with similar stucture to your service method return type. (It'll contain the public proprties accessible by the same name as on server. However there are some complications if the data is too Comlpex).

There is also a similar way to mark Page method with [WebMethod] attribute.

There is also simpler way to fix it by playing with asp:UpdatePanel and setting Button1 Click event as it's async post back trigger like that

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

  <ContentTemplate>
  ...
  </ContentTemplate>

  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
  </Triggers>

</asp:UpdatePanel>

it should suspend the full postback and reload just the part in section. !!!note: update panel requires ScriptManager Control on the page or on the master page, otherwise you'll get runtime exception.

if you'll provide some more code i can also show example of an ajax service webMethod call, but i guess you can google it easily.

but imho it is looks simple but update panels are often not the best solution. i would prefer to play with service/page webMethod calls.