Client AJAX applications in SharePoint 2010-dialog box Display details page

The ASP.net ajax template is a brand new and compelling client technology that allows developers to quickly build Ajax-friendly interactive applications that are easy to maintain. Because the asp.net ajax template and SharePoint 2010 support the OData protocol, the combination of the two will be a powerful combination.

A large part of the look and feel of the Web 2.0 that SharePoint 2010 can bring to people is due to the use of its pop-up modal dialog box. To further enrich the AJAX application in the previous article, we hooked up an operation on each card and opened a dialog box to handle the card in more detail. In the previous article using the SharePoint 2010 modal dialog box, we learned how to open a remote page in a modal dialog box, and how to respond to a dialog box to determine or cancel an event. The modal dialog box in this article goes a step further and opens the dialog box based on local HTML content.

First, we add an edit icon to the index card that we did in the previous article. We will hook up the action on the Open modal dialog box:

1　<div　class="userStoryTitle">
2　　　　　{{　标题　}}
3　　　　　<span　class="userStoryButtons">
4　　　　　　　　　<a　href="#"　onclick="javascript:openDialog();　return　false;">
5　　　　　　　　　　　　　
6　　　　　　　　　</a>
7　　　　　</span>
8　</div>

In order to first test the effect of opening the dialog box, but also review the use of the Previous Learning Mode dialog box, we write the following Open dialog box code:

1　function　openDialog()　{
2　　　　　var　options　=　{
3　　　　　　　　　url:　"http://www.cnblogs.com/Lists/UserStories/DispForm.aspx?Id=1",
4　　　　　　　　　width:　800,
5　　　　　　　　　height:　600,
6　　　　　　　　　title:　"User　Story",
7　　　　　};
8　　　　　SP.UI.ModalDialog.showModalDialog(options);
9　}

Obviously the parameter IDs in hard-coded URLs are not best practices, and here is just a demonstration. The result looks like this:

This is a very useful technique that allows us to open a dialog box without leaving an existing SharePoint page so that users can browse to another page directly. However, here we want the information edited in our application to be in the browser's memory (storing data through asp.net ajax templates). The ShowModalDialog () function can support this scenario, but it is slightly more complex.