MVC5 JavaScriptResult 使用紀錄

MVC5 JavaScriptResult 使用紀錄。

參考

https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/207375/codertw.com

ASP.NET MVC 5 Controller ActionResult 動作回應結果 JavaScriptResult

原始碼紀錄

FooController.cs

namespace YourProject.Controllers
{
    public class FooController : Controller
    {
        public ActionResult Edit(string id)
        {
            var model = ...
            return View(model);
        }

        [HttpPost]
        public JavaScriptResult GetAddress(string addressType)
        {
            string addr1, addr2, addr3;
            _biz.GetAddress(addressType, out addr1, out addr2, out addr3);
            // addr1 = "新北市中和區";
            // addr2 = "連城路９９９號";
            // addr3 = "９９樓";

            //※ 將會呼叫前端的 handleGetAddress 函式。
            string theJs = $@"handleGetAddress('{addr1}', '{addr2}', '{addr3}');";
            return JavaScript(theJs);
        }
    }
}

Edit.cshtml

@model YourModel

<h2>Edit</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div>
        <div>
            <h6>郵寄地址選取</h6>
            //※ 將由經由後端 Controller 的 GetAddress Action 取得地址資料。
            @Ajax.ActionLink("戶籍", "GetAddress", new { addressType = "戶籍" },
                new AjaxOptions {
                    HttpMethod = "Post"
                    //※ 注意：此時不必指定 UpdateTargetId 
                    // <--- JavaScriptResult 不需要 UpdateTargetId 
                })
            @Ajax.ActionLink("通訊", "GetAddress", new { addressType = "通訊" },
                new AjaxOptions {
                    HttpMethod = "Post"
                })
            @Ajax.ActionLink("公司", "GetAddress", new { addressType = "公司" },
                new AjaxOptions {
                    HttpMethod = "Post"
                })
        </div>
        <div class="row" id="">
            @Html.EditorFor(m => m.addr1, "TextField")
            @Html.EditorFor(m => m.addr2, "TextField")
            @Html.EditorFor(m => m.addr3, "TextField")
        </div>
        <div class="text-center">
            <input type="submit" value="存檔" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        //※將由 Response 回來的 JavaScriptResult 驅動此函式。
        function handleGetAddress(addr1, addr2, addr3) {
            console.log('handleGetAddress', { addr1, addr2, addr3 });
            $('#addr1').val(addr1); // 寫入查詢結果
            $('#addr2').val(addr2);
            $('#addr3').val(addr3);
        }
    </script>
}

(EOF)