How to connect a script?
Have I connected the script correctly?
Used by:
ASP.NET Core
I want to implement an example - https://jsfiddle.net/
I start debugging without a server.
Model1.cs
namespace WebApplCore.Models
{
public class Model1
{
public int ID { get; set; }
public string Title { get; set; }
}
}
HomeController.cs
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using WebApplCore.Models;
namespace WebApplCore.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
List<Model1> Items = new List<Model1>();
Items.Add(new Model1() { ID = 1, Title = "Title 1"});
Items.Add(new Model1(){ ID = 2, Title = "Title 2"});
Items.Add(new Model1(){ ID = 3, Title = "Title 3"});
return View(Items);
}
}
}
Index.cshtml
@using WebApplCore.Models;
@model IEnumerable<Model1>;<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script><!-- CSS Includes --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><style type="text/css">
.table {
margin: 0 auto;
width: 80%;
}</style><body><div class="container"><table class="table table-sm table-hover table-striped"><thead class="thead-dark"><tr><th>
@Html.DisplayNameFor(model => model.ID)</th><th>
@Html.DisplayNameFor(model => model.Title) </th> ></tr></thead>
@foreach (Model1 sVM in Model)
{<tr><td>@sVM.ID</td><td><span class="item-display">@Html.DisplayNameFor(model => model.Title)</span><span class="item-field"><input type="text" value="@Html.DisplayNameFor(model => model.Title)" /></span></td> </tr>
}</table></div><script>$(document.documentElement)
.on("click", "span.item-display", function (event) {$(event.currentTarget)
.hide()
.next("span.item-field")
.show()
.find(":input:first")
.focus()
.select();
})
.on("keypress", "span.item-field", function (event) {
if (event.keyCode != 13)
return;
event.preventDefault();
var $field = $(event.currentTarget),$display = $field.prev("span.item-display");$display.html($field.find(":input:first").val());$display.show();$field.hide();
});</script></body>
