How to connect a script? RSS

1 reply

Last post May 26, 2020 04:01 PM by frmasp897654

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

frmasp897654

Member

10 Points

29 Posts

How to connect a script?

May 26, 2020 10:28 AM|frmasp897654|LINK

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>

- Reply
frmasp897654
Member

10 Points

29 Posts
Re: How to connect a script?

May 26, 2020 04:01 PM|frmasp897654|LINK
Added by
```
.item-display {
         cursor: pointer;
     }

     .item-field {
         display: none;
     }
```
The script works.