To Visual Basic version
This time we are going to create ourselves an edit control. We start with the markup, so open EditProducts.ascx. Make it look like this:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditProducts.ascx.cs" Inherits="SipidCode.Modules.Products.EditProducts" %>
<%@ Register TagPrefix="dnn" TagName="TextEditor" Src="~/controls/TextEditor.ascx"%>
<table width="650" border="0" summary="Edit Product Item">
<tr>
<td width="75">Name</td>
<td><asp:TextBox ID="Name" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Description</td>
<td><dnn:TextEditor ID="Description" runat="server" height="200" width="510" /></td>
</tr>
</table>
<p>
<asp:linkbutton cssclass="CommandButton" id="cmdUpdate" resourcekey="cmdUpdate" runat="server" borderstyle="none" text="Update" OnClick="cmdUpdate_Click"></asp:linkbutton>
<asp:linkbutton cssclass="CommandButton" id="cmdCancel" resourcekey="cmdCancel" runat="server" borderstyle="none" text="Cancel" causesvalidation="False" OnClick="cmdCancel_Click"></asp:linkbutton>
<asp:linkbutton cssclass="CommandButton" id="cmdDelete" resourcekey="cmdDelete" runat="server" borderstyle="none" text="Delete" causesvalidation="False" OnClick="cmdDelete_Click"></asp:linkbutton>
</p>
Open EditProducts.ascx.cs. In the region “Private Members” the class variable ItemId is declared. This is where we store the ID of the product item to edit.
Insert the following code into the empty Page_Load method (we deleted the method body in the previous part, remember?):
if ((Request.QueryString["ItemId"] != null))
{
ItemId = Int32.Parse(Request.QueryString["ItemId"]);
}
Now we have the product item ID in the ItemId variable, if supplied. If there was no ItemId parameter in the query string this means that we should create a new item instead of editing an existing one.
Add the following code:
if (!IsPostBack)
{
if (!Null.IsNull(ItemId))
{
cmdDelete.Attributes.Add("onClick", "javascript:return confirm('" + Localization.GetString("DeleteItem") + "');");
ProductsController dc = new ProductsController();
ProductsInfo itm = dc.GetProduct(ModuleId, ItemId);
if (itm != null)
{
Name.Text = itm.Name;
Description.Text = itm.Description;
}
else
{
Response.Redirect(Globals.NavigateURL(), true);
}
}
else
{
cmdDelete.Visible = false;
}
}
This only has to be done the first time the page is loaded so we wrap it in a check for IsPostBack. In the case when an ItemId is supplied we add some client script to get a confirmation when deleting an item. Then we fetch the product item with the current module ID and item ID as keys and populate the controls. If there is no matching item, something must be wrong. In that case we redirect the heck out of there, back to the view page.
When an ItemId is not supplied, this means we should create a new item. Just hide the Delete button.
Error handling is always a good thing, so wrap everything in Page_Load in a try-catch. The Page_Load method should now look something like this:
protected void Page_Load(object sender, System.EventArgs e)
{
try
{
if ((Request.QueryString["ItemId"] != null))
{
ItemId = Int32.Parse(Request.QueryString["ItemId"]);
}
if (!IsPostBack)
{
if (!Null.IsNull(ItemId))
{
cmdDelete.Attributes.Add("onClick", "javascript:return confirm('" + Localization.GetString("DeleteItem") + "');");
ProductsController dc = new ProductsController();
ProductsInfo itm = dc.GetProduct(ModuleId, ItemId);
if (itm != null)
{
Name.Text = itm.Name;
Description.Text = itm.Description;
}
else
{
Response.Redirect(Globals.NavigateURL(), true);
}
}
else
{
cmdDelete.Visible = false;
}
}
}
catch (Exception ex)
{
Exceptions.ProcessModuleLoadException(this, ex);
}
}
The error handling code displays an error message to the user, which is enough for us right now.
Insert the following as method body for cmdCancel_Click:
Response.Redirect(Globals.NavigateURL(), true);
Next in line is the implementation of cmdUpdate_Click. Basically we check if we got an ItemId or not and thereby decide if we should update an existing item or create a new one.
cmdUpdate_Click should look like this:
protected void cmdUpdate_Click(object sender, EventArgs e)
{
try
{
ProductsController controller = new ProductsController();
ProductsInfo productItem = new ProductsInfo()
{
ModuleId = ModuleId,
ItemId = ItemId,
Name = Name.Text,
Description = Description.RichText.Text
};
if (Null.IsNull(ItemId))
{
controller.AddProduct(productItem);
}
else
{
controller.UpdateProduct(productItem);
}
Response.Redirect(Globals.NavigateURL(), true);
}
catch (Exception exc)
{
Exceptions.ProcessModuleLoadException(this, exc);
}
}
One thing to note about the code above is how we pull the content from the Description TextEditor control. If you use Description.Text you will get the HTML encoded content (“<” is converted to “<” and so on) which is not what you want in this case. Use Description.RichText.Text and you will get the raw markup.
The last event handler is cmdDelete_Click. If we have an ItemId then we delete the corresponding product item from the database. Simple as that. cmdDelete_Click should look like this:
protected void cmdDelete_Click(object sender, EventArgs e)
{
try
{
if (!Null.IsNull(ItemId))
{
ProductsController controller = new ProductsController();
controller.DeleteProduct(ModuleId, ItemId);
}
Response.Redirect(Globals.NavigateURL(), true);
}
catch (Exception exc)
{
Exceptions.ProcessModuleLoadException(this, exc);
}
}
With that done, compile the project to make sure everything is ok. Then log in as host in your DotNetNuke website. Now we’re going to add our brand new edit control to the Products module. Go to Host > Module Definitions. Locate the Products row in the list and click the edit icon.
Scroll down to the section Module Controls and click Add Module Control.
Make the following settings and click Update:
Now we can at last create product items and edit them. Great! Try it out!
Go to the page where you added the Products module. Make sure you are in edit mode. Now click the Add Content link. This time it actually happens something interesting. You should now see the edit control with a text field for product name and a text editor for description. Enter some text in them and click Update. The product you just added should now appear in the product list.
Now click the edit (pencil) icon next to the product name. This will take you to the edit screen and let you edit the product item.
Play around with your nice new controls until next time, when we look at the settings control.
Subscribe