Can I use an asp.net web form in plugin

March 10, 2015

This JavaScript code should be in an .html file, NOT in a .cs file (Just to make sure). That means that it has nothing to do with .dll files in your project. Just to clarify that.

Can you please paste in your ENTIRE configPage.html? Or if you have broken things out in multiple files show us the .html and the .js

The code you supplied looks like you skipped some parts. If you truly are running .filter() with a blank function that would cause things to not work

Edit: You wouldn't happen to be working in git or have any easy way to collaborate, would you? It might be easier for me to just jump in and get my hands dirty, if that's what you would prefer.

Edited March 10, 2015 by TedA

March 10, 2015

@@chef

This JavaScript code should be in an .html file, NOT in a .cs file (Just to make sure). That means that it has nothing to do with .dll files in your project. Just to clarify that.

Can you please paste in your ENTIRE configPage.html? Or if you have broken things out in multiple files show us the .html and the .js

The code you supplied looks like you skipped some parts. If you truly are running .filter() with a blank function that would cause things to not work

Edit: You wouldn't happen to be working in git or have any easy way to collaborate, would you? It might be easier for me to just jump in and get my hands dirty, if that's what you would prefer.

I'm not working on git, but I can. I am embarrassingly new to web based coding.

I was under the impression that one should be able to access the properties in their PluginConfiguration.vb/cs file with javascript in the html UI.

<!DOCTYPE html>

<html>

<head>
    <title>Vera Smart Home Automation Control</title>
</head>
<body style="height: 379px">
    <div data-role="page" class="page type-interior veraConfigurationPage">
    <div class="content-primary">
        <div>
            <h1 class="pageTitle" style="display: inline-block;">
                Vera Smart Home Automation Control
            </h1>

             
            <h4>Choose a media browser client from the list below to begin to add functionality with Vera home automation devices.
            </h4>
          
             
            
            <form id="vshcMainPluginConfigurationForm">
                <ul class="ulForm ui-listview" data-role="listview">

                    <li class="ui-li-static ui-body-inherit ui-first-child">
                        <label for="clientName">Client:</label>
                        <select name="clientName" id="clientName">
                            <option value="MBT">Media Browser Theatre</option>
                            <option value="MBC">Media Browser Classic</option>
                            <option value="Roku">Roku</option>
                            <option value="Dashboard">Dashboard</option>
                            <option selected></option>
                        </select>
                    </li>

                    <li class="ui-li-static ui-body-inherit ui-first-child">
                        <button class="ui-btn ui-btn-b ui-shadow ui-corner-all" type="button" data-theme="b" onclick="AddProfileToList()">Add</button>

                         

                            <div style="vertical-align: middle;" id="newClientList">
                                <ul data-role='listview' data-inset='true' data-split-icon='delete' id='clientProfiles'>
                                    <script type="text/javascript">
                                        function AddProfileToList() {
                                            var e = document.getElementById("clientName");
                                            strClientName = e.options[e.selectedIndex].text;
                                            var page = $($.mobile.activePage);

                                            var html = "<li>";

                                            if (strClientName === "Dashboard") {
                                                //Dashboard Config Link
                                                html += "<a href='";
                                                var hrefdash = Dashboard.getConfigurationPageUrl("DashboardConfigPage");
                                                html += hrefdash + "'>Dashboard</a><a href='#' data-icon='delete' class='btnDeletePropfile' id='Dashboard' onmouseup='deleteProfile()'></a></li>";

                                            } else if (strClientName === "Media Browser Classic") {
                                                //MBC Config Link
                                                html += "<a href='";
                                                var hrefMbc = Dashboard.getConfigurationPageUrl("MBCConfigPage");
                                                html += hrefMbc + "'>Media Browser Classic</a><a href='#' data-icon='delete' class='btnDeletePropfile' id=MBC' onmouseup='deleteProfile()'></a></li>";
                                            }

                                            $("#clientProfiles", page).prepend(html).listview('refresh');

                                            Dashboard.hideLoadingMsg();
                                        }

                                        function deleteProfile() {
                                            $(document).ready(function () {
                                                $(".btnDeletePropfile").on("click", function () {
                                                    $(this).parent().remove();
                                                });
                                            });
                                        }
                                    </script>
                                </ul>
                            </div>
                    </li>
                </ul>
            </form>
        </div>
    </div>

        <script type="text/javascript">
            $('.veraConfigurationPage').on("pageshow", function (event) {
                alert("Hello");
                var mainPluginConfigurationPage = {
                    pluginUniqueId: "5a7bb1a0-15d6-4af4-9b22-866cddf39547"
                };
                var mConfig = null;
                ApiClient.getPluginConfiguration(mainPluginConfigurationPage.pluginUniqueId).done(function (config) {
                    mainPluginConfigurationPage.config = config;
                    config.ClientName = "This is a test";
                    mConfig = config.Options.filter(function (c) {
                        config.Options.push(mConfig);
                        
                    });

                });

            });
            ApiClient.updatePluginConfiguration(mainPluginConfigurationPage.pluginUniqueId, config).done(Dashboard.processPluginConfigurationUpdateResult);
        </script>
    </div>
</body>





</html>

I have dropbox, I could zip up the entire solution.

Edited March 10, 2015 by chef

March 10, 2015

I know your JS is sort of all over the place but that jQuery you copied from me you put in the wrong place. When I said to replace the delete function I meant completely remove that function and replace it just with the code I gave.

function deleteProfile() {
   $(document).ready(function () {
      $(".btnDeletePropfile").on("click", function () {
         $(this).parent().remove();
      });
   });
}

should be just

$(document).ready(function () {
  $(".btnDeletePropfile").on("click", function () {
     $(this).parent().remove();
  });
});

although if you want make it a function because you need to attach it to items after load you could make the function like this:

function deleteProfile() {
  $(this).parent().remove();
}

March 10, 2015

That is fixed now thanks techy.

If I could write the properties back to the configuration file, then the media browser side of the plugin would be complete, and just in time for my vera device to show up tomorrow to add that api into the mix.

March 10, 2015

well right off the bat, none of the examples in the plugin repo have a script tag stuck in the middle of the page markup, and none of them use document.ready because you need to use the jquery mobile events. so it appears I either didn't review a pull request closely enough, or the examples just aren't being followed.

nonetheless i would refer to the new FolderSync plugin.it puts all of it's functions inside a nice and neat closure, and uses the right jquery mobile events for different actions.

March 10, 2015

document.ready may have been me. I was trying to quickly show some jquery to chef.

March 10, 2015

ok, yea use pageinit to wire events, pageshow to fill data. if you use document.ready it will only fire when you refresh the page in the browser, but won't fire when you navigate into the page from elsewhere into the web interface.

March 10, 2015

Yes, it was a mess. I fixed it. I organized the code better:

<!DOCTYPE html>

<html>

<head>
    <title>Vera Smart Home Automation Control</title>
</head>
<body style="height: 379px">
    <div data-role="page" class="page type-interior veraConfigurationPage">
        <div class="content-primary">
            <div>
                <h1 class="pageTitle" style="display: inline-block;">
                    Vera Smart Home Automation Control
                </h1>

                 
                <h4>Choose a media browser client from the list below to begin to add functionality with Vera home automation devices.
                </h4>

                 
            
                <form id="vshcMainPluginConfigurationForm">
                    <ul class="ulForm ui-listview" data-role="listview">

                        <li class="ui-li-static ui-body-inherit ui-first-child">
                            <label for="clientName">Client:</label>
                            <select name="clientName" id="clientName">
                                <option value="MBT">Media Browser Theatre</option>
                                <option value="MBC">Media Browser Classic</option>
                                <option value="Roku">Roku</option>
                                <option value="Dashboard">Dashboard</option>
                                <option selected></option>
                            </select>
                        </li>

                        <li class="ui-li-static ui-body-inherit ui-first-child">
                            <button id="addButton" class="ui-btn ui-btn-b ui-shadow ui-corner-all" type="button" data-theme="b" onclick="AddProfileToList()">Add</button>

                             

                            
                            <div style="vertical-align: middle;" id="newClientList">
                                <ul data-role='listview' data-inset='true' data-split-icon='delete' id='clientProfiles'>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        function AddProfileToList() {

            var e = document.getElementById("clientName");

            var strClientName = e.options[e.selectedIndex].text;

            var page = $($.mobile.activePage);

            var html = "<li>";


            if (strClientName === "Dashboard") {

                //Dashboard Config Link
                html += "<a href='";
                var hrefdash = Dashboard.getConfigurationPageUrl("DashboardConfigPage");
                html += hrefdash + "'>Dashboard</a><a href='#' data-icon='delete' class='btnDeleteProfile' id='Dashboard' onmouseup='deleteProfile()'></a></li>";

            } else if (strClientName === "Media Browser Classic") {
                //MBC Config Link
                html += "<a href='";
                var hrefMbc = Dashboard.getConfigurationPageUrl("MBCConfigPage");
                html += hrefMbc + "'>Media Browser Classic</a><a href='#' data-icon='delete' class='btnDeleteProfile' id=MBC' onmouseup='deleteProfile()'></a></li>";
            }

            $("#clientProfiles", page).prepend(html).listview('refresh');

        }

        function deleteProfile() {
            $(document).ready(function () {
                $(".btnDeletePropfile").on("click", function () {
                    $(this).parent().remove();
                });
            });
        }
    </script>

    <!--<script type="text/javascript">

         var mainPluginConfigurationPage = {
             pluginUniqueId: "5a7bb1a0-15d6-4af4-9b22-866cddf39547",
             config: null
         };

         $('.veraConfigurationPage').on('pageshow', function () {
             alert("Hello");
             ApiClient.getPluginConfiguration(mainPluginConfigurationPage.pluginUniqueId).done(function (config) {
                 
                 mainPluginConfigurationPage.config = config;
                 mainPluginConfigurationPage.config.ClientName = "This is a test";


             });
             ApiClient.updatePluginConfiguration(mainPluginConfigurationPage.pluginUniqueId, mainPluginConfigurationPage.config).done(Dashboard.processPluginConfigurationUpdateResult);
         });
        
     </script>-->

</body>
</html>

It is much better now.

But as you can see in the commented out script parts in the bottom of the body, I can't seem to access the properties from my PluginConfiguration class.

Be it that I have only been coding javascript for two days, I have checked for scope issues in my code, and ( I noticed Javascript is caseSensitive, so I have rechecked all my names to make sure they have been spelled the same as eachother.

Edited March 10, 2015 by chef

March 10, 2015

So there are a couple things broken off the bat...

I have no way of testing this, but it should give you a starting point in a better format:

<!DOCTYPE html>
<html>
<head>
    <title>Vera Smart Home Automation Control</title>
</head>
<body>
    <div data-role="page" class="page type-interior pluginConfigurationPage veraConfigurationPage">
        <div data-role="content">
            <div class="content-primary">

                <div class="readOnlyContent">

                    <p>Choose a media browser client from the list below to begin to add functionality with Vera home automation devices.</p>

                </div>

                 <form id="vshcMainPluginConfigurationForm">
                    <ul class="ulForm ui-listview" data-role="listview">

                        <li class="ui-li-static ui-body-inherit ui-first-child">
                            <label for="clientName">Client:</label>
                            <select name="clientName" id="clientName">
                                <option value="MBT">Media Browser Theatre</option>
                                <option value="MBC">Media Browser Classic</option>
                                <option value="Roku">Roku</option>
                                <option value="Dashboard">Dashboard</option>
                                <option selected></option>
                            </select>
                        </li>

                        <li class="ui-li-static ui-body-inherit">
                            <button id="addButton" class="ui-btn ui-btn-b ui-shadow ui-corner-all" type="button" data-theme="b" onclick="AddProfileToList()">
                                Add
                            </button>

                            <div style="vertical-align: middle;" id="newClientList">
                                <ul data-role='listview' data-inset='true' data-split-icon='delete' id='clientProfiles'>
                                </ul>
                            </div>
                        </li>

                        <li class="ui-li-static ui-body-inherit">
                            <button type="submit" data-theme="b">Save</button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>

        <script type="text/javascript">
            (function() {
                var pluginId = "5a7bb1a0-15d6-4af4-9b22-866cddf39547",
                    clientSelect = $('#clientName');

                function getClientHtml(client) {
                    var clients = {
                            "MBT": { config: "", display: "Media Browser Theatre" },
                            "MBC": { config: "MBCConfigPage", display: "Media Browser Classic" },
                            "Roku": { config: "", display: "Roku" },
                            "Dashboard": { config: "DashboardConfigPage", display: "Dashboard" },
                        },
                        html = "";

                    html += '<li data-client="' + client + '" class="clientProfile">';
                    html += '<a href="' + Dashboard.getConfigurationPageUrl(clients[client].config) + '">';
                    html += clients[client].display;
                    html += '</a>';
                    html += '<a href="#" data-icon="delete" class="btnDeleteProfile"></a>';
                    html += '</li>';

                    return html;
                }
                function loadPageData(page, config) {
                    if (config.Client)
                        clientSelect.val(config.Client);
                    if (config.Profiles && config.Profiles.length) {
                        config.Profiles.forEach(function (c,i,a) {
                            $('#clientProfiles', page).prepend(getClientHtml(c)).listview('refresh');
                        });
                    }
                }
                function loadConfig(page) {
                    ApiClient.getPluginConfiguration(pluginId).done(function (config) {
                        loadPageData(page, config);
                        Dashboard.hideLoadingMsg;
                    });
                }

                $('.veraConfigurationPage').on('pageinit', function (event) {
                    var page = this;
                    $('#addButton', page).on('click', function() {
                        var client = clientSelect.val();
                        $('#clientProfiles', page).prepend(getClientHtml(client)).listview('refresh');
                    });

                    $('#clientProfiles', page).on('click', '.btnDeleteProfile', function() {
                        // This is a delegated event handler. It allows us to bind an event to the 
                        // element that exists now (#clientProfiles) but only have the event fire if the 
                        // user clicks an element that we add later ('.btnDeleteProfile')
                        // Read more about it here: http://api.jquery.com/on/#direct-and-delegated-events
                        $(this).parent().remove();
                    });
                }).on('pageshow', function (event) {
                    var page = this;
                    loadConfig(page);
                });

                $('.vshcMainPluginConfigurationForm').off('submit.plugin').on('submit.plugin', function (e) {
                    Dashboard.showLoadingMsg();
                    var form = this;
                    var page = $(form).parents('.page');
                    var config = {
                        Client: clientSelect.val(),
                        Profiles: $('.clientProfile', page).map(function() {
                                        return this.getAttribute('data-client');
                                   }).get()
                    }

                    ApiClient.updatePluginConfiguration(pluginId, config).done(function () {
                        loadConfig(page);
                    });
                    return false;
                })
            })();
        </script>

    </div>
</body>
</html>

Would you please try that out and tell me if there are any errors in the browser console? (F12 if you are in WIndows, and then go to the console tab. Keep an eye out for red text)

Also this assumes your PluginConfiguration.cs would look something like this:

public class PluginConfiguration : BasePluginConfiguration
{
    public string Client { get; set; }
    public string[] Profiles { get; set; }

    public PluginConfiguration()
    {
        Client = String.Empty;
        Profiles = new string[] { };
    }
}

Edited March 10, 2015 by TedA

March 10, 2015

ok, yea use pageinit to wire events, pageshow to fill data. if you use document.ready it will only fire when you refresh the page in the browser, but won't fire when you navigate into the page from elsewhere into the web interface.

@@Luke just a heads up, if that is accurate there is a typo in FolderSync:

$('.folderSyncConfigurationPage').on('pageshow', function (event) {
    var page = this;
    $('#chkEnableAllUsers', page).on('change', function () {
        if (this.checked) {
            $('.userAccessListContainer', page).hide();
        } else {
            $('.userAccessListContainer', page).show();
        }
    });
}).on('pageshow', function (event) {
    var page = this;
    loadConfig(page);
});

Line 211 should be .on('pageinit'

https://github.com/MediaBrowser/MediaBrowser.Plugins/blob/master/FolderSync/Configuration/configPage.html

March 10, 2015

@@TedA

Unfortunately, the properties are still not serializing to the configuration XML.

In the html code, the variable "Dashboard" is used to create the item in the "clientName" list, which in turn causes issue when we call "Dashboard.getConfigurationPageUrl"

So I changed it to "WebClient" instead. This fixes the declaration problem.

There seems to be issues with JS files:

 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILEDjquery.mobile-1.4.5.js:15451 chrome.cast.ApiBootstrap_.isExtensionInstalled_jquery.mobile-1.4.5.js:15451 chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_jquery.mobile-1.4.5.js:15451 chrome.cast.ApiBootstrap_.findInstalledExtension_jquery.mobile-1.4.5.js:15451 (anonymous function)jquery.mobile-1.4.5.js:15451 (anonymous function)
jquery.mobile-1.4.5.js:15451 GET chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js net::ERR_FAILED
jquery.mobile-1.4.5.js:15451 GET chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js net::ERR_FAILED
jquery.mobile-1.4.5.js:15451 GET chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js net::ERR_FAILED
jquery.mobile-1.4.5.js:15451 GET chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js net::ERR_FAILED
jquery.mobile-1.4.5.js:15451 No cast extension found
jquery.mobile-1.4.5.js:1248 GET http://localhost:8096/Branding/Css

The new 'save' button throws an error "error show form".

here is the consoles error from pressing the save button:

GET http://localhost:8096/web/ConfigurationPage?clientName=WebClient 422 (InvalidOperationException)

Edited March 10, 2015 by chef

March 10, 2015

Holy $h#t! For joy! I got it to freaking serialize to XML. I changed the "submit.page" event in the save button to "click", and changed the button type to "Button".

And what do you know it serialized... seriously... why?

Edited March 10, 2015 by chef

March 10, 2015

Holy $h#t! For joy! I got it to freaking serialize to XML. I changed the "submit.page" event in the save button to "click", and changed the button type to "Button".

And what do you know it serialized... seriously... why?

If you copied the code supplied and the 'submit.plugin' event on the FORM (not the button) was not working, then I would try 'submit' rather than 'click'. Attaching a click handler to the entire form means the user can click anywhere. Not what you want. I'm wondering if you copied, or if you re-typed with some modifications?

March 10, 2015

Thank you so much for taking the time.

I see now that is was about creating a new config object (or variable) with the properties I wanted to serialize, and then using the "updatePluginConfiguration" call to save the data.

It makes perfect sense now that I see it.

Now I've got to work on getting the Configuration Properties in the right order for the Client app which listens for Events from the server, and triggers Home Automation.

Edited March 10, 2015 by chef

March 10, 2015

Great. Glad to hear it's working for you.

Edit: Removed a question that was directed at Luke. Sorry if that was unclear who it was intended for!

Edited March 11, 2015 by TedA

March 10, 2015

Great. Glad to hear it's working for you. I wonder if we should put together a plugin template in the MediaBrowser.Plugins that would give people an up-to-date starting point with the best approach to things like the config page...

I don't think you need to ask Chef if that should happen

March 11, 2015

I found a bug in the script. I think it has to do with where the addButton is and how it might be bound to the form.

If I press the add button, two items of the same name are added to the list, from there it will snow ball until the list has doubled, quadrupled and so forth with the same name.

And yes! After the last three days of crash coarse JavaScript and jquery, I will most definitely help to put plugin descriptions into lamens terms.

And I have vb.net examples too. That language is always forgotten.

Edited March 11, 2015 by chef

Can I use an asp.net web form in plugin

Recommended Posts

TedA 36

Link to comment

Share on other sites

chef 3745

Link to comment

Share on other sites

techywarrior 688

Link to comment

Share on other sites

chef 3745

Link to comment

Share on other sites

Luke 37049

Link to comment

Share on other sites

techywarrior 688

Link to comment

Share on other sites

Luke 37049

Link to comment

Share on other sites

chef 3745

Link to comment

Share on other sites

TedA 36

Link to comment

Share on other sites

TedA 36

Link to comment

Share on other sites

chef 3745

Link to comment

Share on other sites

chef 3745

Link to comment

Share on other sites

TedA 36

Link to comment

Share on other sites

chef 3745

Link to comment

Share on other sites

TedA 36

Link to comment

Share on other sites

techywarrior 688

Link to comment

Share on other sites

chef 3745

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Activity