ASP.NET Core ContextMenu Setup

Shield UI ContextMenu for ASP.NET Core is a server-side wrapper component implemented as an ASP.NET Core MVC Helper.

For a detailed guide how to setup Shield UI for your ASP.NET Core project, check out this page.

The ASP.NET Core MVC helper API is a 1:1 mapping of the JavaScript ContextMenu widget configuration, so you only have to get familiar with a single set of configuration options:

<ul id="contextmenu1">
    <li>Cut</li>
	<li>Copy</li>
	<li>Paste</li>
</ul>

<div id="contexttarget" style="margin-left:40px; width:400px; height:300px; display:inline-block; background-color: #e3e3e3;">
    <ul style="margin-top:100px; margin-left:100px;">
        <li>Row One</li>
        <li>Row Two</li>
    </ul>
</div>

<script type="text/javascript">

    $(function () {
        $("#contextmenu1").shieldContextMenu({
            target: "#contexttarget",
            filter: "li",
            cls: "mymenu"
        });
     });

</script>

<style>
      .mymenu {
          width: 50px;
      }
</style>

<ul id="contextmenu1">
    <li>Cut</li>
	<li>Copy</li>
	<li>Paste</li>
</ul>

<div id="contexttarget" style="margin-left:40px; width:400px; height:300px; display:inline-block; background-color: #e3e3e3;">
    <ul style="margin-top:100px; margin-left:100px;">
        <li>Row One</li>
        <li>Row Two</li>
    </ul>
</div>

@(Html.ShieldContextMenu()
          .Name("contextmenu1")
          .Cls("mymenu")
          .Target("#contexttarget")
          .Filter("li"))

<style>
      .mymenu {
          width: 50px;
      }
</style>

To see the configuration options in action, please refer to our online demos.