1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Data input in frontend page

Data input in frontend page

10 posts, 0 answered
  1. Rick
    Rick avatar
    29 posts
    Registered:
    28 Oct 2009
    04 Feb 2010
    Link to this post
    Hi,

    I have implemented a custom module based on Product module.
    I added some more meta fields and admin side looks like this. (refer to attached file)

    Basically, I want to make a module that users can upload photos for competition.
    Users can only put data through front end.
    Manager can view the entries(photos) inserted by uesrs in admin side, and can edit it. -> which I have implemented already.

    I want to create public side having similar interface with admin side, so that users can input and store all fields in DB.

    Could you give me an instruction to achieve this?

    Thanks,

  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    04 Feb 2010
    Link to this post
    Hi Rick,

    Thank you for using our services.

    This can be achieved. You just have to create your own controls for handling this. Attached is a simple user control which creates content items in the generic content module. You can also take a look at the following blog post for more sample on how to create content items in the front end: Insert/Update/Delete content items with RadGrid for ASP.NET AJAX

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. Grey
    Grey avatar
    2 posts
    Registered:
    04 Jul 2008
    05 Feb 2010
    Link to this post

    Hi Radoslav,

    Thanks for your reply.
    I have looked at the file and the link you gave.

     

    Unfortunately, I don't understand completely and don't know where to start.
    Do I override existing ToolBoxItem, or add another?

    Also, I cannot have behind code under User control, since I made my module based on Product module.
    This module is using embedded templates(user controls) for separate classes and set "LayoutTemplatePath" property to connect them.
    I can't access user control property(ex:button, textbox...) from the code.

    Could you give me more detailed instruction please?

    Thanks,

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    05 Feb 2010
    Link to this post
    Hi Grey,

    You can access the control in the template from the view by creating control reference. Also there is no problem to have a code behind of a template, but this is not considered as a best practice. You can gather more information about backend architecture at Sitefinity 3.6 new backend architecture - documentation outline.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  5. Rick
    Rick avatar
    29 posts
    Registered:
    28 Oct 2009
    09 Feb 2010
    Link to this post
    Hi,

    From Radoslav's reply, I created my own control(CreateContentItems.ascx) under "~/UserControls" and could upload the control in the page.

    CreateContentItems.ascx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Cms.Engine;
    using Snowden.PhotoComp;
      
    public partial class UserControls_CreateContentItems : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Button1.Click += new EventHandler(Button1_Click);
        }
      
        void Button1_Click(object sender, EventArgs e)
        {
            PhotoCompManager photoCompManager = new PhotoCompManager("PhotoComp");
            IContent newContent = photoCompManager.CreateContent("text/html");
            //newContent.Content = Editor.Content;
            foreach (var metaKey in photoCompManager.Provider.MetaKeys)
            {
                ITextControl metaKeyValue = (ITextControl)this.FindControl(metaKey.Key);
                if (metaKeyValue != null)
                {
                    newContent.SetMetaData(metaKey.Key, metaKeyValue.Text);
                }
            }
            photoCompManager.SaveContent(newContent);
        }
    }

    I put data such as Name, Content and it is correctly stored in DB.
    However, when it stores data, the application filed is stored as "MyWebsiteName" rather than "ProviderName"
    Can I make it store as "ProviderName"?

    Thanks
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    09 Feb 2010
    Link to this post
    Hi Rick,

    You use "PhotoComp" as a provider to save your content. The application field in the database depends on the applicationName property from the provider declaration and provider Name.

    <add name="MyProvider" urlRewriteFormat="[Publication_Date]/[Title].aspx" urlDateTimeFormat="yy-MM-dd" urlWhitespaceChar="_" visible="False" defaultMetaField="Title" securityProviderName="" allowVersioning="True" applicationName="/Events" versioningProviderName="" commentsModeration="true" connectionStringName="GenericContentConnection" type="Telerik.MyModule.Data.DefaultMyModuleProvider, Telerik.MyModule.Data"/>


    All the best,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  7. Rick
    Rick avatar
    29 posts
    Registered:
    28 Oct 2009
    11 Feb 2010
    Link to this post
    Hi,

    Thanks for the advice.
    I managed to implement public side. (refer to attached file) 

    I can easily store custom meta fields such as Person Details and Photo Details
    However, I have no idea storing Category and Tag.

    Could you let me know how to get this done?

    PhotoCompEntryDetails.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PhotoCompEntryDetails.ascx.cs" Inherits="UserControls_PhotoCompEntryDetails" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Cms.Engine.WebControls" Assembly="Telerik.Cms.Engine" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Cms.Engine.WebControls.Admin" Assembly="Telerik.Cms.Engine" %>
    <%@ Register TagPrefix="sfLib" Namespace="Telerik.Libraries.WebControls" Assembly="Telerik.Libraries" %>
      
    <div id="divWorkArea" runat="server" class="workArea insert">
        <div class="mainForm">
            <h3><asp:Label ID="nameLbl" runat="server" AssociatedControlID="Title" Text="Title"></asp:Label></h3>
            <fieldset class="set">
                <div class="setIn title">
                    <asp:TextBox ID="Title" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="validator1" runat="server" ControlToValidate="Title" Display="Dynamic"
                         EnableViewState="False" SetFocusOnError="True" ErrorMessage="Title must not be empty" 
                         ValidationGroup="CreateContent"></asp:RequiredFieldValidator>
                    </div>
                </fieldset>
            <div class="bottom"><div><!-- --></div></div>
      
            <h3><asp:Label ID="contentLbl" runat="server" AssociatedControlID="Editor" Text="Entry description"></asp:Label></h3>
            <fieldset class="set">
                <div class="setIn">
                    <telerik:RadEditor 
                        runat="server" 
                        ID="Editor" 
                        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
                        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"                    
                        Skin="WebBlue"
                        NewLineBr="False" 
                        DialogsCssFile ="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorDialogs.css"
                        Width="95%"
                        ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
                        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
                        <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <CssFiles>
                            <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
                        </CssFiles>
                    </telerik:RadEditor>
                    <script type="text/javascript">
                        Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args) {
                            var editorArgs = editor.getSelectedElement();
                            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                                editorArgs = editor.getSelection();
      
                            var myCallbackFunction = function(sender, args) {
                                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")
                                    args.parentNode.replaceChild(editorArgs, args);
                                else {
                                    var cloned = args.cloneNode(true);
                                    var div = args.ownerDocument.createElement("DIV");
                                    div.appendChild(cloned);
                                    editorArgs.pasteHtml(div.innerHTML);
                                }
                            }
                            editor.showExternalDialog(
                           '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>',
                           editorArgs,
                           750,
                           600,
                           myCallbackFunction,
                           null,
                           'ImageLibraryDialog',
                           true,
                           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                           false,
                           true)
                        };
      
                        Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args) {
                            var editorArgs = editor.getSelectedElement();
                            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                                editorArgs = editor.getSelection();
      
                            var myCallbackFunction = function(sender, args) {
                                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                                    args.parentNode.replaceChild(editorArgs, args);
                                else {
                                    var cloned = args.cloneNode(true);
                                    var div = args.ownerDocument.createElement("DIV");
                                    div.appendChild(cloned);
                                    editorArgs.pasteHtml(div.innerHTML);
                                }
                            }
                            editor.showExternalDialog(
                           '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>',
                           editorArgs,
                           750,
                           600,
                           myCallbackFunction,
                           null,
                           'ImageLibraryDialog',
                           false,
                           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                           false,
                           true)
                        };
      
                        Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {
                            var editorArgs = editor.getSelectedElement();
                            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A") {
                                var sel = editor.getSelection();
                                editorArgs = sel;
                                editorArgs.Html = sel.getHtml();
                                editorArgs.Text = sel.getText();
                            }
      
      
                            var myCallbackFunction = function(sender, args) {
                                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                                    args.parentNode.replaceChild(editorArgs, args);
                                else {
                                    var cloned = args.cloneNode(true);
                                    var div = args.ownerDocument.createElement("DIV");
                                    div.appendChild(cloned);
                                    editorArgs.pasteHtml(div.innerHTML);
                                }
                            }
                            editor.showExternalDialog(
                           '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
                           editorArgs,
                           750,
                           600,
                           myCallbackFunction,
                           null,
                           'ImageLibraryDialog',
                           false,
                           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                           false,
                           true)
                        };
      
                        Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args) {
                            var editorArgs = editor.getSelectedElement();
                            if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")
                                editorArgs = editor.getSelection();
      
                            var myCallbackFunction = function(sender, args) {
                                if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")
                                    args.parentNode.replaceChild(editorArgs, args);
                                else {
                                    var cloned = args.cloneNode(true);
                                    var div = args.ownerDocument.createElement("DIV");
                                    div.appendChild(cloned);
                                    editorArgs.pasteHtml(div.innerHTML);
                                }
                            }
                            editor.showExternalDialog(
                           '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>',
                           editorArgs,
                           750,
                           600,
                           myCallbackFunction,
                           null,
                           'ImageLibraryDialog',
                           false,
                           Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                           false,
                           true)
                        };
                        var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function
      
                        Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args) {
                            oldFunction(commandName, editor, args);
                            var bd = document.getElementsByTagName("body")[0];
      
                            if (/fullScreenMode/.test(bd.className)) {
                                var rep = bd.className.match(' ' + 'fullScreenMode') ? ' ' + 'fullScreenMode' : 'fullScreenMode';
                                bd.className = bd.className.replace(rep, '');
      
                            } else {
                                bd.className += bd.className ? ' ' + 'fullScreenMode' : 'fullScreenMode';
                            }
                        };
      
                        // automated tests helper function
                        function InsertTextArea() {
                            var editor = $find('<%=Editor.ClientID%>');
                            editor.set_html('<textarea id="myTableToFind" style="overflow:hidden; height: 300px; width: 500px;" border="none"></textarea>');
                        }
      
                        </script>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="Editor"
                            Display="Dynamic" EnableViewState="False" SetFocusOnError="True"
                            ErrorMessage="Content must not be empty" ValidationGroup="CreateContent"></asp:RequiredFieldValidator>
                    </div>
                </fieldset>
                <div class="bottom"><div><!-- --></div></div>
                  
                  
            <h3><asp:Literal runat="server" Text="Personal Details"></asp:Literal></h3>
            <fieldset class="set">
                <ol class="setIn">
                    <li class="catSel clearfix">
                        <asp:Label ID="lblFirstName" runat="server" AssociatedControlID="FirstName">
                            <asp:Literal runat="server" Text="First Name"></asp:Literal>
                            <em id="Em2" runat="server"></em>
                        </asp:Label>
                        <asp:TextBox ID="FirstName" runat="server"></asp:TextBox>
                    </li>
                    <li class="catSel clearfix">
                        <asp:Label ID="lblLastName" runat="server" AssociatedControlID="LastName">
                            <asp:Literal runat="server" Text="Last Name"></asp:Literal>
                            <em id="Em3" runat="server"></em>
                        </asp:Label>
                        <asp:TextBox ID="LastName" runat="server"></asp:TextBox>
                    </li>
                    <li class="catSel clearfix">
                        <asp:Label ID="lblEmail" AssociatedControlID="Email" runat="server">
                            <asp:Literal runat="server" Text="Email"></asp:Literal>
                        <em id="Em4" runat="server"></em></asp:Label>
                        <asp:TextBox ID="Email" runat="server"></asp:TextBox>
                    </li>
                    <li class="catSel clearfix">
                        <asp:Label ID="lblPhone" AssociatedControlID="Phone" runat="server">
                            <asp:Literal runat="server" Text="Phone"></asp:Literal>
                        <em id="Em5" runat="server"></em></asp:Label>
                        <asp:TextBox ID="Phone" runat="server"></asp:TextBox>
                    </li>
                </ol>
            </fieldset>
            <div class="bottom"><div><!-- --></div></div>
              
            <h3><asp:Literal Text="Photo Details" runat="server"></asp:Literal></h3>
            <fieldset class="set">
                <ol class="setIn">
                    <li class="selector">  
                        <asp:Label AssociatedControlID="Image" runat="server">  
                        <asp:Literal runat="server" Text="Image"></asp:Literal>  
                        <em id="ImageLabel" runat="server"></em></asp:Label>  
                        <asp:TextBox ID="Image" runat="server" MaxLength="250"></asp:TextBox>  
                        <sfLib:ButtonSelector WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx" 
                            AssociatedControls="Image" ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx" 
                            runat="server" cssclass="pickerWrapper" ButtonText="Select" />  
                    </li>
                    <li class="catSel clearfix">
                        <asp:Label AssociatedControlID="PhotoCaption" runat="server">
                            <asp:Literal runat="server" Text="Caption for Photo"></asp:Literal>
                        <em id="Em6" runat="server"></em></asp:Label>
                        <asp:TextBox ID="PhotoCaption" TextMode="MultiLine" Text="" runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <asp:Label runat="server" Text="Year participating in" AssociatedControlID="Year"></asp:Label>
                        <asp:DropDownList ID="Year" runat="server">
                            <asp:ListItem Text="-- Select year --" Value=""></asp:ListItem>
                            <asp:ListItem Text="2005" Value="2005"></asp:ListItem>
                            <asp:ListItem Text="2006" Value="2006"></asp:ListItem>
                            <asp:ListItem Text="2007" Value="2007"></asp:ListItem>
                            <asp:ListItem Text="2008" Value="2008"></asp:ListItem>
                            <asp:ListItem Text="2009" Value="2009"></asp:ListItem>
                            <asp:ListItem Text="2010" Value="2010"></asp:ListItem>
                        </asp:DropDownList>
                    </li>
                    <li>
                        <asp:Label ID="Label4" runat="server" Text="Include in People's Choice" AssociatedControlID="IncludeInPeoplesChoice"></asp:Label>
                        <asp:CheckBox ID="IncludeInPeoplesChoice" runat="server" />
                    </li>
                </ol>
            </fieldset>
            <div class="bottom"><div><!-- --></div></div>
              
            <h3><asp:Literal runat="server" Text="Category"></asp:Literal></h3>
            <fieldset class="set">
                <ol class="setIn">
                    <li class="catSel clearfix">
                        <asp:Label AssociatedControlID="Category" runat="server">
                            <asp:Literal runat="server" Text="Category"></asp:Literal>
                        <em id="Em7" runat="server"></em></asp:Label>
                        <sf:ContentCategoriesField ID="Category" runat="server" />
                    </li>
              </ol>
            </fieldset>
            <div class="bottom"><div><!-- --></div></div>
              
            <h3><asp:Literal runat="server" Text="Tags"></asp:Literal></h3>
            <fieldset class="set">
                <ol class="setIn">
                    <li class="tags">
                        <sf:ContentTagEditor ID="tagsControl" runat="server" />
                    </li>
                </ol>
            </fieldset>
              
            <p></p>
            <asp:Button ID="Button1" Text="Create Photo Entry" runat="server" CausesValidation="true" ValidationGroup="CreateContent"/>
      
        </div>
    </div>

    PhotoCompEntryDetails.ascx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Cms.Engine;
    using Snowden.PhotoComp;
      
    public partial class UserControls_PhotoCompEntryDetails : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Button1.Click += new EventHandler(Button1_Click);
        }
      
        void Button1_Click(object sender, EventArgs e)
        {
            PhotoCompManager photoCompManager = new PhotoCompManager("PhotoComp");
            IContent newContent = photoCompManager.Content.CreateContent("text/html");
            newContent.Content = Editor.Content;
            foreach (var metaKey in photoCompManager.Content.Provider.MetaKeys)
            {
                if (metaKey.Value.ValueType == MetaValueTypes.Boolean)
                {
                    System.Web.UI.ICheckBoxControl metaKeyValue = (ICheckBoxControl)this.FindControl(metaKey.Key);
                    if (metaKeyValue != null)
                    {
                        newContent.SetMetaData(metaKey.Key, metaKeyValue.Checked);
                    }
                }
                else
                {
                    ITextControl metaKeyValue = (ITextControl)this.FindControl(metaKey.Key);
                    if (metaKeyValue != null)
                    {
                        newContent.SetMetaData(metaKey.Key, metaKeyValue.Text);
                    }
                }
            }
            photoCompManager.Content.SaveContent(newContent);
        }
      
          
    }
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    11 Feb 2010
    Link to this post
    Hi Rick,

    1. The categories are metakeys. You can use GetMetaData and SetMetaData methods to retrieve and persist them.

    2. Tags - the ContentManager class has a methods CreateTag, SaveTag and DeleteTag that you can use. You can gather more information at Tags Overview


    Regards,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  9. Rick
    Rick avatar
    29 posts
    Registered:
    28 Oct 2009
    12 Feb 2010
    Link to this post

    Hi,

    Could you elaborate a bit more about both cases?

    1. I can get categories by putting

    var existingCat = photoCompManager.Content.GetCategories();
    when the page is loaded.
    However, I have no idea how to associate and populate them to sf:ContentCategoriesField.

    2. I can't get 'TestTag1' value from anywhere. (refer to attached file) 
    Where can I get the value when the tag is just added?

    Thanks,
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    12 Feb 2010
    Link to this post
    Hi Rick,

    1. To use  ContentCategoriesField you should have a metakey for you provider - say "Category" and ContentCategoriesField should have the same ID. Once again you can simply use GetMetaData and SetMetaData methods. To get the correct data returned you need to pass the ID of the current content item.

    2. You need to get the content and then all tags for it.

    IList existingTags = this.Manager.GetTags(this.contentId);

    If you make a post back you can easily ge the value. Otherwise you need to work with js and register a script on the server using Page.ClientScript.RegisterClientScriptResource to get the tag id.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
10 posts, 0 answered