Copilot prompt sample: m365-asp-dot-net-core-mvc-prompt

CONTRIBUTING.md

@@ -41,7 +41,7 @@ When you submit a new sample, please follow these guidelines:
 
 ### README.md
 
-* You will need to have a `README.md` file for your contribution, which is based on [the provided template](templates/README-template.md) under the `samples` folder. Please copy this template to your project and update it accordingly. Your `README.md` must be named exactly `README.md` -- with capital letters -- as this is the information we use to make your sample public.
+* You will need to have a `README.md` file for your contribution, which is based on [the provided template](template/README-template.md) under the `samples` folder. Please copy this template to your project and update it accordingly. Your `README.md` must be named exactly `README.md` -- with capital letters -- as this is the information we use to make your sample public.
 * You will need to have a screenshot picture of your sample in action in the `README.md` file ("pics or it didn't happen"). The preview image must be located in the `assets` folder in the root of your sample folder.
   * All screen shots must be located in the `assets` folder. Do not point to your own repository or any other external source
 * The README template contains a specific tracking image at the end of the file with an `img` element pointing to `https://m365-visitor-stats.azurewebsites.net/SamplesGallery/pnp-copilot-prompt-your-sample`. This is a transparent image which is used to track how many visits each sample receives in GitHub.

samples/m365-asp-dot-net-core-mvc-prompt/assets/sample.json

@@ -0,0 +1,42 @@
+[
+    {
+      "name": "m365-asp-dot-net-core-mvc-prompt",
+      "source": "pnp",
+      "title": "ASP.Net Core MVC Programming",
+      "shortDescription": "Prompt to generate the desired HTML and apply CSS classes conditionally",
+      "url": "https://github.com/pnp/copilot-prompts/tree/main/samples/m365-asp-dot-net-core-mvc-prompt",
+      "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/copilot-prompts/tree/main/samples/m365-asp-dot-net-core-mvc-prompt",
+      "longDescription": [
+        "This prompt illustrates how to get programming help from CoPilot by giving precise instructions for the desired HTML needed and CSS classes which needs to be applied in ASP.Net Core MVC."
+      ],
+      "creationDateTime": "2024-09-22",
+      "updateDateTime": "2024-09-22",
+      "products": [
+        "Microsoft 365 Copilot"
+      ],
+      "metadata": [
+      ],
+      "thumbnails": [
+        {
+          "type": "image",
+          "order": 100,
+          "url": "https://github.com/pnp/copilot-prompts/raw/main/samples/m365-asp-dot-net-core-mvc-prompt/assets/prompt-query.jpg",
+          "alt": "ASP.Net Core MVC Programming"
+        }
+      ],
+      "authors": [
+        {
+          "gitHubAccount": "arceegomes",
+          "pictureUrl": "https://avatars.githubusercontent.com/u/26863017?v=4",
+          "name": "Arcee Gomes"
+        }
+      ],
+      "references": [
+        {
+          "name": "Microsoft Copilot",
+          "description": "Microsoft Copilot",
+          "url": "https://copilot.microsoft.com/"
+        }
+      ]
+    }
+  ]

samples/m365-asp-dot-net-core-mvc-prompt/readme.md

@@ -0,0 +1,74 @@
+# 💻 Generate desired HTML in ASP.NET MVC using GitHub copilot 🧑‍💻
+
+![Prompt query](./assets/prompt-query.jpg)
+![Demo answer](./assets/prompt-output.jpg)
+
+
+## Summary
+
+This is an ASP.NET MVC Programming Prompt. The purpose is to illustrate the power of precise instructions to get the desired help in programming. 
+
+## Prompt 💡
+
+Help me with the syntax for repeating the below HTML in .Net Core MVC. 
+Each input radio button control should have a unique ID. Use the first letter of each word in the option to generate the ID.
+The label control should be associated with the corresponding input radio button control.
+The css classes for the parent div should be one of these "col-md-1", "col-md-2" and "col-md-3" depending on the size of the label text.
+If the parent div has css class "col-md-1", the innermost div should have class "mb-1" and so on.
+The values for each label should come from this list 
+N/A
+Strongly Agree
+Agree
+Neither Agree nor Disagree
+Disagree
+Strongly Disagree
+
+![Prompt query html](./assets/prompt-query-html.jpg)
+
+### Description ℹ️
+
+Create a desired HTML with CSS classes in ASP.Net Core MVC using Copilot.
+
+## Contributors 👨‍💻
+
+[Arcee Gomes](https://github.com/arceegomes)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|September 22, 2024|Initial release
+
+## Instructions 📝
+
+1. Make sure you have Github copilot extension installed in VSCode and enable it
+2. Create a .json file
+3. Launch GitHub copilot chat "command"+ i or "ctrl" +i
+4. Copy the above prompt and paste and select `Enter`
+5. If the generated card looks good, select `Accept`
+
+### Improvise Usage 🚀
+
+Expand the field description and ask copilot to also make it visibly appealing with formatting and emojis
+
+## Prerequisites
+
+* [Copilot for Microsoft 365](https://developer.microsoft.com/microsoft-365/dev-program)
+
+## Help
+
+We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+You can try looking at [issues related to this sample](https://github.com/pnp/copilot-prompts/issues?q=label%3A%22sample%3A%20m365-asp-dot-net-core-mvc-prompt%22) to see if anybody else is having the same issues.
+
+If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/copilot-prompts/issues/new).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/copilot-prompts/issues/new).
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+![](https://m365-visitor-stats.azurewebsites.net/SamplesGallery/copilotprompts-m365-asp-dot-net-core-mvc-prompt)
+
+