iT邦幫忙

0

前端問題請教

https://ithelp.ithome.com.tw/upload/images/20190102/20110132WmaeL2IMQk.jpg

https://ithelp.ithome.com.tw/upload/images/20190102/20110132nGJIP4eFxn.jpg

是這樣的,這是我的一個片語的功能,然後下圖是我會用到片語功能的其中
一個頁面

https://ithelp.ithome.com.tw/upload/images/20190102/20110132zDuQIPbIWi.jpg

能否請問,我如何做,才能按下片語時,會跑出一個視窗,然後視窗裡面會
顯示我的所有片語標題,並點選後把片語內容帶入我的交班內容?

片語前端
https://dotnetfiddle.net/mHckio

交班單
https://dotnetfiddle.net/BmZriS

看更多先前的討論...收起先前的討論...
wingkawa iT邦新手 4 級 ‧ 2019-01-02 10:06:07 檢舉
dialog?
javascript與html原生:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
jquery:
https://jqueryui.com/dialog/
tenno081 iT邦新手 5 級 ‧ 2019-01-02 11:04:49 檢舉
你好,整體類似第一個這樣,但我還是不太懂怎麼把他實現出來,
裡面的資料都是自行添加的,那我的這狀況我該如何做?
wingkawa iT邦新手 4 級 ‧ 2019-01-02 11:35:16 檢舉
細節就參考Aka程式狗的回答吧,已經滿清楚的。
現在你先釐清你要做的每個動作流程,然後一步一步實現就行了。
1. 按下「片語」按鈕。
2. 出現Dialog視窗,視窗裡面是所有片語標題,標題可點擊(或是一個按鈕之類的)。
3. 將片語內文填入交班內容。
也就是說:
1. 片語按鈕觸發Dialog顯示
2. Dialog內的內容看是要載入頁面時就用後端先準備好,或是建議用ajax來取得。
3. Dialog的內容要可以點擊,點擊觸發暫存片語內容到javascript變數內。
4. 將暫存的東西填到交班內容的textarea內。
tenno081 iT邦新手 5 級 ‧ 2019-01-02 11:44:33 檢舉
我後來有看到,我再想想,感謝

2 個回答

1
Aka程式狗
iT邦新手 4 級 ‧ 2019-01-02 10:37:15
最佳解答

jquery - 提醒用戶也可以很優雅。使用jquery.ui.js客製化dialog()彈出視窗

透過dialog之類的jquery套件執行客製化彈出視窗,
我這邊提供一個實現方向。

  1. click 片語
  2. 透過ajax帶出所有片語標題
  3. 在ajax完成後的success、complete或done(三擇一)的function內將標題塞到dialog的body
  4. 將dialog的confirm確認function改寫為將片語內容帶入交班內容(帶入方式請用片語ID帶出片語內容)
  5. 呼叫dialog()
看更多先前的回應...收起先前的回應...
tenno081 iT邦新手 5 級 ‧ 2019-01-02 11:43:34 檢舉

我能否請問,ajax是用onLoad這個方法嗎?

不用onload,用這段程式碼執行到某個後端網址,讓他回傳片語的id與標題,在使用這個id跟標題輸出在dialog的body。

        $.ajax({
       type: 'post', // 請求方法
       url: 'akacodedog.php', // 請求網址
       async: true, // 異步請求
       cache: false, // 停止瀏覽器緩存加載
       dataType: 'json', // 返回資料類型
       beforeSend: function(jqXHR) {}, // 發送請求前執行
       success: function(data, textStatus, jqXHR) {}, // 成功後執行
       error: function(xhr, status, error) {}, // 失敗後執行
       complete: function(xhr, status, error) {}, // 完成後執行
      }).done(function(data, textStatus, jqXHR){ // 無論成功、失敗皆執行
          $('#akacodedog').html(data); // 把結果輸出到#akacodedog容器
        });

補充:你只要變更參數url,接著透過success、complete或者done的function,將data給console出來,應該就會看到你需要的資訊。

小魚 iT邦高手 1 級 ‧ 2019-01-02 13:31:53 檢舉

如果要用ajax另外還要在後端寫API

tenno081 iT邦新手 5 級 ‧ 2019-01-02 14:22:58 檢舉

要到後端喔!我一直以為只要純前端就好,這樣是我需要到
controller那裏寫些什麼嗎?
目前我的畫面大概長這樣
https://ithelp.ithome.com.tw/upload/images/20190102/20110132TfEsul4R0u.jpg
https://ithelp.ithome.com.tw/upload/images/20190102/20110132Ey63IJtOOB.jpg

 $.ajax({
        type: 'post',
        url: '/Center/HDPharse/HDPharseList',
        async: true, 
        cache: false, 
        dataType: 'json', 
        success: function(data, textStatus, jqXHR) {}, 
    })
    $('#HDPharseList').html(data);

問題得回到源頭,你的「片語」資料來自哪裡?是資料庫還是寫死的固定資訊?

tenno081 iT邦新手 5 級 ‧ 2019-01-02 16:03:52 檢舉

資料庫的,別的Table的,而我片語這邊本身也能做CRUD相關
順想請問一下,我的是C#,那我這邊可以用Ajax.BeginForm
這個方法嗎?

關於C#的問題需要其他人幫你解決了。

但若是片語資料建在資料庫,那麼controller的工作是透過sql將片語取出來,若不懂sql語法的話可能要在爬文一下了喔!這跟你現在做的前端頁面差很多,或者你們公司內有專門的負責人員可以請教一下sql怎麼取資料,在將片語資料回傳到前端給dialog使用。請求資料的步驟大概是這樣:

  1. click片語向controller請求資料
  2. 在controller使用sql語法取出片語的資料
  3. 在controller回傳資料到前端的ajax給dialog()使用
tenno081 iT邦新手 5 級 ‧ 2019-01-02 16:25:40 檢舉

這樣1跟2的功能有點像查詢吼?

是查詢沒錯,使用select撈出片語資料。

tenno081 iT邦新手 5 級 ‧ 2019-01-02 18:01:31 檢舉

如果是這樣的話我可否沿用原本就有的功能呢?
這是我片與維護用的查詢相關功能
controller

 public ActionResult HDPharseList(HDPharseQueryViewModel model)
        {
            HDPharseService hpsrvc = new HDPharseService();
            model.pharses = hpsrvc.FindPharse(SessionUserInfo().CID,model.OPERATING,model.TITLE);
            if (model.pharses == null) model.pharses = new List<HDPharseDto>();
            model.OperatingOptions = GetOperatingOptions();
            return View(model);
        }

service

  public List<HDPharseDto> FindPharse(string cid ,string operating,string title)
        {
            var query = (from x in _repo.HD_PHARSE
                         where (x.CID == cid ) &&
                               (operating == null || operating.Trim().Equals("") ||x.OPERATING.StartsWith(operating) )&&
                               (title == null || title.Trim().Equals("")|| x.TITLE.StartsWith(title))
                         select new HDPharseDto
                         {
                             GUID =x.GUID,
                             CID=x.CID,
                             OPERATING =x.OPERATING,
                             HOSOUT=x.HOSOUT,
                             DIVISION=x.DIVISION,
                             USERNAME =x.USERNAME,
                             TITLE =x.TITLE,
                             PHARSE_CONTENT=x.PHARSE_CONTENT,
                             STATUS=x.STATUS,
                             CRE_DATE=x.CRE_DATE,
                             CRE_UID=x.CRE_UID,
                             MOD_DATE=x.MOD_DATE,
                             MOD_UID=x.MOD_UID
                         }).ToList<HDPharseDto>();
            foreach(HDPharseDto dto in query)
            {
                dto.Name = _repo.EMPLOYEE.Where(x => x.CID == dto.CID && x.EMP_ID == dto.USERNAME).FirstOrDefault<EMPLOYEE>().EMP_NAME;
            }

            return query;                                                      
        }

這樣把這些資料塞到dialog就可以囉。

0
wilson1966
iT邦研究生 5 級 ‧ 2019-01-03 08:06:51

印象中ASP 無法開窗,所以,你要用前端程式開窗,再用AJAX 取片語資料,充填開窗裡的grid,由USER點選片語,再將片語帶回目的textbox 裡。

我要發表回答

立即登入回答