asp.net responsive bootstrap | C# Online Compiler

asp.net responsive bootstrap by gustherobit

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		[Required]
		[MinLength(10)]
		[MaxLength(100)]
		[Display(Name = "Ask Magic 8 Ball any question:")]
		public string Question
		{
			get;
			set;
		}

		//See here for list of answers
		public string Answer
		{
			get;
			set;
		}
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        [Required]
        [MinLength(10)]
        [MaxLength(100)]
        [Display(Name = "Ask Magic 8 Ball any question:")]
        public string Question
        {
            get;
            set;
        }
​
        //See here for list of answers
        public string Answer
        {
            get;
            set;
        }
    }
}

<!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">
<head runat="server">
    <meta name="viewport" http-equiv="X-UA-Compatible"
        content="width=device-width, initial scale=1.0" />
	<style type="text/css">
		.tableint {
    		font-size: 15px;
    		font-family: Estrangelo Edessa, Verdana;
    		border: Solid 1px #666666;
    		border-collapse: collapse;
    		color: Black;
		}
		.thint {
    		background-color: #EE8322;
    		color: Black;
    		font-weight: bold;
    		font-size: 14px;
    		border: solid 1px #666666;
    		border-collapse: separate;
    		font-variant: small-caps;
    		margin-bottom: 5px;
		}
		.textboxint {
    		background-repeat: repeat-x;
    		border: 1px solid #d1c7ac;
    		font-size: 14px;
    		border-style: inset;
    		margin-right: 5px;
    		margin-bottom: 5px;
    		margin-top: 5px;
    		font-family: Estrangelo Edessa,Verdana;
    		color: Black;
			width: 175px;
		}
		.dropdownint {
    		background-repeat: repeat-x;
    		border: 1px solid #d1c7ac;
    		font-size: 12px;
    		border-style: inset;
    		margin-right: 5px;
    		margin-bottom: 5px;
    		margin-top: 5px;
    		font-family: Estrangelo Edessa,Verdana;
    		color: Black;
			width: 175px;
		}
		.buttonint {
    		margin: 5px;
    		font-family: Estrangelo Edessa,Verdana;
    		font-size: 14px;
    		background-color: #EE8322;
			color: Black;
    		text-align: center;
    		border-top-style: groove;
    		border-left-style: groove;
    		border-right-color: Black;
    		border-bottom-color: Black;
    		height: 22px;
		}
    		.buttonint:hover {
        		font-family: Estrangelo Edessa,Verdana;
        		font-size: 14px;
        		background-color: #FFFFCC;
        		color: #006699;
        		margin: 5px;
    		}
		
		#MainContent_ctl00 > h1 {
  			text-align: center;
		}
	</style>
    <title>ASP.NET Responsive Bootstrap</title>

    <!-- Bootstrap and Custom CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- Scripts -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"
  		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  		crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body style="min-width: 988px; background: none;">
    <form id="Form1" runat="server">
        <div id="wrapper">
            <div class="d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top"
				style="background-color:#003366;">
                <div id="uppnl">
                    <nav class="navbar navbar-expand-lg navbar-dark">
                        <button class="navbar-toggler" aria-expanded="false" aria-controls="navbarSupportedContent" aria-label="Toggle navigation" type="button" data-target="#navbarSupportedContent" data-toggle="collapse">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-md-auto">
                                <li class="nav-item dropdown flex-fill">
                                    <a class="nav-link dropdown-toggle" id="btnGoogle" role="button" aria-expanded="false" aria-haspopup="true" style="color:white; text-decoration:none;" href="#" data-toggle="dropdown">Google</a>
                                    <div class="dropdown-menu hs-dropdown-menu" id="ddlGoogle" aria-labelledby="btnGoogle" href="#">
                                      	<a class="dropdown-item" href="https://google.com">Google1</a>
                                        <a class="dropdown-item" href="https://google.com">Google2</a>
                                        <a class="dropdown-item" href="https://google.com">Google3</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown flex-fill">
                                    <a class="nav-link dropdown-toggle" id="btnBing" role="button" aria-expanded="false" aria-haspopup="true" style="color:white; text-decoration:none;" href="#" data-toggle="dropdown">Bing</a>
                                    <div class="dropdown-menu hs-dropdown-menu" id="ddlBing" aria-labelledby="btnBing">
                                      	<a class="dropdown-item" href="https://bing.com">Bing1</a>
                                       	<a class="dropdown-item" href="https://bing.com">Bing2</a>
                                       	<a class="dropdown-item" href="https://bing.com">Bing3</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown flex-fill">
                                    <a class="nav-link dropdown-toggle" id="btnDdg" role="button" aria-expanded="false" aria-haspopup="true" style="color:white; text-decoration:none;" href="#" data-toggle="dropdown">Duckduckgo</a>
                                    <div class="dropdown-menu hs-dropdown-menu" id="ddlDdg" aria-labelledby="btnDdg">
                                      	<a class="dropdown-item" href="https://duckduckgo.com">DDG1</a>
                                        <a class="dropdown-item" href="https://duckduckgo.com">DDG2</a>
                                        <a class="dropdown-item" href="https://duckduckgo.com">DDG3</a>
									<div>
								</li>
                            </ul>
                        </div>
                    </nav>
				</div>
            </div>
            
            <div class="container mt-5" style="position:absolute;"><!-- d-flex justify-content-center flex-md-rows align-items-center -->
                <div id="content" class="row" style="display:flex; justify-content:center;"> <!--style="margin-left:auto;margin-right:auto;padding-top: 1rem;">-->
                     <div id="divContMain" class="align-self-center" style="width: inherit;">
                        <div id="contentUPanel">
							<div id="MainContent_ctl00">
                				<br>
                				<h1>Purchasing Requisitions</h1>
                				<br>
                				<div>
                    				<table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
	                        			<tbody>
										<tr>
	                            			<td align="center" class="thint" colspan="2">Filter</td>
	                        			</tr>
	                        			<tr>
	                            			<td align="left" style="width: 50%">Request Start:</td>
	                            			<td align="left" style="width: 50%">
	                                			<input class="textboxint" type="text"></td>
        	                			</tr>
            	            			<tr>
	                            			<td align="left" style="width: 50%">Request End:</td>
	                            			<td align="left" style="width: 50%">
    	                            			<input class="textboxint" type="text"></td>
    	                    			</tr>
    	                    			<tr>
    	                        			<td align="left" style="width: 50%">Part Number:</td>
    	                        			<td align="left" style="width: 50%">
    	                            			<input class="textboxint" type="text"></td>
    	                    			</tr>
    	                    			<tr>
    	                        			<td align="left" style="width: 50%">Account:</td>
    	                        			<td align="left" style="width: 50%">
    	                            			<input class="textboxint" type="text"></td>
    	                    			</tr>
    	                    			<tr>
       	                     				<td align="left" style="width: 50%">Vendor No:</td>
       	                     				<td align="left" style="width: 50%">
                                				<input class="textboxint" type="text"></td>
	                        			</tr>
	                        			<tr>
    	                        			<td align="left" style="width: 50%">Vendor Name:</td>
        	                    			<td align="left" style="width: 50%">
            	                    			<input class="textboxint" type="text"></td>
                	        			</tr>
	                        			<tr>
    	                        			<td align="center" colspan="2">
        	                        			<input class="buttonint" type="submit" value="Search"></td>
    	                    			</tr>
	                    			</tbody>
								</table>
    	            		</div>
        	        		<br>
            	    		<div class="container d-flex justify-content-center flex-md-rows align-items-center" style="overflow-x: visible;">
                	    		<table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;" border="1" rules="all" cellspacing="0" cellpadding="5">
									<tbody>
										<tr align="center" class="thint">
											<td>Row1</td>
											<td>Row2</td>
											<td>Row3</td>
										</tr>
										<tr align="center" class="gridview">
											<td>Data1</td>
											<td>Data2</td>
											<td>Data3</td>
										</tr>
										<tr align="center" class="gridview" style="background-color:#FFE1CD;">
											<td>Data1</td>
											<td>Data2</td>
											<td>Data3</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
    </form>
</body>
</html>

View

 
<!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">
<head runat="server">
    <meta name="viewport" http-equiv="X-UA-Compatible"
        content="width=device-width, initial scale=1.0" />
    <style type="text/css">
        .tableint {
            font-size: 15px;
            font-family: Estrangelo Edessa, Verdana;
            border: Solid 1px #666666;
            border-collapse: collapse;
            color: Black;
        }
        .thint {
            background-color: #EE8322;
            color: Black;
            font-weight: bold;
            font-size: 14px;
            border: solid 1px #666666;
            border-collapse: separate;
            font-variant: small-caps;
            margin-bottom: 5px;
        }
        .textboxint {
            background-repeat: repeat-x;
            border: 1px solid #d1c7ac;
            font-size: 14px;
            border-style: inset;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-top: 5px;
            font-family: Estrangelo Edessa,Verdana;
            color: Black;
            width: 175px;
        }
        .dropdownint {
            background-repeat: repeat-x;
            border: 1px solid #d1c7ac;
            font-size: 12px;
            border-style: inset;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-top: 5px;
            font-family: Estrangelo Edessa,Verdana;
            color: Black;
            width: 175px;
        }
        .buttonint {
            margin: 5px;
            font-family: Estrangelo Edessa,Verdana;
            font-size: 14px;
            background-color: #EE8322;
            color: Black;
            text-align: center;
            border-top-style: groove;
            border-left-style: groove;
            border-right-color: Black;
            border-bottom-color: Black;
            height: 22px;
        }
            .buttonint:hover {
                font-family: Estrangelo Edessa,Verdana;
                font-size: 14px;
                background-color: #FFFFCC;
                color: #006699;
                margin: 5px;
            }
        
        #MainContent_ctl00 > h1 {
            text-align: center;
        }
    </style>
    <title>ASP.NET Responsive Bootstrap</title>
​
    <!-- Bootstrap and Custom CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
​
    <!-- Scripts -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
​
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body style="min-width: 988px; background: none;">
    <form id="Form1" runat="server">
        <div id="wrapper">
            <div class="d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top"
                style="background-color:#003366;">
                <div id="uppnl">
                    <nav class="navbar navbar-expand-lg navbar-dark">
                        <button class="navbar-toggler" aria-expanded="false" aria-controls="navbarSupportedContent" aria-label="Toggle navigation" type="button" data-target="#navbarSupportedContent" data-toggle="collapse">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-md-auto">
                                <li class="nav-item dropdown flex-fill">
                                    <a class="nav-link dropdown-toggle" id="btnGoogle" role="button" aria-expanded="false" aria-haspopup="true" style="color:white; text-decoration:none;" href="#" data-toggle="dropdown">Google</a>
                                    <div class="dropdown-menu hs-dropdown-menu" id="ddlGoogle" aria-labelledby="btnGoogle" href="#">
                                        <a class="dropdown-item" href="https://google.com">Google1</a>
                                        <a class="dropdown-item" href="https://google.com">Google2</a>
                                        <a class="dropdown-item" href="https://google.com">Google3</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown flex-fill">
                                    <a class="nav-link dropdown-toggle" id="btnBing" role="button" aria-expanded="false" aria-haspopup="true" style="color:white; text-decoration:none;" href="#" data-toggle="dropdown">Bing</a>
                                    <div class="dropdown-menu hs-dropdown-menu" id="ddlBing" aria-labelledby="btnBing">
                                        <a class="dropdown-item" href="https://bing.com">Bing1</a>
                                        <a class="dropdown-item" href="https://bing.com">Bing2</a>
                                        <a class="dropdown-item" href="https://bing.com">Bing3</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown flex-fill">
                                    <a class="nav-link dropdown-toggle" id="btnDdg" role="button" aria-expanded="false" aria-haspopup="true" style="color:white; text-decoration:none;" href="#" data-toggle="dropdown">Duckduckgo</a>
                                    <div class="dropdown-menu hs-dropdown-menu" id="ddlDdg" aria-labelledby="btnDdg">
                                        <a class="dropdown-item" href="https://duckduckgo.com">DDG1</a>
                                        <a class="dropdown-item" href="https://duckduckgo.com">DDG2</a>
                                        <a class="dropdown-item" href="https://duckduckgo.com">DDG3</a>
                                    <div>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
            
            <div class="container mt-5" style="position:absolute;"><!-- d-flex justify-content-center flex-md-rows align-items-center -->
                <div id="content" class="row" style="display:flex; justify-content:center;"> <!--style="margin-left:auto;margin-right:auto;padding-top: 1rem;">-->
                     <div id="divContMain" class="align-self-center" style="width: inherit;">
                        <div id="contentUPanel">
                            <div id="MainContent_ctl00">
                                <br>
                                <h1>Purchasing Requisitions</h1>
                                <br>
                                <div>
                                    <table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
                                        <tbody>
                                        <tr>
                                            <td align="center" class="thint" colspan="2">Filter</td>
                                        </tr>
                                        <tr>
                                            <td align="left" style="width: 50%">Request Start:</td>
                                            <td align="left" style="width: 50%">
                                                <input class="textboxint" type="text"></td>
                                        </tr>
                                        <tr>
                                            <td align="left" style="width: 50%">Request End:</td>
                                            <td align="left" style="width: 50%">
                                                <input class="textboxint" type="text"></td>
                                        </tr>
                                        <tr>
                                            <td align="left" style="width: 50%">Part Number:</td>
                                            <td align="left" style="width: 50%">
                                                <input class="textboxint" type="text"></td>
                                        </tr>
                                        <tr>
                                            <td align="left" style="width: 50%">Account:</td>
                                            <td align="left" style="width: 50%">
                                                <input class="textboxint" type="text"></td>
                                        </tr>
                                        <tr>
                                            <td align="left" style="width: 50%">Vendor No:</td>
                                            <td align="left" style="width: 50%">
                                                <input class="textboxint" type="text"></td>
                                        </tr>
                                        <tr>
                                            <td align="left" style="width: 50%">Vendor Name:</td>
                                            <td align="left" style="width: 50%">
                                                <input class="textboxint" type="text"></td>
                                        </tr>
                                        <tr>
                                            <td align="center" colspan="2">
                                                <input class="buttonint" type="submit" value="Search"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <br>
                            <div class="container d-flex justify-content-center flex-md-rows align-items-center" style="overflow-x: visible;">
                                <table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;" border="1" rules="all" cellspacing="0" cellpadding="5">
                                    <tbody>
                                        <tr align="center" class="thint">
                                            <td>Row1</td>
                                            <td>Row2</td>
                                            <td>Row3</td>
                                        </tr>
                                        <tr align="center" class="gridview">
                                            <td>Data1</td>
                                            <td>Data2</td>
                                            <td>Data3</td>
                                        </tr>
                                        <tr align="center" class="gridview" style="background-color:#FFE1CD;">
                                            <td>Data1</td>
                                            <td>Data2</td>
                                            <td>Data3</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </form>
</body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View(new SampleViewModel());
		}

		[HttpPost]
		public JsonResult GetAnswer(string question)
		{
			int index = _rnd.Next(_db.Count);
			var answer = _db[index];
			return Json(answer);
		}

		private static Random _rnd = new Random();
		private static List<string> _db = new List<string>{"Yes", "No", "Definitely, yes", "I don't know", "Looks like, yes"};
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new SampleViewModel());
        }
​
        [HttpPost]
        public JsonResult GetAnswer(string question)
        {
            int index = _rnd.Next(_db.Count);
            var answer = _db[index];
            return Json(answer);
        }
​
        private static Random _rnd = new Random();
        private static List<string> _db = new List<string>{"Yes", "No", "Definitely, yes", "I don't know", "Looks like, yes"};
    }
}

View in Full Screen

Calculadora Simple
Ingrese el primer número:

Last Run:	7:57:57 am
Compile:	0.013s
Execute:	0.05s
Memory:	479.69kb
CPU:	0.063s

View IL Code