how to get items from menu in html - c#

I've been trying to get menu item from menu-id="2" to put some JavaScript in each item in it, but unfortunately it doesn't work.
I would appreciate some help.
<section id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-mdf left">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Information</h5>
<vc:menu menu-id="2"></vc:menu>
</div>
</div>
</div>
</section>

Related

What can I use to access a custom form from the Default.aspx page? (ASP.NET / C#)

What I'm trying to do is to save a custom form and after that be able to open it from the default page in for of a button, I have a form to create the custom forms, meaning, that in this page you are meant create a new .aspx page to be accessed through the default page, and i don't know how to create nor save it and I don't also know how to modify or update the default page to be able to access the custom .aspx pages saved.
This is what is meant to be on each created .aspx file (This is an example, this is generated on one of these pages)
<div id="MainContent_div1" class="panel">
<div id="Section 1" class="panel panel-warning">
<div class="panel-heading">Example</div>
<div class="panel-body">
<h3>Example</h3>
<p>Sample description</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test1">Test1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test2">Test2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test3">Test3</a>
</div>
</div>
</div>
</div>
<br>
<div id="Section Test1" class="panel panel-warning">
<div class="panel-heading"> Sample Section 1</div>
<div class="panel-body">
<h3>Sample Section 1</h3>
<p>Sample description 2</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample1">Sample1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample2">Sample2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample3">Sample3</a>
</div>
</div>
</div>
</div>
</div>
Any help, edits or suggestions will be much appreciated.

Inconsistent Appearance in ASP.Net

I'm having an issue with one of my webpages in my ASP.NET MVC Application. I have the HTML in Webstorm, and when I open it from there, it looks as intended. When I then copy over to the View in Visual Studio all of the Form controls are a mess.
Even if I directly copy everything from Webstorm into the _layout.cshtml, leaving only the script and style links (and RenderBody();) it's still completely off.
The Form itself is just copied from getbootstrap.com so it should be just fine. I have no clue what the issue could be, I hope someone has an idea.
Link so you can see the issue: https://imgur.com/a/bxFrr3P
Markup from Webstorm:
<div id="wrapper" >
<div id="content-wrapper" class="d-flex flex-column ">
<!-- Main Content -->
<div id="content" style="width: 100%;">
<hr>
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Page Title</h1>
</div>
<div class="col-xl col-md mb-4 " >
<div class="card shadow h-100 py-2 card-background" >
<div class="card-body" style="padding: 0px;">
<div class="box-part text-center mt-2 mr-2 mb-2 ml-2 m-3">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Sounds like bootstrap isn't loading.
I would reinstall bootstrap and/or check your package references.

How to increase the width of ASP.NET MVC Select tag helper inside form

The width of the Select tag helper in the following veiw remains fixed no matter what value I change in its style attribute style="width:10000px;". Whether it's set to 10px or 10000px the width remains the same. On the other hand, in the same example below, the input tag ProjectNumber along with the Instructions message (correctly) occupies the entire width of the computer screen. Note 1: It's a multi select dropdown (but I think that should not mater). 2. I'm using VS2015-Update3 that comes with built-in Bootstrap functionality:
<div class="row">
<div class="col-sm-3">
#await Component.InvokeAsync("MainLeftMenu")
</div>
<div class="col-md-9">
<form id="target" asp-controller="myTest" asp-action="myAction" method="post" class="form-horizontal">
<div class="form-group">
<label asp-for="SelectedIDs" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="SelectedIDs" asp-items="Model.myList" style="width:10000px;"></select>
</div>
</div>
<div class="form-group">
<label asp-for="ProjectNumber" class="col-md-2 control-label"></label>
<div class="col-md-2">
<input asp-for="ProjectNumber" class="form-control" />
<span asp-validation-for="ProjectNumber" class="text-danger"></span>
</div>
<div class="col-md-5">Instructions: Add number in the format such as: ABC-123-xyz-000</div>
</div>
<button type="submit" class="btn btn-default">Submit Test</button>
</form>
</div>
</div>
In bootstrap for the select in form you can add class="form-control" like input type text.
For reference: http://getbootstrap.com/css/#forms
Issue resolved by adding style="min-width:700px;overflow:auto;" to the select tag helper. You can change 700px to whatever width you need.

Post form to a different controller action in mvc app hosted in microsoft azure

I have a simple form that posts to a different controller action, on the my development machine it works fine, however after publishing the app to Microsoft azure app service it blow up with the following error
502 - Web server received an invalid response while acting as a gateway or proxy server.
<form action="/Contractors/MyTasks/EditTaskCompletionTaskSheet/" enctype="multipart/form-data" method="POST" class="form-horizontal">
<div class="modal-body">
<div class="panel panel-default">
<div class="form-group">
<label class="col-sm-2 control-label" for="ContractorNotes">Notes</label>
<div class="col-sm-8">
<textarea id="ContractorNotes" name="ContractorNotes" class="form-control" style="width: 100%; height: 130px;"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="ContractorAttachments">Attachments</label>
<div class="col-md-8">
<input type="file" id="ContractorAttachments" name="ContractorAttachments" multiple="multiple"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, .pdf, .doc, .docx" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-4 text-left">
<button data-dismiss="modal" class="rounded-button" type="button">Close</button>
</div>
<div class="col-sm-8 text-left sm-text-right">
<input type="submit" id="EditfinishTaskButton value="SaveChanges" class="rounded-button rounded-green" />
</div>
</div>
</div>
</form>
Any thoughts?

Twitter Bootstrap not formatting as I expected

I am trying to format a page where I have an image, then NEXT to it, a heading... and then under the heading, I want some descriptive text.
I am trying this:
<div class="panel">
<div class="panel-heading">
<div class="row">
<div class="col-xl-2">
<img src="~/images/user_error.png" />
</div>
<div class="col-xl-10">
<h1>#Model.Heading</h1>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
Hello
</div>
</div>
</div>
But the image stays on it's own row. How can I get the heading NEXT to the image?
<div class="col-xs-2">
Here is a jsfiddle for people to see the difference: http://jsfiddle.net/692UC/

Categories

Resources