// home/jsdemo.cshtml
<input type="button" value="button1" onclick="clickme();"/>
<input type="button" value="button2" id="button2" />
<input type="button" value="button3" id="button3" />
@section scripts{
    <script>
        function clickme() {
            alert("Hi");
        }

        document.getElementById("button2").onclick = clickme;
        document.getElementById("button3").addEventListener("click",clickme);
    </script>
}
//======================
// home/jsdemo.cshtml
    <script>
        function clickme() {
            alert("Hi");
        }

        //$(function () {});
        //$(() => {});
        $(() => {
            document.getElementById("button4").onclick = () =>
                alert("Hi " + document.getElementById("text1").value);

            document.getElementById("button2").onclick = function () {
                alert("xxx");
            };
            document.getElementById("button3").addEventListener("click", () => alert("yyy"));
        });       
    </script>
//==================
// home/cssdemo.cshtml

<div id="div1">
  <h1>Database</h1>
  <div class="myclass">
    SQL
  </div>
  <h1>Programming</h1>
  <div class="myclass">
    ASP.NET MVC
  </div>
  <h1>Management</h1>
  <div class="myclass">
    PMP
  </div>
</div>

@section scripts{
    <script>
    $(() => {
        $("h1").css("color", "red");
    });
    </script>    
}
//======================
// home/cssdemo.cshtml

@section scripts{
    <script>
    $(() => {
        $("h1").css("color", "red");
        $(".myclass").css({
            color: "green",
            fontSize:28
        });

        //document.querySelectorAll("h1").forEach(i => i.style.color = "red");
    });
    </script>    
}
//===========================
// home/jsondata?id=100&name=xxx
public ActionResult JsonData(string id, string name)
{
    if (Request.IsAjaxRequest()) {
        var data = new { EmpId = id, EmpName = name, Age = 33 };

        return Json(data, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return View();
    }         
}

//=======================
// home/jsondata.cshtml
<h2>JsonData</h2>

<input type="button" id="button1" value="Ajax" />
<div id="result"></div>

@section scripts{
    <script>
        $(() => {
            $("#button1").on("click", () => {
                //alert(1)
                $.ajax({
                    url: "@Url.Action("jsondata")",
                    data:"id=100&name=Mary"
                })
                    .done(data => {
                        console.log(data); //js object
                        $("#result").text("Age: "+data.Age);
                    });

            });
        });
    </script>
}
//========================
// customerinfo.asmx.cs
public class Customer
{
    public string CustomerId { get; set; }
    public string Name { get; set; }
}

[WebMethod]
public Customer GetCustomer(string id)
{
    List<Customer> data = new List<Customer> {
     new Customer { CustomerId="123", Name="Mary" },
     new Customer { CustomerId="223", Name="Candy" },
     new Customer { CustomerId="323", Name="Lili" }
        };
    Customer customer = data.Find(c => c.CustomerId == id);

    return customer;
}
//=============================
// home/wsdemo.cshtml

<h2>WSDemo</h2>

Id:
<input type="text" id="text1" value="123"/>

<input type="button" value="Ajax" id="button1" />
@section scripts{
    <script>     
        $(() => {
            $("#button1").on("click", () => {
                //alert("id="+$("#text1").val());

                $.ajax({
                    type: "post",
                    url: "@Url.Content("~/CustomerInfo.asmx/GetCustomer")",
                    data: "id=" + $("#text1").val()
                })
                    .done(data => { // XML--->XMLDocument object
                        console.log(data); 
                    });
            });
        });
    </script>
}
//==============================


@section scripts{
    <script>     
        $(() => {
            $("#button1").on("click", () => {
                //alert("id="+$("#text1").val());

                $.ajax({
                    type: "post",
                    url: "@Url.Content("~/CustomerInfo.asmx/GetCustomer")",
                    data: "id=" + $("#text1").val()
                })
                    .done(data => { // XML--->XMLDocument object
                        console.log(data); 
                        $("#result").text("Name: "+data.querySelector("Name")?.textContent);
                    });
            });
        });
    </script>
}
//======================
// home/wsdemo.cshtml

Id:
<input type="text" id="text1" value="123" />

<input type="button" value="XML" id="button1" />
<input type="button" value="JSON" id="button2" />


$("#button2").on("click", () => {
    //alert(JSON.stringify( {id:$("#text1").val()})); //js object--->json

    $.ajax({
        type: "post",
        url: "@Url.Content("~/CustomerInfo.asmx/GetCustomer")",
        contentType:"application/json",
        data: JSON.stringify( {id:$("#text1").val()})
    })
        .done(data => { // JSON--->js object
            console.log(data);
            $("#result").text("Name: "+data.d?.Name);
        });
});


// customerinfo.asmx.cs
[System.Web.Script.Services.ScriptService]
public class CustomerInfo : System.Web.Services.WebService
//=============================
// home/csdemo.cshtml
@section styles{
    <link href="~/Content/themes/base/all.css" rel="stylesheet" />
}
@section scripts{
    <script src="~/Scripts/jquery-ui-1.13.2.js"></script>
    <script>
        $(() => {
            $("#text1").datepicker();
            $("#div1").accordion();
        });
    </script>
}
//====================================
// categories/index.cshtml
@model IEnumerable<MyWeb.Models.Category>
@{
    ViewBag.Title = "Category List";
}

<h2>Category List</h2>

<div id="div1">
    @foreach (var item in Model)
	{
        <h3>@item.CategoryName</h3>
        <div>
            <table class="table table-bordered">
                @foreach (var product in item.Products)
                {
                    <tr>
                        <td>@product.ProductName</td>
                        <td>@product.UnitPrice</td>
                    </tr>
                }
            </table>           
        </div>       
	}
</div>

//=======================
//navbar
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
//===============================
// products/create.cshtml
<div class="form-group">
    @Html.LabelFor(model => model.CategoryID, "CategoryID", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("CategoryID", null, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.CategoryID, "", new { @class = "text-danger" })
    </div>
</div>

// productscontroller.cs
public ActionResult Create()
{
    ViewBag.CategoryID = new SelectList(context.Categories, "CategoryID", "CategoryName");
    return View();
}
[HttpPost]
public async Task< ActionResult> Create(Product product)
{
    if (ModelState.IsValid)
    {
        context.Products.Add(product);
        await context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    ViewBag.CategoryID = new SelectList(context.Categories, "CategoryID", "CategoryName", product.CategoryID);
    return View(product);
}