HTML에서 JS로 배열 데이터 전달(C#을 사용하는 ASP.NET MVC 및 EntityFramework의 응용 프로그램도 약간)

HTML의 데이터를 배열하여 가져오는 방법


크게 두 가지로 나누어 소개하다.
다음은 k=["ss", "ss", "ss"] 아래의 데이터를 얻는 두 가지 방법을 소개합니다.
결론부터 말하자면, 나는 get Elements By ClassName만 있으면 된다고 생각한다.

getElementsByClassName 사용 방법


여기서 얻는 게 좋대요.
test.html
    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />
tes.js
    var k = [];
    for (var i = 0; i < 3; i++) {
        k.push(document.getElementsByClassName('hiddata')[i].value);
    }

getElementById 획득 방법 사용


id가 유일한 것 같아서 수조처럼 id를 설명하고 가져오는 방법입니다.
test.html
    <input id="hiddata3[0]" value="ss" />
    <input id="hiddata3[1]" value="ss" />
    <input id="hiddata3[2]" value="ss" />
tes.js
    var k = [];
    for (var i = 0; i < 3; i++) {
        k.push(document.getElementById('hiddata3['+i+']').value);
    }

해설


상술한 방법의 구조는 약간 다르다.
"getelementsByClassName"에서 검색을 시도하면 같은 이름의 클래스가 자동으로 배열됩니다.
"getelementById"에서 검색을 시도할 때 같은 이름의 값만 검색합니다.(id가 유일한 원칙이기 때문에)
따라서 순환 다시 쓰기 id의 이름을 사용하여 여러 개의 값을 가져옵니다.

보충1: 왜 값을 넣어야 합니까?


get Element ●에서 방금 얻은 물건은 HTML Collection 형식으로 저장되며 직접 값을 얻을 수 없습니다.
아래와 같이 기술해 보시면 그림처럼 HTMLCollection형의 데이터를 발견할 수 있습니다.
test.html
    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />
    <input class="hiddata" value="ss" />
tes.js
    var example = document.getElementsByClassName('hiddata');

따라서hiddata[0].value를 통해 "ss"라는 데이터를 얻을 수 있습니다.
순환은 k=["ss", "ss", "ss"]를 검색할 수 있도록 반복적으로 검색합니다.

보충 2: ASP.NET MVC+EntityFramework에서 얻은 예


'get Element ById'의 취득은 서로 다른 이름의 id를 많이 얻어야 하기 때문에 다소 번거롭다.
ASP.NET MVC+EntityFramework를 사용하면 다음과 같이 DB에 대한 정보를 얻을 수 있습니다.
1. 데이터베이스 정보를 나열하고 ViewBag에 불러옵니다.
tes.cs
        public ActionResult Test()
        {
            var tes = db.Cleaner.Select(m=>m.Cgroup).Where(m=>m.HasValue).Distinct().ToList();
            ViewBag.tes = tes;
            return View();
        }
2. 데이터 숨기기(type="hidden") 형식으로 몰래 전달
tes.cshtml
@using (Html.BeginForm("Test", "Index"))
{
    var s = 0;
    foreach (var item in @ViewBag.tes)
    {
        <input type="hidden" id='hiddata[@(s)]' value="@item" />
        s += 1;
    }
}
3.js 획득
tes.js
    var k = [];
    for (var i = 0; i < 3; i++) {
        k.push(document.getElementById('hiddata['+i+']').value);
    }

후기


이것은 고진감래에서 배운 방법입니다. 사용하려면 get Elements By ClassName을 사용하면 됩니다.

좋은 웹페이지 즐겨찾기