ASP.NET MVC: Autocomplete Textbox

ในระหว่างที่ผมกำลังโค้ดงานหน้าจอ CheckIn/CheckOut โดยในฟอร์มรับ รหัสผู้เข้าร่วม (Attendee Code) แล้วกดปุ่ม CheckIn/CheckOut เป็นการส่งข้อมูล แล้วผู้ปฎิบัติงานจะรู้ได้อย่างไรว่า รหัสที่ป้อนเข้าไปนั้นถูกคน หรือ ผู้ร่วมงานลืมรหัสของตนเอง จึงคิดว่าจะนำ Autocomplete มาใช้งาน โดยทำงานร่วมกับ jQuery และ Bootstrap

1. บน Visual Studio (2015) เปิด NuGet Package Manager
2. ติดตั้ง package ที่จำเป็นต่อไปนี้
   1. ่jQuery
   2. jQuery.UI
   3. Bootstrap
3. เปิดไฟล์ App_Start/BundleConfig.cs เพื่อจัดการการอ้างถึง Script ไฟล์ต่างๆ (สำหรับ Web Project ประเภทอื่น สามารถ reference แบบเดิมได้)

   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
               "~/Scripts/jquery-{version}.js",
               "~/Scripts/jquery-ui-{version}.js"));
   
   bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
               "~/Scripts/bootstrap.js",
               "~/Scripts/respond.js"));
   
   bundles.Add(new StyleBundle("~/Content/css").Include(
               "~/Content/bootstrap.css",
               "~/Content/jquery-ui.css",
               "~/Content/site.css"));

4.  ที่ Controller ทำการเขียนโค้ดเพื่อดึงรายการ Attendees และ ส่งผ่านไปยัง View ซึ่งในขั้นตอนนี้จะส่งผ่านด้วย Model หรือ ViewData ก็ได้
5. ที่ View CheckIn/CheckOut ต้องจัดการ 2 ส่วน คือ ส่วนของการแสดงผล และ  ส่วนของ jQuery/java
   1. ส่วนของการแสดงผล
      วาง Label Textbox สำหรับรับข้อมูลจากผู้ใช้ และ ปุ่ม Submit โดยจะได้ผลดังภาพข้างบน เพิ่ม Hidden Control เพื่อจัดเก็บค่าที่ต้องการส่งออกในขั้นตอน Post

      using (Html.BeginForm("CheckIn", "Attendances", new { eventID = evt.EventID, scheduleID = sch.ScheduleID }, FormMethod.Post, null))
      {
      <div class="form-horizontal">
         <div class="form-group">
            @Html.Label("Attendee Code", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10 ui-autocomplete">
                @Html.TextBox("searchAttendee", "", new { @class = "form-control" })
                @Html.Hidden("attendeeCode")
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
               <input type="submit" value="CheckIn" class="btn btn-default" />
            </div>
         </div>
      </div>
      }

   2. ส่วนของ jQuery/java
      1. เนื่องจากงานนี้ผมส่งรายการของ Attendees (Collection) ผ่านมาด้วย Strongly typed model เพื่อส่งข้อมูลให้กับ jQuery ใช้งานต่อได้ง่าย จึงต้องแปลง Objects ให้กลายเป็น Json Format ก่อน

         <script>
            $(function() {
                var atdees = @Html.Raw(Json.Encode(Model.Attendees.Select(a => new { a.ID, a.Code, a.FullName })));
            });
         </script>

         เมื่อรันระบบจะได้ Source ไฟล์ในลักษณะนี้
         

      2. แปลงข้อมูลที่ได้ในรูปแบบ Json กลับมาเป็น Object อีกครั้ง โดยค่าที่ return กลับมาจะอยู่ในโครงสร้าง object ที่มี 2 ฟิล์ด คือ label และ value โดย label จะนำไปใช้ในการแสดงผล สำหรับ value ใช้สำหรับส่งข้อมูลออกในกระบวนการ submit

         <script>
            $(function() {
               var atdees = @Html.Raw(Json.Encode(Model.Attendees.Select(a => new { a.ID, a.Code, a.FullName })));
               var atdKeyPairObjs = $.map(atdees, function(value, key) {
                         return {
                             label: value.Code + " " + value.FullName,
                             value: value.Code
                         }
                     });
            });
         </script>

      3. ผูกการทำงาน autocomplete ให้กับ Textbox เป็นอันเสร็จสิ้น

         <script>
            $(function() {
               var atdees = @Html.Raw(Json.Encode(Model.Attendees.Select(a => new { a.ID, a.Code, a.FullName })));
               var atdKeyPairObjs = $.map(atdees, function(value, key) {
                         return {
                             label: value.Code + " " + value.FullName,
                             value: value.Code
                         }
                     });
               AttendeeCodeAutoComplete(atdKeyPairObjs);
            });
         
         
             function AttendeeCodeAutoComplete(attendees) {
                  $("#searchAttendee").autocomplete({
                       // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
                       minLength: 2,
         
                       source: attendees,
         
                       // Once a value in the drop down list is selected, do the following:
                       select: function(event, attendee) {
                                     $('#searchAttendee').val(attendee.item.label);
                                     $('#attendeeCode').val(attendee.item.value);
                                     return false;
                        }
                   });
             }
         </script>

         

– จบตอน –

NONTAPON RATTANAPITTAYAPORN

More Posts