frontend update member with surfacecontroller - Extending Umbraco and using the API

Tom Engan 430 posts 1173 karma points

May 23, 2017 @ 10:19

Frontend CRUD example with surfacecontroller?

Extending Umbraco and using the API

Umbraco 7

There are good examples of how creating contact form using surfacecontroller, but find little about how to update registered member information for members logged in from frontend.

Does anyone have a complete CRUD example of using model, surfacecontroller and view, using extended member profiles?

Copy Link

David Brendel 792 posts 2970 karma points MVP 3x c-trib

May 24, 2017 @ 08:46

Hi Tom,

not sure what you are after but maybe this is a starting point. It's a bit old but the general technique hasn't changed I think.

https://github.com/warrenbuckley/CWS-Umbraco-Standard-Membership

Regards David

Copy Link

Tom Engan 430 posts 1173 karma points

May 24, 2017 @ 10:36

Thank you. Everything helps. It seems that the Members API has been overhaled since then ( https://umbraco.com/blog/out-now-umbraco-710/ ), and umbraco.cms.businesslogic.member is obsolete, but will check out your link to see if it will work for me. I'm still missing an example of dropdown in membership, that's what I'm trying to get now: https://our.umbraco.org/forum/extending-umbraco-and-using-the-api/85926-how-to-update-dropdownlist-stored-in-imember

Copy Link

Fernando Oliveira 11 posts 52 karma points

Jun 01, 2021 @ 13:52

Is creating Plugins the best way to implement new features to the Umbraco ?

I'm starting to use it and would like to create some new features to the end-user, to access another data from our databases, not only umbracodb.

Copy Link

Brendan Rice 538 posts 1099 karma points

Jun 01, 2021 @ 13:55

Hi Fernando,

it sounds like you want to extend the back office, here's the related documentation:

https://our.umbraco.com/documentation/Extending/

Hope this helps...

Copy Link

Fernando Oliveira 11 posts 52 karma points

Jun 01, 2021 @ 14:53

Thank you for your fast response.

Would be nice to have some Plugin ready-to-use template, where we just start adding our custom code.

May I use the CMSUmbracoStandardMembership to create a new plugin to work as Starter kit for plugin ?

Copy Link

Brendan Rice 538 posts 1099 karma points

Jun 01, 2021 @ 16:35

No worries.

I'd recommend you read through the documentation, it'll save you time and give a good understanding of how things work.

Copy Link

Huw Reddick 1736 posts 6076 karma points MVP c-trib

Jun 01, 2021 @ 17:47

This is the code I use to edit a Members profile (Member not BO User)

Partial View code

@using (Html.BeginUmbracoForm("SubmitForm", "PortalProfileDetailsSurface",FormMethod.Post)){
    <!-- Tabs-->
    @Html.HiddenFor(m => Model.Username,new { autocomplete="username" })
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#profile" data-toggle="tab" role="tab">
                <i class="fa fa-user"></i> Portal Profile 
            </a>
        </li>
    </ul>

    <!-- Tab content-->
    <div class="tab-content ">
        <!-- Profile-->
        <div class="tab-pane active " id="profile" role="tabpanel">

            <!-- Profile details -->
            <fieldset>
                <div class="table-responsive font-size-md ">
                    <table class="table table-hover mb-0 ">
                        <tbody>
                            <tr>
                                <td class="py-3 align-middle">
                                    <label for="dashboard-fn">First Name</label>: <span id="profile_firstname1">@Model.Firstname</span>
                                    @Html.TextBoxFor(m => Model.Firstname, new { @class = "hidden form-control", @maxlength = 60, @type = "textbox", @id = "profile_firstname_edit" })
                                    <br>
                                    <label for="dashboard-fn">Last Name</label>: <span id="profile_lastname1">@Model.Lastname</span>
                                    @Html.TextBoxFor(m => Model.Lastname, new { @class = "hidden form-control", @maxlength = 60, @type = "textbox", @id = "profile_lastname_edit" })
                                </td>
                                <td class="py-3 align-middle">
                                    <div class=" mr-2" onclick="EditName()" data-toggle="tooltip" title="Change name"><i class="fa fa-edit"></i></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 align-middle">
                                    <label for="dashboard-fn">Email address</label>: <span id="profile_email1">@Model.Email</span>
                                    @Html.TextBoxFor(m => Model.Email, new { @class = "hidden form-control", @maxlength = 60, @type = "textbox", @id = "profile_email1_edit" })
                                <td class="py-3 align-middle">
                                    <div class=" mr-2" onclick="EditEmail()" data-toggle="tooltip" title="Change email address"><i class="fa fa-edit"></i></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 align-middle"><label for="dashboard-fn">Mobile</label>: <span id="profile_mobile1">@Model.Mobile</span>
                                @Html.TextBoxFor(m => Model.Mobile, new { @class = "hidden form-control", @maxlength = 60, @type="textbox",  @id="profile_mobile_edit"})
                                <td class="py-3 align-middle">
                                    <div class=" mr-2" onclick="EditMobile()" data-toggle="tooltip" title="Change"><i class="fa fa-edit"></i></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="py-3 align-middle">
                                    <label for="dashboard-fn">Password</label>: <span id="profile_password1">*********</span>
                                    @Html.TextBoxFor(m => Model.Password, new { @class = "hidden form-control", @maxlength = 60, @type = "password", autocomplete = "current-password", @id = "profile_password_edit" })

                                    <label class="hidden" for="dashboard-fn" id="profile_password_confirm_label">Confirm</label>
                                    @Html.TextBoxFor(m => Model.ConfirmPassword, new { @class = "hidden form-control", @maxlength = 60, @type = "textbox", autocomplete = "new-password", @id = "profile_password_confirm_edit" })
                                <td class="py-3 align-middle">
                                    <div class=" mr-2" onclick="EditPassword()" data-toggle="tooltip" title="Change password"><i class="fa fa-edit"></i></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-right mt-4 hidden" id="profile_edit_buttons">
                    <button class="btn btn-orange btn-pill" type="button" onclick="window.location.reload()">Cancel</button>
                    <button class="btn btn-green btn-pill" type="submit">Save changes</button>
                </div>
            </fieldset>

        </div>
    </div>
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false, "", new { @class = "text-danger" })

}
</section>

Controller Action

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SubmitForm(PortalProfileDetailsModel model)
{
    if(ModelState.IsValid)
    {
        bool detailschanged = false;
        bool emailchanged = false;

        var member = Services.MemberService.GetById(Members.GetCurrentMemberId());
        if (member.GetValue<string>("firstname") != model.Firstname)
        { 
            member.SetValue("firstname", model.Firstname);
            detailschanged = true;
        }
        if (member.GetValue<string>("lastname") != model.Lastname)
        {
            detailschanged = true;
            member.SetValue("lastname", model.Lastname);
        }

        if (member.GetValue<string>("Email") != model.Email)
        {
            //TODO: validate email address?
            emailchanged = true;
            detailschanged = true;
            member.Email = model.Email;
        }

        if(detailschanged)
            Services.MemberService.Save(member);

        if (model.Password != null && model.Password.Length > 0 && model.Password == model.ConfirmPassword)
        {
            Services.MemberService.SavePassword(member,model.Password);
            member.LastPasswordChangeDate = DateTime.UtcNow;
            Services.MemberService.Save(member);
        }

    }

    var ret = CurrentUmbracoPage();

    return ret;
}

Copy Link

Fernando Oliveira 11 posts 52 karma points

Jun 01, 2021 @ 19:01

Nice. I'm starting to get how it works.

Do I need to have a project, or may I put inside the website the surface class only ?

If yes, which folder do I need to put the class into ?

Copy Link

Huw Reddick 1736 posts 6076 karma points MVP c-trib

Jun 01, 2021 @ 19:19

You should probably have a read of this

https://our.umbraco.com/documentation/development-guidelines/

Copy Link

is working on a reply...

Flag this post as spam?

Frontend CRUD example with surfacecontroller?