<div id="readability-page-1" class="page"><div>            <h4 data-ke-size="size20">javascript&nbsp;:&nbsp;SweetAlert&nbsp;&nbsp;활용하여&nbsp;input&nbsp;입력&nbsp;값&nbsp;활용하기</h4>

<figure data-origin-width="1024" data-origin-height="446" data-ke-mobilestyle="alignCenter"><span data-url="https://blog.kakaocdn.net/dn/dlRYyi/btrIeNdu2ye/gSzZKy76b0ZCXAw9GVi60k/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/dlRYyi/btrIeNdu2ye/gSzZKy76b0ZCXAw9GVi60k/img.png" data-ke-mobilestyle="alignCenter"></span></figure>

<p data-ke-size="size16">swal 에 input box 가 있는게 존재 합니다.</p>
<p data-ke-size="size16">해당 사이트 가서 js 파일을 다운로드 받습니다.</p>

<p data-ke-size="size16"><a href="https://github.com/t4t5/sweetalert" target="_blank" rel="noopener">https://github.com/t4t5/sweetalert</a></p>
<figure id="og_1658814803306" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="object" data-og-title="GitHub - t4t5/sweetalert: A beautiful replacement for JavaScript's &quot;alert&quot;" data-og-description="A beautiful replacement for JavaScript's &quot;alert&quot;. Contribute to t4t5/sweetalert development by creating an account on GitHub." data-og-host="github.com" data-og-source-url="https://github.com/t4t5/sweetalert" data-og-url="https://github.com/t4t5/sweetalert" data-og-image="https://scrap.kakaocdn.net/dn/bznUdt/hyPc79Jzvw/bkWyNdZCuPlWF3mWVucdU1/img.png?width=1200&amp;height=600&amp;face=973_140_1053_228"><a href="https://github.com/t4t5/sweetalert" target="_blank" rel="noopener" data-source-url="https://github.com/t4t5/sweetalert">

<div>
<p data-ke-size="size16">GitHub - t4t5/sweetalert: A beautiful replacement for JavaScript's "alert"</p>
<p data-ke-size="size16">A beautiful replacement for JavaScript's "alert". Contribute to t4t5/sweetalert development by creating an account on GitHub.</p>
<p data-ke-size="size16">github.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bznUdt/hyPc79Jzvw/bkWyNdZCuPlWF3mWVucdU1/img.png?width=1200&amp;height=600&amp;face=973_140_1053_228"></figure>



<p data-ke-size="size16">못 찾는 분들을 위해 별도로 js 파일만 받아 두었습니다. 여기서 받아도 됩니다.</p>
<figure data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/dYPflI/btrIfSFC0mW/mf161Ouf8JwlnpVQmVzRE0/sweetalert2.min.js?attach=1&amp;knm=tfile.js"><div><p><span>sweetalert2.min.js</span></p><p>0.04MB</p></div></a></figure>

<p data-ke-size="size16">샘플을 찾아 봤습니다.</p>

<pre id="code_1658814927698" data-ke-language="html" data-ke-type="codeblock"><code>swal("Write something here:", {
  content: "input",
})
.then((value) =&gt; {
  swal(`You typed: ${value}`);
});</code></pre>

<figure data-origin-width="668" data-origin-height="294" data-ke-mobilestyle="alignCenter"><span data-url="https://blog.kakaocdn.net/dn/ynuJC/btrIh55x3Lu/uvIsvoch3XiDYXYnmyVEY1/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/ynuJC/btrIh55x3Lu/uvIsvoch3XiDYXYnmyVEY1/img.png" data-ke-mobilestyle="alignCenter"></span></figure>

<p data-ke-size="size16">OK 를 누르면</p>

<figure data-origin-width="668" data-origin-height="285" data-ke-mobilestyle="alignCenter"><span data-url="https://blog.kakaocdn.net/dn/nFQoD/btrIcE2sti2/nMTzUtkW61EFVNiCTAgaRK/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/nFQoD/btrIcE2sti2/nMTzUtkW61EFVNiCTAgaRK/img.png" data-ke-mobilestyle="alignCenter"></span></figure>



<p data-ke-size="size16">이를 활용해 보겠습니다.</p>

<p data-ke-size="size16">위의 sweetalert 의 js 파일을 src 로 참조 합니다.</p>
<pre id="code_1658814771336" data-ke-language="javascript" data-ke-type="codeblock"><code>&lt;script src="~/Scripts/plugins/sweetalert/sweetalert2.min.js"&gt;&lt;/script&gt;</code></pre>

<p data-ke-size="size16">그 다음 swal 함수를 사용할 예정인데요.</p>
<p data-ke-size="size16">input 을 생성하기 위해 content : "input" 를 추가했습니다.</p>
<p data-ke-size="size16">icon 은 warning 으로 했고요. 버튼은 명칭을 커스터 마이징을 위해 배열로 취소, 다운로드라는 명칭으로 변경했습니다.</p>
<p data-ke-size="size16">입력 받은 input 은 value 파라미터로 반환 받을 수 있습니다.</p>


<pre id="code_1658815339875" data-ke-language="html" data-ke-type="codeblock"><code>@using (Html.BeginForm("Index", Controllers, FormMethod.Post, new { id = "form1", @class = "form-inline" }))
{
    @Html.AntiForgeryToken()
    @Html.Hidden("p", (string)ViewBag.P)
    
}</code></pre>

<pre id="code_1658814761247" data-ke-language="html" data-ke-type="codeblock"><code>var token = $('input[name="__RequestVerificationToken"]', $('#form1')).val();

swal({
    content: "input",
    title: "다운로드 하시겠습니까?",
    text: "다운로드 기록 보관됩니다.",
    icon: "warning",
    buttons: ["취소", "다운로드"],
    dangerMode: true,
})
.then((value) =&gt; {

    if (value === null || value === "") {

    } else {

        var formJson = {
            "payYear": payYear,
            "payMonth": payMonth,
            "reason": value
        };

        $.post('@Url.Action("DownloadReason", Controllers, new { area = "Admin" })', {
            __RequestVerificationToken: token,
            p: GetJsonToEncParam(formJson)
        }, function (jsonData) {
            if (jsonData.success == true) {

                var requJson = {
                    "idx": idx,
                    "payYear": payYear,
                    "payMonth": payMonth,
                };

                location.href = "@Url.Action("ExcelDown", Controllers, new { area = "Admin" })" + "?p=" + GetJsonToEncParam(requJson);
            }
            else {
                swal({
                    title: "오류발생(관리자문의)",
                    text: jsonData.error,
                    icon: "error"
                });
            }
        });
    }
});</code></pre>

<p data-ke-size="size16">다운로드 이력을 위해 테이블 스키마 만들어 봅시다.</p>

<pre id="code_1658815549510" data-ke-language="html" data-ke-type="codeblock"><code>CREATE TABLE [dbo].[UNIV_SALARY_DownLoadLog](
	[LogID] [bigint] IDENTITY(1,1) NOT NULL,
	[Subjects] [nvarchar](100) NULL,
	[Reason] [nvarchar](1000) NULL,
	[UserID] [bigint] NULL,
	[Name] [nvarchar](100) NULL,
	[WriteDate] [datetime] NULL
) ON [PRIMARY]
GO

ALTER TABLE [dbo].[UNIV_SALARY_DownLoadLog] ADD  CONSTRAINT [DF_UNIV_SALARY_DownLoadLog_WriteDate]  DEFAULT (getdate()) FOR [WriteDate]
GO</code></pre>

<p data-ke-size="size16">asp.net controller 에 아래와 같이 구현했습니다. post 로 받고, XSRF/CSRF 방지를 위해 존재하는지 체크도 했습니다.</p>
<pre id="code_1658815574681" data-ke-language="html" data-ke-type="codeblock"><code>[HttpPost]
[ValidateAntiForgeryToken]
[JsonErrorHandler]
public JsonResult DownloadReason(string p)
{
    EncToDecParams(p);

    try
    {
        //var idx = GetDecParamValue("idx", "0").ToLong&lt;long&gt;();
        var payYear = GetDecParamValue("payYear", "0").ToNumber&lt;int&gt;();
        var payMonth = GetDecParamValue("payMonth", "0").ToNumber&lt;int&gt;();
        var reason = GetDecParamValue("reason", "");

        var excelFileName = payYear + "년" + payMonth + "월";

        #region 다운로드 사유

        this.dalDownLoadLog = new Data.Salary.DownLoadLog();
        this.dalDownLoadLog.Insert(new Intra.Models.Salary.DownLoadLogDapper()
        {
            LogID = 0,
            UserID = this.UserID,
            Name = this.Name,
            Subjects = $"타이틀",
            Reason = reason
        }, this.UserID);

        #endregion 다운로드 사유

        return Json(new { success = true });
    }
    catch (Exception ex)
    {
    	return Json(new { success = false });
    }
}</code></pre>
            </div></div>

심재운 블로그

javascript : SweetAlert  활용하여 input 입력 값 활용하기
 
 
swal 에 input box 가 있는게 존재 합니다.
해당 사이트 가서 js 파일을 다운로드 받습니다.
 
https://github.com/t4t5/sweetalert
 
 
 
못 찾는 분들을 위해 별도로 js 파일만 받아 두었습니다. 여기서 받아도 됩니다.
 
샘플을 찾아 봤습니다.
 
swal("Write something here:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});
 
 
OK 를 누르면
 
 
 
 
이를 활용해 보겠습니다.
 
위의 sweetalert 의 js 파일을 src 로 참조 합니다.
<script src="~/Scripts/plugins/sweetalert/sweetalert2.min.js"></script>
 
그 다음 swal 함수를 사용할 예정인데요.
input 을 생성하기 위해 content : "input" 를 추가했습니다.
icon 은 warning 으로 했고요. 버튼은 명칭을 커스터 마이징을 위해 배열로 취소, 다운로드라는 명칭으로 변경했습니다.
입력 받은 input 은 value 파라미터로 반환 받을 수 있습니다.
 
 
@using (Html.BeginForm("Index", Controllers, FormMethod.Post, new { id = "form1", @class = "form-inline" }))
{
    @Html.AntiForgeryToken()
    @Html.Hidden("p", (string)ViewBag.P)
    
}
 
var token = $('input[name="__RequestVerificationToken"]', $('#form1')).val();
swal({
    content: "input",
    title: "다운로드 하시겠습니까?",
    text: "다운로드 기록 보관됩니다.",
    icon: "warning",
    buttons: ["취소", "다운로드"],
    dangerMode: true,
})
.then((value) => {
    if (value === null || value === "") {
    } else {
        var formJson = {
            "payYear": payYear,
            "payMonth": payMonth,
            "reason": value
        };
        $.post('@Url.Action("DownloadReason", Controllers, new { area = "Admin" })', {
            __RequestVerificationToken: token,
            p: GetJsonToEncParam(formJson)
        }, function (jsonData) {
            if (jsonData.success == true) {
                var requJson = {
                    "idx": idx,
                    "payYear": payYear,
                    "payMonth": payMonth,
                };
                location.href = "@Url.Action("ExcelDown", Controllers, new { area = "Admin" })" + "?p=" + GetJsonToEncParam(requJson);
            }
            else {
                swal({
                    title: "오류발생(관리자문의)",
                    text: jsonData.error,
                    icon: "error"
                });
            }
        });
    }
});
 
다운로드 이력을 위해 테이블 스키마 만들어 봅시다.
 
CREATE TABLE [dbo].[UNIV_SALARY_DownLoadLog](
	[LogID] [bigint] IDENTITY(1,1) NOT NULL,
	[Subjects] [nvarchar](100) NULL,
	[Reason] [nvarchar](1000) NULL,
	[UserID] [bigint] NULL,
	[Name] [nvarchar](100) NULL,
	[WriteDate] [datetime] NULL
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[UNIV_SALARY_DownLoadLog] ADD  CONSTRAINT [DF_UNIV_SALARY_DownLoadLog_WriteDate]  DEFAULT (getdate()) FOR [WriteDate]
GO
 
asp.net controller 에 아래와 같이 구현했습니다. post 로 받고, XSRF/CSRF 방지를 위해 존재하는지 체크도 했습니다.
[HttpPost]
[ValidateAntiForgeryToken]
[JsonErrorHandler]
public JsonResult DownloadReason(string p)
{
    EncToDecParams(p);
    try
    {
        //var idx = GetDecParamValue("idx", "0").ToLong<long>();
        var payYear = GetDecParamValue("payYear", "0").ToNumber<int>();
        var payMonth = GetDecParamValue("payMonth", "0").ToNumber<int>();
        var reason = GetDecParamValue("reason", "");
        var excelFileName = payYear + "년" + payMonth + "월";
        #region 다운로드 사유
        this.dalDownLoadLog = new Data.Salary.DownLoadLog();
        this.dalDownLoadLog.Insert(new Intra.Models.Salary.DownLoadLogDapper()
        {
            LogID = 0,
            UserID = this.UserID,
            Name = this.Name,
            Subjects = $"타이틀",
            Reason = reason
        }, this.UserID);
        #endregion 다운로드 사유
        return Json(new { success = true });
    }
    catch (Exception ex)
    {
    	return Json(new { success = false });
    }
}

javascript : SweetAlert 활용하여 input 입력 값 활용하기

댓글