LightSwitch Help Website

A LightSwitch Role Administration Web Page (JQueryUI/JuiceUI/Wijmo)

webmaster@adefwebserver.com — Thu, 17 May 2012 13:59:29 GMT

Visual Studio LightSwitch uses the standard ASP.NET Membership provider. This allows you to create web applications that can manage the LightSwitch users and roles. Integration with LightSwitch and ASP.NET has been covered in: Integrating LightSwitch Into An ASPNET Application To Provide Single Sign On. This article starts with the application created for that article, and adds an administration page that allows you to drag and drop roles, to assign and un-assign them for users.

The Application

The page allows us to choose an existing member in the drop down.

The Roles the user is in and not in will show.

We can drag and drop the Roles from each list to make a re-assignment.

(note: the Administrator role cannot be unassigned to prevent a person from accidently un-assigning themselves as an administrator)

The ASP.NET Application

We will start with the code in: Integrating LightSwitch Into An ASPNET Application To Provide Single Sign On.

This ASP.NET website application can be pointed to any LightSwitch application.

The ASP.NET application allows users to create accounts and to log in.

We enable this by pointing the web.config settings of the ASP.NET website application to the LightSwitch application.

For directions on how this is done see:

Integrating LightSwitch Into An ASPNET Application To Provide Single Sign On.

Also see this post by LightSwitch team member Valerie Andersen:

http://social.msdn.microsoft.com/Forums/en-US/lightswitchgeneral/thread/60c76dde-07dd-48f7-8aed-f7aec66c47d4

Also note that in addition to the web.config changes, you will also need to change the line in the Default.aspx file to point to your LightSwitch application.

Creating The Application

Open the code from: Integrating LightSwitch Into An ASPNET Application To Provide Single Sign On in Visual Studio 2010 (or higher).

You will see the files in the Solution Explorer in Visual Studio.

The sample we will create requires JQueryUI, JuiceUI and Wijmo. The easiest way to install the needed components is to use Nuget.

If you have Visual Studio 2010 and you do not have Nuget installed, install it from here:

http://nuget.org/

(note: if you have a higher version of Visual Studio, it may already be installed).

Open the Nuget console by selecting: Tools / Library Package Manager / Package Manager Console.

Type in:

Install-Package JuiceUI

and press the Enter key.

The files will install.

Next, type in :

Install-Package WijmoOpenJuiceUI

and press the Enter key.

When you refresh the files n the Solution Explorer, you will see that everything is installed (even the web.config has been updated).

The Admin.aspx Page

Next, we add a new page called Admin.aspx.

We use the following code for the markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Admin.aspx.cs" Inherits="Admin" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head id="Head1" runat="server">
    <title>User Managementtitle>
head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    asp:ScriptManager>
    <style>
        .draggable
        {
            width: 100px;
            height: 50px;
        }
        .droppable
        {
            width: 150px;
            height: 150px;
            padding-bottom: 2.0em;
            margin: 10px;
        }
    style>
    <style type="text/css">
        .formdecorator label
        {
            display: block;
        }
        
        .formdecorator
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .formdecorator li
        {
            clear: both;
            margin-bottom: 1em;
        }
    style>
    <div>
        <h4>
            <asp:Label ID="lblTitle" runat="server" 
                Text="Visual Studio LightSwitch Role Manager (JQueryUI/JuiceUI/Wijmo)" />h4>
    div>
    <asp:Panel ID="pnlApplication" runat="server">
        <table class="formdecorator">
            <tr>
                <td style="vertical-align: top" colspan="3">
                    <strong>User:strong><br>
                    <br>br>
                    <asp:DropDownList ID="ddlUsers" runat="server" AutoPostBack="True" 
                        ClientIDMode="Static" DataTextField="Text" DataValueField="Text" 
                        Width="200px">
                    asp:DropDownList>
                    br>
                td>
            tr>
            <tr>
                <td style="vertical-align: top" align="center">
                     td>
                <td style="vertical-align: top">
                     td>
                <td style="vertical-align: top" align="center">
                     td>
            tr>
            <tr>
                <td style="vertical-align: top">
                     td>
                <td style="vertical-align: top">
                     td>
                <td style="vertical-align: top">
                     td>
            tr>
        table>
        <br />
        <div id="Result">
        div>
    asp:Panel>
    form>
body>
html>

We use the following code for the code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.Configuration;
using System.Web.Services;
using System.Web.Security;
using Juice;
public partial class Admin : System.Web.UI.Page
{
    public class DropDownText
    {
        public string Text { get; set; }
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (User.Identity.IsAuthenticated) // Logged in
        {
            if (!Page.IsPostBack)
            {
                if (Roles.IsUserInRole("Administrator"))
                {
                    ShowUsers();
                }
                else
                {
                    lblTitle.Text = "Only Administrators can use this application";
                    pnlApplication.Visible = false;
                }
            }
        }
        else // Not Logged In
        {
            Response.Redirect("~/Login.aspx");
        }
    }
    #region ShowUsers
    private void ShowUsers()
    {
        var colDropDownText = new List();
        foreach (var item in Membership.GetAllUsers())
        {
            colDropDownText.Add(new DropDownText() { Text = item.ToString() });
        }
        // Bind entire collection to GridView
        ddlUsers.DataSource = colDropDownText;
        ddlUsers.DataBind();
    }
    #endregion
}

When we run the application, log in, and navigate to the Admin.aspx page, we see a drop down list of the users.

Display The Roles

Next, we add the following markup to display the Roles a user is in (and not in):

    <tr>
        <td style="vertical-align: top">
            <asp:Panel ID="UserRoles" CssClass="droppable ui-widget-header" runat="server" ClientIDMode="Static"
                Height="100%">
                <asp:DataList ID="dlRoles" runat="server" Width="100%">
                    <ItemTemplate>
                        <asp:Panel ID="DraggablePanel" runat="server" HorizontalAlign="Center">
                            <p style="border: thin solid #C0C0C0; 
                                padding: 5px; margin: 5px; cursor: hand; background-color: #FFFFCC;
                                font-weight: bold; width: 85%;">
                                <%# Eval("Text")%>p>
                        asp:Panel>
                    ItemTemplate>
                asp:DataList>
            asp:Panel>
        td>
        <td style="vertical-align: top">
             
        td>
        <td style="vertical-align: top">
            <asp:Panel ID="AllRoles" CssClass="droppable ui-widget-header" runat="server" ClientIDMode="Static"
                Height="100%">
                <asp:DataList ID="dlAllRoles" runat="server" Width="100%">
                    <ItemTemplate>
                        <asp:Panel ID="DraggablePanel" runat="server" HorizontalAlign="Center">
                            <p style="border: thin solid #C0C0C0; 
                                padding: 5px; margin: 5px; cursor: hand; background-color: #FFFFCC;
                                font-weight: bold; width: 85%;">
                                <%# Eval("Text")%>p>
                        asp:Panel>
                    ItemTemplate>
                asp:DataList>
            asp:Panel>
        td>
    tr>

We use the following code behind to fill the lists:

    #region DisplayRolesForUser
    private void DisplayRolesForUser(string UserName)
    {
        var colRolesForUser = new List();
        foreach (var item in Roles.GetRolesForUser(UserName))
        {
            colRolesForUser.Add(new DropDownText() { Text = item.ToString() });
        }
        // Bind entire collection to GridView
        dlRoles.DataSource = colRolesForUser;
        dlRoles.DataBind();
        // Query OData source -- Roles
        var RolesResult = new List();
        foreach (var item in Roles.GetAllRoles())
        {
            if(!Roles.IsUserInRole(UserName,item))
            {
                RolesResult.Add(new DropDownText() { Text = item.ToString() });
            }            
        }
        // Bind entire collection to GridView
        dlAllRoles.DataSource = RolesResult;
        dlAllRoles.DataBind();
    }  
    #endregion

When we run the application, the Roles display.

Drag And Drop

To enable drag, we add JuiceUI tags such as this:

<juice:Draggable ID="DraggableControl" TargetControlID="DraggablePanel" runat="server" Revert="true" />

To enable drop we also add JuiceUI tags such as this:

<juice:Droppable ID="Droppable1" TargetControlID="AllRoles" runat="server" />

We add the following JQuery to handle the drop and call the UpdateRole method (that will make the update to the user’s account):

$(function () {
    $(".droppable").droppable("option", "drop", function (event, ui) {
        var dropPanel = $(this).attr("id");
        var userName = $("#ddlUsers option:selected").val();
        // Add element to the drop panel
        $(this).append(ui.draggable);
        // Get the text of the draggable item
        var roleName = "";
        var ua = $.browser;
        // Firefox uses textContent 
        // all others use innerText
        if (ua.mozilla) {
            roleName = ui.draggable[0].textContent;
        }
        else {
            roleName = ui.draggable[0].innerText;
        }
        // Set the text of the parameter to be passed to the web method
        var jsonText = JSON.stringify({ "DropPanel": dropPanel, "RoleName": roleName, "UserName": userName });
        // Call the web method
        $.ajax({
            type: "POST",
            url: "Admin.aspx/UpdateRole",
            data: jsonText,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                // Replace the div's content with the page method's return.
                $("#Result").text(msg.d);
            }
        });
    });
});

We add the following static method to the code behind that will actually update the user’s account:

    #region UpdateRole
    [WebMethod]
    public static string UpdateRole(string DropPanel, string RoleName, string UserName)
    {
        string strResponse = "";
        Page objPage = new Page();
        // Must be logged in
        if (objPage.User.Identity.IsAuthenticated)
        {
            if (Roles.IsUserInRole("Administrator"))
            {
                if (DropPanel == "UserRoles") // Adding a role
                {
                    try
                    {
                        Roles.AddUserToRole(UserName, RoleName);
                    }
                    catch (Exception ex)
                    {
                        strResponse = ex.Message;
                    }
                }
                else // Removing a role
                {
                    try
                    {
                        Roles.RemoveUserFromRole(UserName, RoleName);
                    }
                    catch (Exception ex)
                    {
                        strResponse = ex.Message;
                    }
                }
            }
        }
        return strResponse;
    }
    #endregion

Prevent Administration Role From Being Dragged

We want to prevent an administrator from accidently removing themselves from the Administrator role.

We add a hidden panel that will not be draggable and a onItemDataBound event.

We use the following code for the onItemDataBound event:

    #region dlRoles_ItemDataBound
    protected void dlRoles_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        // Get the data item
        DropDownText objText = (DropDownText)e.Item.DataItem;
        // Get an instance of the panels
        Panel DraggablePanel = (Panel)e.Item.FindControl("DraggablePanel");
        Panel pnlAdministrator = (Panel)e.Item.FindControl("pnlAdministrator");
        // If the data item is Administrator...
        if (objText.Text == "Administrator")
        {
            // Hide the draggable panel
            DraggablePanel.Visible = false;
            // Show the non draggable panel
            pnlAdministrator.Visible = true;
        }
    } 
    #endregion

Adding Wijmo

To add the Wijmo Open for JuiceUI control that will provide a theming, we only need to add a single line such as this:

<wijmo:WijDropdown ID="Dropdown1" runat="server" TargetControlID="ddlUsers" />

When we run the application we see the dropdown has an attractive theme.

Download The Code

Download the code at: http://lightswitchhelpwebsite.comhttp://lightswitchhelpwebsite.com/Downloads.aspx

More ...

Tags: Advanced

The Southern California LightSwitch User Group May 2012 Meeting

webmaster@adefwebserver.com — Thu, 10 May 2012 07:05:18 GMT

The first Southern California LightSwitch User’s Group meeting was a success. The group was formed a month ago after I made an announcement in the LightSwitch Help Website forums: (Anyone want to form a Southern California LightSwitch User Group?). We had 7 members attend our first meeting.

6:30pm – Tom and I stopped by Target and picked up some chips, cookies, and crackers. At the next meeting we will order pizza, at this meeting we were not sure how many people would come and if we could eat a full meal in the conference room.

7:00pm – Most of the members have arrived. We decided to wait 10 minutes for anyone else to show up. People introduced themselves and passed out their cards if they had them. I asked some people if they were new to LightSwitch and half were.

7:10pm – I launched into a overview of LightSwitch for the new people, and talked about OData and why it is so important. I ended up going longer than the 20 minutes I planned.

7:50pm – The next member hooked up to the projector and showed us the half completed application that will allow him to provide a loyalty card service to small businesses. He showed how he implemented computed fields, picture uploading, and multi-tenant filtering using this article: Levels of Validation and Filtering on User Membership.

8:15pm – The next member hooked up his laptop and showed us a real estate application he is working on. He had some question on implementing custom filtering. We suggested he use: Using The LightSwitch Filter Extension.

9:00pm – The meeting breaks up. Five of us spend the next hour talking in the parking lot about our various projects.

Join The Group

You can join the group at this link: SoCal LightSwitch User Group.

Start Your Own Group

You can start your own group by making an announcement in the forums like I did. Once your group has formed, you can create a group on the LightSwitch Help Website at: http://lightswitchhelpwebsite.comhttp://lightswitchhelpwebsite.com/Community/SocialGroupDirectory.aspx.

More ...

Tags: Community

Visual Studio LightSwitch and Windows Phone 7 OData Full CRUD Example

webmaster@adefwebserver.com — Sun, 06 May 2012 14:35:43 GMT

Visual Studio LightSwitch (In Visual Studio 11 Beta) allows you to access your LightSwitch application via OData. This provides access to the security and business rules of your LightSwitch application.

In this article we will demonstrate using Windows Phone 7 to create an application that will cover Creating, Reading, Updating, and Deleting data (otherwise known as CRUD) in LightSwitch…

Tags: OData

Using Visual Studio LightSwitch To Orchestrate A Unity 3D Game

webmaster@adefwebserver.com — Mon, 30 Apr 2012 02:23:03 GMT

Visual Studio LightSwitch in Visual Studio 11 allows you to communicate directly with the LightSwitch business layer (business rules, custom code, security), though OData. This allows you to use LightSwitch as the orchestrating control for any enterprise application or deployment.

In this example, we will demonstrate, using Visual Studio LightSwitch, an application to monitor and send messages to a Unity 3D online game…

Tags: OData

A LightSwitch Netflix OData Mash-up

webmaster@adefwebserver.com — Tue, 24 Apr 2012 04:39:39 GMT

Consuming OData in Visual Studio LightSwitch in Visual Studio 2011 is very easy. When you consume an OData service in LightSwitch, its Entities that you import behave like any other LightSwitch data source (such as Internal Entities, external SQL tables, and WCF RIA Services). This allows you to easily create mash-ups where you combine different data sources to create an application.

In this example, we will create an application that allows us to add our own reviews to the movies in the Netflix catalog…

Tags: OData

Flipping on LightSwitch article in SD Times

webmaster@adefwebserver.com — Mon, 23 Apr 2012 23:57:00 GMT

Finally a well written article that talks about LightSwitch (also I am quoted in it several times):

Everyone’s aiming for the “citizen developer,” but lately that elusive customer has led Microsoft on a snipe hunt. With LightSwitch, the company has a rapid application development (RAD) tool, that no one—not even Redmond or its partners—seems to know quite what to do with...

Read the full article at this link.

More ...

Shape Your LightSwitch OData Using WCF RIA Services

webmaster@adefwebserver.com — Thu, 19 Apr 2012 05:37:14 GMT

The LightSwitch Silverlight screens allow you to easily group and total data. The LightSwitch OData services return one Entity collection at a time. This makes grouping and totaling across Entity collections difficult. Using WCF RIA Services provides a clean elegant solution…

Tags: OData

DELORDSON Releases 6 Exciting New Shells

webmaster@adefwebserver.com — Sun, 15 Apr 2012 23:32:54 GMT

Delordson has released 6 new LightSwitch Shells today:

He also offers a special where you can buy all the Shells for one low price in the LightSwitch Shell Pack.

Note: All Shells come in a LightSwitch 2010 version, and a LightSwitch in Visual Studio 2011 Beta version.

Cracking The Code In Creating LightSwitch Shells

I have covered creating LightSwitch Shells in: Creating a Minimal LightSwitch Shell, but that does not begin to handle the numerous issues required for a professional level LightSwitch Shell. For a professional level LightSwitch Shell, you must deal with showing validation and loading and switching screens (among other things).

Delordson has dedicated himself to unraveling the mysteries of the LightSwitch Shell API. It is not uncommon for he and I to exchange 5-10 emails a day discussing technical issues related to LightSwitch. I am pretty knowledgeable about many aspects of LightSwitch, but, when discussing the inner workings of LightSwitch Shells and Themes, I mostly just listen .

About 2 months ago he had a breakthrough, and discovered how to tap into the LightSwitch core objects to handle validation, screen management, events, ect. (all undocumented of course) . This allows him to make high quality, rock solid Shells, that behave as good as the Default LightSwitch Shells.

He published a 28 page manual explaining how he cracked the code, and packaged it, and the source code to his version of the LightSwitch Default Shell, in his product called Default LightSwitch Shell.

My Favorite Shells

All his Shells are great, but I have my favorites:

LightSwitch Tree View Shell - One advantage of being the primary tester and sounding board for Delordson, is that I get to influence the end product. Notice how the logo in the upper left stretches across the top? That turned out to require a bit of effort on Delordson’s part, but I think my constant whining about this being my favorite Shell (“except for that one small issue…”) helped to get this important feature in.

I think that having a nested tree menu with images, makes it easy for the end-user to understand and navigate the application.

LightSwitch Default Shell Top 2012 – Delordson actually planned to make only 5 Shells. The reason there are 6 Shells in the LightSwitch Shell Pack, is because my other favorite Shell was the LightSwitch Default Shell 2012 (inspired by the Cosmopolitan Shell that is to be the default Shell in the next version of LightSwitch), but I hated that the Save and Refresh buttons were at the bottom of the screen.

The menu bar does not take up valuable screen space, and it still has the ever helpful icons to assist the end-user in understanding what a screen is suppose to do (and makes the application more attractive).

More ...

Tags: Shells

A Full CRUD DataJs and KnockoutJs LightSwitch Example Using Only An .Html Page

webmaster@adefwebserver.com — Sun, 15 Apr 2012 01:42:21 GMT

In this article we will demonstrate using JQuery, DataJs and KnockoutJs to create a page that will cover Creating, Reading, Updating, and Deleting data (otherwise known as CRUD) in LightSwitch. As described in the article: LightSwitch Architecture: OData (John Rivard), OData allows CRUD using the following HTTP verbs:

Create : POST
Read: GET
Update: PUT
Delete: DELETE

Many may find that communication with LightSwitch is easer when using the server side methods shown in the articles: Calling LightSwitch 2011 OData Using Server Side Code and A Full CRUD LightSwitch JQuery Mobile Application. However, an advantage of using client-side JavaScript is:

You do not need to create a service reference
You can place the code on a normal .html or .htm page

This disadvantage is that the code does not compile at design-time, and one small typo can cause the page not to work.

The HTML Page In Action

When we run the application and navigate to the page, security (if enabled) is enforced.

The page will display the Products and the edit and delete buttons to any valid user…

But, if a non-administrator tries to insert, edit or delete records, LightSwitch server-side security in the OData feed, will enforce all business rules, and in this case prevent the user from performing the action.

Also, LightSwitch returns end-user understandable messages (you will want to parse the entire response to just show the Message tags) for all validation errors.

DataJs and KnockoutJs

This sample uses DataJs and KnockoutJs (in addition to JQuery).

Here are some links on DataJs and KnockoutJs:

DataJs – This JavaScript library is used to make the OData calls into LightSwitch. You can find documentation and samples at this link. Their Simple CRUD Sample is used as the basis for this article.

KockoutJs – This JavaScript library is used to display the data from DataJs. It is recommended that you go through these interactive tutorials to understand how it works.

LightSwitch OData Security

The sample consists of a page that allows an administrator to perform CRUD operations on the Product table in the Flower Shop application used in the article: Calling LightSwitch 2011 OData Using Server Side Code .

First we need to prevent non-administrators from updating the Products entity (table). We open the Products entity and select the CanUpdate method.

We use the following code:

        partial void FlowerShopProducts_CanUpdate(ref bool result)
        {
            result = this.Application.User.HasPermission(Permissions.SecurityAdministration);
        }

We do the same for the CanDelete and CanInsert methods:

        partial void FlowerShopProducts_CanDelete(ref bool result)
        {
            result = this.Application.User.HasPermission(Permissions.SecurityAdministration);
        }
        partial void FlowerShopProducts_CanInsert(ref bool result)
        {
            result = this.Application.User.HasPermission(Permissions.SecurityAdministration);
        }

The HTML Page

The next thing we do is to switch to File View mode and add the dataJs.htm page and the .js files required to support DataJs and KnockoutJs. We also need to unload the LightSwitch project and add the pages to the project manifest. That process is covered in the article: Calling LightSwitch 2011 OData Using Server Side Code.

The Code

For the top of the dataJa.htm page we use the following code:

<!DOCTYPE html>
<html>
<head>
<title>Productstitle>
    <style type="text/css">

    body {
        color: #444444;
        font-family: Calibri, Verdana;
    }
    .titleSpan {
        font-weight: bold;
    
    }
    .sectionArea {
        border: 1px solid gainsboro;
        padding: 8px;
        margin-bottom: 8px;
        background-color:  #f1edb9;
        width: 50%;
    }
    .ideaBox {
        cursor: pointer;
        padding-top: 8px;
    }
    #modelArea {
        border: 1px solid gainsboro;
        padding: 8px;
        margin-bottom: 8px;
    }
    button, input, textarea { font-family: Calibri, Verdana; font-size: 100%; }

style>
head>
<body>
<h1>Productsh1>
<p>
This page shows how to create / read / update / delete information from a LightSwitch OData service.
p>

Next, we add a DIV that will display a message when the page is busy communicating with LightSwitch:

<div id='newproductArea' class="sectionArea">

Then we put in the Refresh button. This is a normal HTML button except for the KnockoutJs attributes that will trigger the “loadproducts” JavaScript method:

<button id="refreshButton" data-bind="click: loadproducts, disable: communicating">Refreshbutton>

We see that loadproducts is a JavaScript function that calls the LightSwitch OData service:

        // Discards all products and reloads them from the server.
        this.loadproducts = function () {
            makeRequest({ requestUri: serviceUri + "FlowerShopProducts" }, function (data) {
                that.products().splice(0, productsViewModel.products().length);
                $.each(data.results, function (index, value) {
                    that.products.push(productModelToViewModel(value));
                });
            });
        };

This is the makeRequest method that the loadproducts method invokes:

    // Make a request, setting the 'communicating' flag.
    var makeRequest = function (request, success) {
        productsViewModel.communicating(true);
        $("#messageBar").text("Contacting server...").show();
        return OData.request(request, function (data) {
            productsViewModel.communicating(false);
            $("#messageBar").hide();
            success(data);
        }, function (err) {
            productsViewModel.communicating(false);
            $("#messageBar").hide();
            alert("Error while contacting server: " + err.message + " - " + JSON.stringify(err));
        });
    };

The following is the DIV and the template used to display the products:

<div id="productsArea" 
        data-bind="template: { name: 'productTemplate', foreach: products }" 
        class="sectionArea">
div>
<script type="x-jquery-tmpl" id="productTemplate">
<div class='productBox'>
{{if editing}}
  <input type="text" data-bind="value: ProductName" size="80" /><br />
  <textarea data-bind="value: Description" cols="80" rows="4">textarea><br />
  <input type="text" data-bind="value: Price" size="80" /><br />
  <button data-bind="click: saveproduct, disable: communicating">Savebutton>
{{else}}<br />
  <span class='titleSpan'>${ProductName}span><br />
    ${Description}<br />
    $${Price}<br />
  <button data-bind="click: editproduct, disable: communicating">Editbutton>  
{{/if}}
<button data-bind="click: deleteproduct, disable: communicating">Deletebutton>
<br />
div>
script>

(notice there are really two possible templates, a display template and an edit template, separated by the {{if editing}} value)

When the Edit button is clicked, the following code runs and sets the editing flag to true, and the edit template is displayed for the Product:

        // Start editing an product.
        model.editproduct = function () {
            this.editing(true);
        };

When the Save button is pressed this code runs:

        // Save the changes to the product.
        model.saveproduct = function () {
            var that = this;
            var data = productViewModelToModel(that);
            var request = {
                requestUri: data.__metadata.uri,
                headers: { "If-Match": " *" },
                method: "PUT",
                data: data
            };
            makeRequest(request, function (data) {
                that.editing(false);
            });
        };

When the Delete button is pressed this code runs:

        // Deletes this product from the server and removes it from the view model.
        model.deleteproduct = function () {
            var that = this;
            var request = {
                requestUri: that.__metadata.uri(),
                headers: { "If-Match": " *" },
                method: "DELETE"
            };
            makeRequest(request, function (data) {
                productsViewModel.products.remove(that);
            });
        };

When a Product is Inserted, this code runs:

        // Adds the newproduct placeholder to the list and saves to the server.
        this.addNewproduct = function () {
            var request = {
                requestUri: serviceUri + "FlowerShopProducts",
                Accept: "application/json",
                method: "POST",
                data: {
                    Id: that.newproduct.id(),
                    ProductName: that.newproduct.productName(),
                    Description: that.newproduct.description(),
                    Price: that.newproduct.price()
                }
            };
            makeRequest(request, function (newItem) {
                that.newproduct.id("Id");
                that.newproduct.productName("New product");
                that.newproduct.description("Product description");
                that.newproduct.price("Price");
                that.products.push(productModelToViewModel(newItem));
            });
        };

An Important Note About SSL

A production application must run on a webserver that has SSL enabled. Otherwise, a hacker with a packet sniffer can easily get the data and the usernames and passwords of your users who are connecting to your site using public Wi-Fi access points or other unsecure networks.

Still… Use The Silverlight Screens When You Can

Silverlight is not “dead”. In fact it provides the best, most efficient user experience. You will want to use the normal Silverlight screen whenever you can. For example, allow users to place and track orders using a web page, but use the LightSwitch Silverlight screens for customer service, inventory management, and other administration functions.

The advantage of using LightSwitch is that all business rules and security are maintained in one place.

Also See

A Full CRUD LightSwitch JQuery Mobile Application

Calling LightSwitch 2011 OData Using Server Side Code

Using The OData Explorer with LightSwitch OData

Learn How To Make OData Calls In LightSwitch 2011

Accessing Your Visual Studio 2011 LightSwitch Application Using OData

Download Code

The LightSwitch project is available at:

http://lightswitchhelpwebsite.comhttp://lightswitchhelpwebsite.com/Downloads.aspx

More ...

Tags: OData

Using The OData Explorer with LightSwitch OData

webmaster@adefwebserver.com — Thu, 12 Apr 2012 13:43:56 GMT

One tool that you can use to browse your LightSwitch in Visual Studio 2011 Beta OData feeds is LinqPad. Another one is the Silverlight OData Explorer…

Tags: OData